Interpolation: Lire des propriétés dans le template ​

Notre structure :

<project root>
      app
        navbar
          navbar.module.ts
          navbar.component.ts
        app.component.ts
        app.module.ts
      main.ts
      index.html

<project root>
      app
        navbar
          navbar.module.ts
          navbar.component.ts
        app.component.ts
        app.module.ts
      main.ts
      index.html

Voici notre fichier app.component.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'app-navbar',
  template: '<p>{{ title }}</p>'
})
export class NavbarComponent {
  title: string = 'My App'
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-navbar',
  template: '<p>{{ title }}</p>'
})
export class NavbarComponent {
  title: string = 'My App'
}

Nous définissons la propriété title avec la valeur My App par défaut. Pour l'afficher dans le template, nous utilisons la syntaxe suivante:

On appelle cette syntaxe interpolation, ou plus familièrement les moustaches Notez qu'on peut avoir des expressions comme