DokuWiki

Les templates deviennent plus puissantes lorsque connectés aux Components.La manière la plus simple d'attacher (tie) une template à un component est à travers quelque chose appelé interpolation. On utilise des {{}} pour binder une propriété de la classe de votre component dans votre template.

app.component.ts

export class AppComponent {
  name = 'José';
}

Notation plus formelle :

export class AppComponent {
  name: string;
  constructor() {
   this.name = 'José';
  }
}

template

<p>salut {{name}}<p>

Note : angular va changer la variable dans la template si celle-ci est mise à jour.

*ngFor

app.component.ts

export class AppComponent {
  name = 'José';
}

Notation plus formelle :

export class AppComponent {
  titre: string;
  // objets: string[]; // un array de strings
  objets: any; // on remplace ici par un array d'objets
  constructor() {
    this.titre = 'objets';
    this.objets = [
    {
      nom: 'table',
      usage: 'ça sert à poser des trucs',
      naze: false,
    },
    {
      nom: 'chaise',
      usage: 'ça sert à poser son postérieur'
      naze: false,
    },
    {
      nom: 'télé'
      usage: '???'
      naze: true,
    },
  }
}

template

<h1>{{titre}}</h1>
  <ul>
    <li *ngFor="#item of objets"><p>{{item.nom}} : {{item.usage}}</p><p *ngIf="item.naze">Il faut jeter ça à la poubelle !</p></li>
  </ul>