Exploring the New Template Syntax

  1. Repeating Data with ngFor
  2. Handling Null Values with the Safe-Navigation Operator
  3. Hiding and Showing Content with ngIf
  4. Hiding Content with the [Hidden] Binding
  5. Hiding and Showing Content with ngSwitch
  6. Styling Components with ngClass
  7. Styling Components with ngStyle

1   Repeating Data with ngFor

Finished project screenshot/code:

Starter Project:
https://plnkr.co/edit/6eGck1qHhvRvxua5pcl3?p=info

Finished Project:
https://plnkr.co/edit/eZkde29p1BCFJzDMftTy?p=info


2   Handling Null Values with the Safe-Navigation Operator

If the data in the previous example is missing we will get errors. The display is OK but to prevent errors we use “calls?”.
Starter Project:
https://plnkr.co/edit/6eGck1qHhvRvxua5pcl3?p=info

Finished Project:
https://plnkr.co/edit/eZkde29p1BCFJzDMftTy?p=preview


3   Hiding and Showing Content with ngif

If for example the call length is some times omitted we could use ngIf to not show the call length field, like:

<div *ngIf="call?.length>
   Length:{{call?.length}}
</div>

Without the use of *ngIf:

Starter Project:
https://plnkr.co/edit/opblRmYNLz6DUd9B6k87

Now using *ngIf to remove the field when the location is missing:

Finished Project:
https://plnkr.co/edit/RJt5aUTIjX3NtH2ZdSdV?p=info

Leave a Reply

Your email address will not be published. Required fields are marked *