Recreate the component if new set of options are being applied

README.md

@@ -123,6 +123,51 @@ when there are overlapping properties. Also changing top-level attribute will ap
         }
     }
 
+### Aply new set of Control Options
+
+In order to change the more options at once (or recreate the component with another set of options), the new configuration can be applied to the `options` property.
+
+#### Example:
+
+    @Component({
+        selector: 'my-app',
+        template: `<ig-grid 
+            [(options)]="gridOptions" 
+            [(widgetId)]='id'></ig-grid>`,
+        directives: [IgGridComponent]
+    })
+    export class AppComponent {
+        private gridOptions: IgGrid;
+        private id: string;
+        private data: any;
+
+        constructor() {
+            this.data = Northwind.getData();
+            this.id ='grid1';
+            this.gridOptions = {
+                dataSource: this.data,
+                width: "100%",
+                height: "400px",
+                autoGenerateColumns: true
+            };
+        }
+
+        recreateGrid() {
+            this.gridOptions = {
+                dataSource: Northwind.getAnotherData(),
+                width: "700px",
+                autoGenerateColumns: true,
+                features: [
+                    { name: "Paging" }
+                ]
+            };
+        }
+    }
+
+In this example `options` attribute points to `gridOptions` and changing in reference will destroy the grid, combine the old options with new ones and create the grid with the combined options.
+Also note that the new grid will have height of 400px, even though it's not defined into the new options, because of the combination with new options.
+If disabling an option is required set it to `null`, `undefined`, `[]` or `{}`.
+
 ### Handling events
 
 Binding to control events is achieved by assigning attributes where the name of the attribute is the name of the control's event name surrounded by parenthesis and the value is the name of the event handler.

samples/igDataChart/app.ts

@@ -45,6 +45,36 @@ export class AppComponent {
 			target: "#datachart1"
 		};
 	}
+
+	changeZB() {
+		let opts = {};
+
+		opts = {
+			target: "#datachart1",
+			clone: {
+				dataSource: this.data,
+				gridMode: "none",
+				axes: [{
+					name: "NameAxis",
+					type: "categoryX",
+					labelVisibility: "collapsed"
+				},
+				{
+					name: "PopulationAxis",
+					type: "numericY",
+					labelVisibility: "collapsed"
+				}],
+				series: [{
+					name: "2015Population",
+					type: "line",
+					xAxis: "NameAxis",
+					yAxis: "PopulationAxis",
+					valueMemberPath: "Pop2015"
+				}]
+			}
+		};
+		this.zoombarOptions = opts;
+	}
 }
 
 @NgModule({

samples/igDataChart/igDataChartTemplate.html

@@ -1,2 +1,4 @@
-<ig-data-chart [(options)]="options" widgetId='datachart1'></ig-data-chart>
-<ig-zoombar [(options)]="zoombarOptions" widgetId='zoombar'></ig-zoombar>
+<ig-data-chart [(options)]="options" [widgetId]='"datachart1"'></ig-data-chart>
+<ig-zoombar [(options)]="zoombarOptions" [widgetId]='"zoombar"'></ig-zoombar>
+<br/>
+<button type="button" class="btn btn-default" (click)="changeZB()">Change Zoombar Type</button>

src/igniteui.angular2.ts

@@ -209,13 +209,20 @@ export class IgControlBase<Model> implements DoCheck {
 	protected _allowChangeDetection = true;
 
 	set options(v: Model) {
-		this._config = jQuery.extend(true, v, this._opts);
-		if (this._opts.dataSource) {
-			// _config.dataSource should reference the data if the data is set as a top-level opts
-			// to allow two-way data binding
-			this._config.dataSource = this._opts.dataSource;
+		if (this._config !== undefined && this._config !== null) {
+			//if the options are alrealy set recreate the component
+			jQuery(this._el)[this._widgetName]("destroy");
+			this._config = jQuery.extend(false, this._config, v);
+			jQuery(this._el)[this._widgetName](this._config);
+		} else {
+			this._config = jQuery.extend(true, v, this._opts);
+			if (this._opts.dataSource) {
+				// _config.dataSource should reference the data if the data is set as a top-level opts
+				// to allow two-way data binding
+				this._config.dataSource = this._opts.dataSource;
+			}
+			this._differ = this._differs.find([]).create(null);
 		}
-		this._differ = this._differs.find([]).create(null);
 		this._opts = jQuery.extend(true, {}, this._config);
 		if (this._opts.dataSource) {
 			delete this._opts.dataSource;

tests/unit/igdatachart/chart.spec.ts

@@ -28,6 +28,24 @@ export function main() {
 			});
 		});
 
+		it('should recreate correctly', (done) => {
+			var template = '<div><ig-data-chart  [widgetId]="\'datachart1\'" [(options)]="opts" [changeDetectionInterval]="cdi"></ig-data-chart></div>';
+			TestBed.overrideComponent(TestComponent, {
+				set: {
+					template: template
+				}
+			});
+			TestBed.compileComponents().then(() => {
+				let fixture = TestBed.createComponent(TestComponent);
+				fixture.detectChanges();
+				fixture.componentInstance.opts = fixture.componentInstance.opts1;
+				fixture.detectChanges();
+				expect($(fixture.debugElement.nativeElement).find("#datachart1").igDataChart("option", "series")[0].type)
+					.toBe("line");
+				done();
+			});
+		});
+
 		it('Zoombar should initialize correctly', (done) => {
 			var template = '<div><ig-data-chart  widgetId="datachart1" [(options)]="opts"></ig-data-chart><ig-zoombar [(options)]="zoombarOpts" widgetId="zoombar"></ig-zoombar></div>';
 			TestBed.overrideComponent(TestComponent, {
@@ -51,7 +69,8 @@ export function main() {
 	template: '<div></div>' //"Component 'TestComponent' must have either 'template' or 'templateUrl' set."
 })
 class TestComponent {
-	private opts: any;
+	public opts: any;
+	public opts1: any;
 	private zoombarOpts: any;
 	private data: Array<any>;
 	private cdi: number;
@@ -91,6 +110,31 @@ class TestComponent {
 				valueMemberPath: "Pop2015"
 			}]
 		};
+
+		this.opts1 = {
+			dataSource: this.data,
+			axes: [{
+				name: "NameAxis",
+				type: "categoryX",
+				title: "Country",
+				label: "CountryName"
+			},
+				{
+					name: "PopulationAxis",
+					type: "numericY",
+					minimumvalue: 0,
+					title: "Milions of People"
+				}],
+			series: [{
+				name: "2015Population",
+				type: "line",
+				isHighlightingEnabled: true,
+				isTransitionInEnabled: true,
+				xAxis: "NameAxis",
+				yAxis: "PopulationAxis",
+				valueMemberPath: "Pop2015"
+			}]
+		};
 		this.zoombarOpts = {
 			target: "#datachart1"
 		};