Skip to content

Commit 92ad973

Browse files
mpavlinovmpavlinov
authored
Merge pull request #5825 from IgniteUI/mpavlov/change-events
docs(*): Adding code snippets for the two-way data binding
2 parents ffaeffb + e5a617b commit 92ad973

File tree

12 files changed

+184
-24
lines changed

12 files changed

+184
-24
lines changed

‎projects/igniteui-angular/src/lib/carousel/carousel.component.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export class IgxCarouselComponent implements OnDestroy {
107107
* Sets the time `interval` in milliseconds before the slide changes.
108108
* If not set, the carousel will not change `slides` automatically.
109109
* ```html
110-
* <igx-carousel [interval] = "1000"></carousel>
110+
* <igx-carousel [interval] = "1000"></igx-carousel>
111111
* ```
112112
* @memberof IgxCarouselComponent
113113
*/
@@ -517,7 +517,7 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
517517
* Gets/sets the `index` of the slide inside the carousel.
518518
* ```html
519519
* <igx-carousel>
520-
* <igx-slide index = "1"</igx-slide>
520+
* <igx-slide index = "1"></igx-slide>
521521
* <igx-carousel>
522522
* ```
523523
* @memberOf IgxSlideComponent
@@ -528,7 +528,7 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
528528
* Gets/sets the target `direction` for the slide.
529529
* ```html
530530
* <igx-carousel>
531-
* <igx-slide direction="NEXT"</igx-slide>
531+
* <igx-slide direction="NEXT"></igx-slide>
532532
* <igx-carousel>
533533
* ```
534534
* @memberOf IgxSlideComponent
@@ -538,7 +538,14 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
538538
* Gets/sets the `active` state of the slide.
539539
* ```html
540540
* <igx-carousel>
541-
* <igx-slide [active] ="false"</igx-slide>
541+
* <igx-slide [active] ="false"></igx-slide>
542+
* <igx-carousel>
543+
* ```
544+
*
545+
* Two-way data binding.
546+
* ```html
547+
* <igx-carousel>
548+
* <igx-slide [(active)] ="model.isActive"></igx-slide>
542549
* <igx-carousel>
543550
* ```
544551
* @memberof IgxSlideComponent
@@ -552,7 +559,10 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
552559
this._active = value;
553560
this.activeChange.emit(this._active);
554561
}
555-
@Output() public activeChange = new EventEmitter<any>();
562+
/**
563+
*@hidden
564+
*/
565+
@Output() public activeChange = new EventEmitter<boolean>();
556566

557567
constructor(private carousel: IgxCarouselComponent) { }
558568
/**

‎projects/igniteui-angular/src/lib/chips/chip.component.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,15 +165,23 @@ export class IgxChipComponent extends DisplayDensityBase {
165165
* ```html
166166
* <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [selected]="true">
167167
* ```
168+
*
169+
* Two-way data binding:
170+
* ```html
171+
* <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">
172+
* ```
168173
*/
169174
@Input()
170175
public set selected(newValue: boolean) {
171176
this.changeSelection(newValue);
172177
this.selectedChange.emit(this._selected);
173178
}
174179

180+
/**
181+
*@hidden
182+
*/
175183
@Output()
176-
public selectedChange = new EventEmitter<any>();
184+
public selectedChange = new EventEmitter<boolean>();
177185

178186
/**
179187
* Returns if the `IgxChipComponent` is selected.

‎projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,11 @@ export abstract class IgxDropDownItemBase implements DoCheck {
122122
* let mySelectedItem = this.dropdown.selectedItem;
123123
* let isMyItemSelected = mySelectedItem.selected; // true
124124
* ```
125+
*
126+
* Two-way data binding
127+
* ```html
128+
* <igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item>
129+
* ```
125130
*/
126131
@Input()
127132
@HostBinding('attr.aria-selected')
@@ -138,8 +143,11 @@ export abstract class IgxDropDownItemBase implements DoCheck {
138143
this.selectedChange.emit(this._selected);
139144
}
140145

146+
/**
147+
*@hidden
148+
*/
141149
@Output()
142-
public selectedChange = new EventEmitter<any>();
150+
public selectedChange = new EventEmitter<boolean>();
143151

144152
/**
145153
* @hidden @internal

‎projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,11 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
9696
* ```html
9797
* this.panel.collapsed = true;
9898
* ```
99+
*
100+
* Two-way data binding:
101+
* ```html
102+
* <igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel>
103+
* ```
99104
*/
100105
@Input()
101106
public get collapsed(): boolean {
@@ -106,8 +111,11 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
106111
this.collapsedChange.emit(this._collapsed);
107112
}
108113

114+
/**
115+
*@hidden
116+
*/
109117
@Output()
110-
public collapsedChange = new EventEmitter<any>();
118+
public collapsedChange = new EventEmitter<boolean>();
111119

112120
/**
113121
* Emitted when the expansion panel finishes collapsing

‎projects/igniteui-angular/src/lib/grids/column.component.ts‎

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -217,9 +217,14 @@ export class IgxColumnComponent implements AfterContentInit {
217217
/**
218218
* Sets the column hidden property.
219219
* Default value is `false`.
220-
* ```typescript
220+
* ```html
221221
* <igx-column [hidden] = "true"></igx-column>
222222
* ```
223+
*
224+
* Two-way data binding.
225+
* ```html
226+
* <igx-column [(hidden)] = "model.isHidden"></igx-column>
227+
* ```
223228
* @memberof IgxColumnComponent
224229
*/
225230
set hidden(value: boolean) {
@@ -240,8 +245,11 @@ export class IgxColumnComponent implements AfterContentInit {
240245
}
241246
}
242247

248+
/**
249+
*@hidden
250+
*/
243251
@Output()
244-
public hiddenChange = new EventEmitter<any>();
252+
public hiddenChange = new EventEmitter<boolean>();
245253
/**
246254
* Gets whether the hiding is disabled.
247255
* ```typescript
@@ -293,6 +301,11 @@ export class IgxColumnComponent implements AfterContentInit {
293301
* ```html
294302
* <igx-column [width] = "'25%'"></igx-column>
295303
* ```
304+
*
305+
* Two-way data binding.
306+
* ```html
307+
* <igx-column [(width)]="model.columns[0].width"></igx-column>
308+
* ```
296309
* @memberof IgxColumnComponent
297310
*/
298311
public set width(value: string) {
@@ -308,8 +321,11 @@ export class IgxColumnComponent implements AfterContentInit {
308321
}
309322
}
310323

324+
/**
325+
*@hidden
326+
*/
311327
@Output()
312-
public widthChange = new EventEmitter<any>();
328+
public widthChange = new EventEmitter<string>();
313329

314330
/**
315331
* @hidden
@@ -490,6 +506,11 @@ export class IgxColumnComponent implements AfterContentInit {
490506
* ```html
491507
* <igx-column [pinned] = "true"></igx-column>
492508
* ```
509+
*
510+
* Two-way data binding.
511+
* ```html
512+
* <igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column>
513+
* ```
493514
* @memberof IgxColumnComponent
494515
*/
495516
public set pinned(value: boolean) {
@@ -506,8 +527,11 @@ export class IgxColumnComponent implements AfterContentInit {
506527
}
507528
}
508529

530+
/**
531+
*@hidden
532+
*/
509533
@Output()
510-
public pinnedChange = new EventEmitter<any>();
534+
public pinnedChange = new EventEmitter<boolean>();
511535

512536
/**
513537
* @deprecated
@@ -1771,18 +1795,27 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
17711795
}
17721796
/**
17731797
* Sets the column group hidden property.
1774-
* ```typescript
1798+
* ```html
17751799
* <igx-column [hidden] = "true"></igx-column>
17761800
* ```
1801+
*
1802+
* Two-way data binding
1803+
* ```html
1804+
* <igx-column [(hidden)] = "model.columns[0].isHidden"></igx-column>
1805+
* ```
17771806
* @memberof IgxColumnGroupComponent
17781807
*/
17791808
set hidden(value: boolean) {
17801809
this._hidden = value;
17811810
this.hiddenChange.emit(this._hidden);
17821811
this.children.forEach(child => child.hidden = value);
17831812
}
1813+
1814+
/**
1815+
*@hidden
1816+
*/
17841817
@Output()
1785-
public hiddenChange = new EventEmitter<any>();
1818+
public hiddenChange = new EventEmitter<boolean>();
17861819

17871820
/**
17881821
*@hidden

‎projects/igniteui-angular/src/lib/grids/grid-base.component.ts‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
366366
* }
367367
* ];
368368
* this.grid.filteringExpressionsTree = (logic);
369+
* ```
370+
* Two-way data binding.
371+
* ```html
372+
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
369373
* ```
370374
* @memberof IgxGridBaseComponent
371375
*/
@@ -398,8 +402,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
398402
}
399403
}
400404

405+
/**
406+
*@hidden
407+
*/
401408
@Output()
402-
public filteringExpressionsTreeChange = new EventEmitter<any>();
409+
public filteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
403410

404411
/**
405412
* Returns the advanced filtering state of `IgxGridComponent`.
@@ -518,6 +525,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
518525
/**
519526
* Sets the current page index.
520527
* <igx-grid #grid [data]="Data" [paging]="true" [page]="5" [autoGenerate]="true"></igx-grid>
528+
*
529+
* Two-way data binding.
530+
* <igx-grid #grid [data]="Data" [paging]="true" [(page)]="model.page" [autoGenerate]="true"></igx-grid>
521531
*/
522532
set page(val: number) {
523533
if (val === this._page || val < 0 || val > this.totalPages - 1) {
@@ -530,8 +540,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
530540
this.notifyChanges();
531541
}
532542

543+
/**
544+
*@hidden
545+
*/
533546
@Output()
534-
public pageChange = new EventEmitter<any>();
547+
public pageChange = new EventEmitter<number>();
535548

536549
/**
537550
* Returns the number of visible items per page of the `IgxGridComponent`.
@@ -550,6 +563,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
550563
* Sets the number of visible items per page of the `IgxGridComponent`.
551564
* ```html
552565
* <igx-grid #grid [data]="Data" [paging]="true" [perPage]="5" [autoGenerate]="true"></igx-grid>
566+
* ```
567+
*
568+
* Two-way data binding.
569+
* ```html
570+
* <igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>
553571
* ```
554572
* @memberof IgxGridBaseComponent
555573
*/
@@ -565,8 +583,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
565583
this.notifyChanges();
566584
}
567585

586+
/**
587+
*@hidden
588+
*/
568589
@Output()
569-
public perPageChange = new EventEmitter<any>();
590+
public perPageChange = new EventEmitter<number>();
570591

571592
/**
572593
* You can provide a custom `ng-template` for the pagination UI of the grid.
@@ -2167,6 +2188,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
21672188
* dir: SortingDirection.Desc,
21682189
* ignoreCase: true
21692190
* }];
2191+
* ```
2192+
*
2193+
* Two-way data binding.
2194+
* ```html
2195+
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
21702196
* ```
21712197
* @memberof IgxGridBaseComponent
21722198
*/
@@ -2176,8 +2202,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
21762202
this.notifyChanges();
21772203
}
21782204

2205+
/**
2206+
*@hidden
2207+
*/
21792208
@Output()
2180-
public sortingExpressionsChange = new EventEmitter<any>();
2209+
public sortingExpressionsChange = new EventEmitter<ISortingExpression[]>();
21812210

21822211
/**
21832212
* @hidden

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,11 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
238238
* dir: SortingDirection.Asc,
239239
* ignoreCase: false
240240
* }];
241+
* ```
242+
*
243+
* Two-way data binding.
244+
* ```html
245+
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpressions)]="model.groupingExpressions"></igx-grid>
241246
* ```
242247
* @memberof IgxGridComponent
243248
*/
@@ -289,8 +294,11 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
289294
}
290295
}
291296

297+
/**
298+
*@hidden
299+
*/
292300
@Output()
293-
public groupingExpressionsChange = new EventEmitter<any>();
301+
public groupingExpressionsChange = new EventEmitter<IGroupingExpression[]>();
294302

295303
/**
296304
* Returns a list of expansion states for group rows.
@@ -314,6 +322,11 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
314322
* hierarchy: [{ fieldName: 'ID', value: 1 }]
315323
* }];
316324
* // You can use DataUtil.getHierarchy(groupRow) to get the group `IgxGridRowComponent` hierarchy.
325+
* ```
326+
*
327+
* Two-way data binding.
328+
* ```html
329+
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpansionState)]="model.groupingExpansionState"></igx-grid>
317330
* ```
318331
* @memberof IgxGridComponent
319332
*/
@@ -323,8 +336,11 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
323336
this.cdr.detectChanges();
324337
}
325338

339+
/**
340+
*@hidden
341+
*/
326342
@Output()
327-
public groupingExpansionStateChange = new EventEmitter<any>();
343+
public groupingExpansionStateChange = new EventEmitter<IGroupByExpandState[]>();
328344

329345
/**
330346
* An @Input property that determines whether created groups are rendered expanded or collapsed.

0 commit comments

Comments
 (0)