Références :

Directive structurelle Ng-for

Les directives structurelles sont responsables de la mise en page HTML. Elles façonnent ou remodèlent la structure du DOM, généralement en ajoutant, supprimant et manipulant les éléments hôtes auxquels ils sont attachés.

Afin de pouvoir boucler sur un tableau de données via la directive ngFor, modifier le template et l'export du component home - fichier src/app/home/home.component.ts : 

...

<app-housing-location
        *ngFor="let housingLocation of housingLocationList"
        [housingLocation]="housingLocation"
      >
      </app-housing-location>

...

export class HomeComponent {
  housingLocationList: HousingLocation[] = [
    {
      id: 0,
      name: 'Acme Fresh Start Housing',
      city: 'Chicago',
      state: 'IL',
      photo: '/assets/example-house1.jpg',
      availableUnits: 4,
      wifi: true,
      laundry: true,
    },
    {
      id: 1,
      name: 'A113 Transitional Housing',
      city: 'Santa Monica',
      state: 'CA',
      photo: '/assets/example-house2.jpg',
      availableUnits: 0,
      wifi: false,
      laundry: true,
    },
    {
      id: 2,
      name: 'Warm Beds Housing Support',
      city: 'Juneau',
      state: 'AK',
      photo: '/assets/example-house3.jpg',
      availableUnits: 1,
      wifi: false,
      laundry: false,
    },
  ];
}

Notez que la directive ngFor Of

  • instancie un template (au sens de Ng-template) par élément d'une collection,
  • est généralement utilisée sous la forme abrégée *ngFor.

Quelques variables exportées sont souvent utiles :

  • index
  • even
  • odd,
  • first,
  • last

Directives d'attributs

Les directives d'attributs écoutent et modifient le comportement d'autres éléments, attributs, propriétés et composants HTML.

Les plus connues sont : NgClass, NgStyle et NgModel.

Ex d'utilisation de la directive NgClass :

 <div id="navbar" [ngClass]="{'navbar-collapse': true, 'collapse': navbarCollapsed}">

Dans le code issu d'un template ci-dessus, la class collapse n'apparaîtra que loreque la propriété navbarCollapsed sera "true".