*ngFor

One important benefit of data binding is the ability to repeat a certain interface based on an array size, e.g. the number of shapes in our shape editor. Assuming that an array called rectangles (of type Shape[]) is available, we can make the following <rect> repeat for each of the shapes in the array:

<svg>
<rect class="shape"  *ngFor="let shape of rectangles"
   [attr.x]="shape.x" 
   [attr.y]="shape.y" 
   [attr.width]="shape.w" 
   [attr.height]="shape.h">
</rect>
</svg>

An iterator variable called shape is defined and used to refer to the fields of shape objects.

Note the notation [attr.name]="expression" which means that the expression will be set to the respective HTML attribute. For binding Angular usually works with HTML DOM properties (and events, later), and we rarely need to set HTML attributes via Angular, but this is possible with the attr. prefix.

In general, the [] notation means that the data will travel from right to left.

Note that "let shape of shapesToEdit" uses the modern Javascript let keyword. This is not actually JavaScript code, it's just a microsyntax supported by Angular but it was to look familiar with ordinary JavaScript

*ngIf

The canvas view does this job but it has to check for the shape type so it is a bit elaborated. In principle it iterates over an array called shapesToDraw as follows

app/canvas/canvas.component.html

<ng-container *ngFor="let shape of shapesToDraw">
 <rect class="shape" *ngIf="shape.type=='rectangle'" 
   [attr.x]="shape.x" 
...
   [attr.height]="shape.h">
</rect>

 <line class="shape" *ngIf="shape.type=='line'" 
   [attr.x1]="shape.x" 
...
   [attr.y2]="shape.y*1+shape.h*1">
 </line>

 <ellipse class="shape" *ngIf="shape.type=='ellipse'" 
   [attr.cx]="shape.x*1+shape.w/2" 
   [attr.cy]="shape.y*1+shape.h/2" 
   [attr.rx]="shape.w/2" 
   [attr.ry]="shape.h/2">
 </ellipse>
</ng-container>
</svg>

Because the *ngIf and *ngFor directives cannot be combined in the same HTML tag, the example uses a <ng-container> which does not generate any HTML element.

Note also the shape.x*1 peculiarity! This is due to Angular sometimes doing string addition ("1"+"2"="12") rather than number addition (1+2=3) which leads to undesired effects :)

Combining iteration and data binding

Assuming that the shapesToEdit Shape[] array is set, as well as a currentShape, the form view can display the shape chooser like this:

app/shape-form/shape-form.component.html

<select [(ngModel)]="currentShape" size="5">
   <option *ngFor="let shape of shapesToEdit" [ngValue]="shape">{{shape|json}}</option>
</select>

This is a simple HTML select / option input with a few differences

[(ngModel)] used to bind two-way to currentShape
[ngValue] used to bind (one way) the <option> value to the current value of shape
note the [] notation for both

Pipes

In the example above | json is an Angular pipe. It simply displays the object in json format, which is great for debugging. There are many other useful pipes, and you can define your own pipes. You can chain pipes as well.

Resources