2. Template Syntax

1. Interpolation, expressions, events and statements bindings

Given the following code:

@Component({
  selector: 'app-simple',
  template: `
    <h2> {{user.name}}</h2>
    <img [src]="user.imageUrl"/>
    <button (click)="doSomething()"></button>`
})
export class SimpleComponent implements OnInit { 
  user = { name: 'John Doe', imageUrl: 'profiles/john_doe.jpg' };
  
  doSomething { }
}

Angular interprets JavaScript expressions as follows:

	Usage	Syntax	Example
Interpolation	Display data	{{expression}}	{{user.name}}
Property Binding	Bind data to a property of a DOM element	[property]="expression"	[src]="user.imageUrl"
Event Binding	Bind a function to a DOM element's event Typically a function call	(event)="statement"	(click)="doSomething()"

2. Repeating Data with *ngFor

We use the ngFor structural directive to repeat DOM elements.

@Component({
  selector: 'app-simple',
  template: `
    <ul>
      <li *ngFor="let todo of todos">{{todo.id}} : {{todo.name}}</li>
    </ul>`
})
export class SimpleComponent implements OnInit { 
  todos = [ 
    {
      id: 1,
      name: "Walk dog"
     },
     {
      id: 2,
      name: "Eat lunch"
     }
     {
      id: 3,
      name: "Go for a run"
     }
   ];  
}

3. Removing Elements with *ngIf and *ngSwitch

We use the ngIf structural directive to conditionnally display DOM elements. If the expression evaluated by the *ngIf is false, the DOM element will be removed.

@Component({
  selector: 'app-simple',
  template: `
    <ul *ngIf="todos.length > 0">
      We have amazing todos !
    </ul>`
})
export class SimpleComponent implements OnInit { 
  todos = [ 
    {
      id: 1,
      name: "Walk dog"
     },
     {
      id: 2,
      name: "Eat lunch"
     },
     {
      id: 3,
      name: "Go for a run"
     }
   ];  
}

Similarly, we can use the ngSwitch structural directive to conditionally display/remove DOM nodes while evaluating multiple expressions.

<container-element [ngSwitch]="switch_expression">
   <some-element *ngSwitchCase="match_expression_1">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element>
</container-element>

4. Hiding Elements with [hidden] attribute

If we want to hide elements instead of removing an element (better performance-wise) using a hidden attribute.

<div> [hidden]="todos?.length === 4" </div>

5. Adding Classes and Styles

To add a class conditionnally we can use [class.className] or ngClass

@Component({
  selector: 'app-time',
  template: `
    <div [class.green]="event?.time === '8:00 AM'"> Early </div>
    <div [ngClass]="{green: event?.time === '10:00 AM', bold: event?.time === '10:00 AM'}"> Late</div>`,
  styles: [`
    .green { color: #00FF00; }
    .red { color: #FF0000; }
    .bold { font-weight: bold; }
  `]
})
export class TimeComponent implements OnInit { }

To add a style conditionnally we can use [style.propertyName] or ngStyle

@Component({
  selector: 'app-time',
  template: `
    <div [style.color]="event?.time === '8:00 AM' ? '#00FF00' : '#FF0000'"> Early </div>
    <div [ngStyle]="{'color': event?.time === '8:00 AM' ?  '#00FF00' : '#FF0000', 'font-weight': event?.time === '8:00 AM' ?  'normal' : 'bold'"> Late</div>`,
  styles: [`
    .green { color: #00FF00; }
    .red { color: #FF0000; }
  `]
})
export class TimeComponent implements OnInit { }