|
Publié le par Chloé MAHALIN

Angular 4

Conditionner l'apparition de contenu HTML

Parfois, on peut souhaiter qu'un composant ou un élement de l'arbre DOM n'apparaisse que lorsqu'un pré-requis est rempli. La directive *ngIf permet de conditionner l'apparition d'un élement :

component.ts

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

@Component({
  selector: 'selector',
  templateUrl: './component.html',
  styleUrls: ['./component.css']
})
export class MyComponent {

    isAdmissible: boolean = true;
    grade: number = 15;
}

component.html

<div>
    <div *ngIf='isAdmissible'>
        Congratulations on your admissibility !
    </div>

    <div *ngIf='grade > 10'>
        Your grade granted you an admissibility !
    </div>
</div>