Angular is getting a new control flow. previously we used to use structural directives such as `*ngIf` and `*ngFor`.
The Angular team started to replace these directives with a new control flow syntax.
## Structural directives
the old syntax was based on the structural directives, this is an example of them.
```
<div *ngIf=”data”>
<div *ngFor=”let item of data”>
{{ item.name }}
</div>
</div>
```
# The new control flow
here is the same previous example but with the new control flow
```
{#if data}
{#for item of data}
{{ item.name }}
{/for}
{/if}
```
but what are the differences?
- the new control flow is more compatible with the new Signal components, and..
- more readable
- you don’t need to import CommonModule to use it
- and don’t need to introduce a new element in the DOM tree, or even use `ng-container`
let’s discover the new features introduced with the new control flow
## Deferred loading
you can defer parts of the page to be lazy loaded, by deferred loading
```
{#defer on viewport}
<calender-comp />
{/defer}
```
#trackBy
trackBy is a function that is used when iterating over large collections to prevent replacing DOM elements except for the truly changed items.
it accepts a function, but now it can also accept an item property, so you don’t need to implement an extra method in your component’s class
old:
```
<div *ngFor=”let item of items; trackBy: trackByFn”>
{{ item.name }}
</div>
trackByFn(index, item){
return item.id
}
```
new:
```
{#for item of items; track item.id}
{{ item.name }}
{/for}
```
## else block
previously, we used to introduce two blocks, one is a negative case for the other one.
or simply use the template reference #elseBlock
old:
```
<ng-container *ngIf=”cond; else elseBlock”>
true
</ng-container>
<ng-template #elseBlock>
false
</ng-template>
```
new:
```
{#if cond}
true
{:else}
false
{/if}
```
## empty block
previously we have to make two separate conditions, either by using a negative condition statement or by using the #elseBlock
this leads us to use `*ngIf` and `*ngFor` together, but as we cannot use them in the same element, we needed to introduce a new element
old:
```
<ng-container *ngIf=”data”>
<div *ngFor=”let item of data”>
{{ item.name }}
</div>
</ng-container>
<div *ngIf=”!data || data?.length===0">
No data!
</div>
```
new:
we don’t even need to use if statements here
```
{#for item of items}
{{ item }}
{:empty}
No data!
{/for}
```
