Angular Structural Directives

By: Vahid Mohammadi

Sample code is available in angular-sample/src/app

Created with: RemarkJS

1 / 4

*ngFor Everything Angular Docs keyvalue Pipe Docs

*ngFor

Get index, first, last, even, odd of current element

When are changes propagated to the DOM?

When an element is added to the array
When an element is removed from the array
When items are reordered

Optimizing *ngFor

By default ngFor is optimized by array elements reference, But sometimes we have immutable data.

Use trackBy

Use objects in *ngFor

You can use keyvalue pipe

2 / 4

*ngIf

*ngIf Everything *ngIf Other Features Safe Navigation

Try not to call functions!
- Performance
- It may not detect changes
else and then else
Create scoped variables with *ngIf
*ngIf vs [hidden]: *ngIf is for null check but [hidden] is not. You can also use ?. and !. in Angular template files

3 / 4

ng-template and ng-container

ng-container ng-template Everything Dynamic Components ng-content Everything View & Content Children Directive exportAs

use * directives without creating an element (ex. <tr>)
use multiple * directives
display ng-templates
dispaly dynamic components
- How can we have @Input()s? Use custom injectors

Being “virtual” means the contents won’t actually exist in the compiled DOM

ng-content

selector can be tag, [attribute] or .css-class

View & Content Children

@ViewChild() and @ViewChildren()
@ContentChild() and @ContentChildren()

Directives exportAs

You can export directives to a #template

4 / 4