Angular Basics : Projection de contenu conditionnelle

Aujourd’hui, nous allons explorer les composants qui utilisent la projection de contenu conditionnelle pour afficher le contenu uniquement lorsque des conditions spécifiques sont remplies : la projection de contenu conditionnelle.

Mise en œuvre de la projection de contenu

Nous avons examiné un introduction à la projection de contenu dans un post précédent et sur projection de contenu multi-slots en autre. Il existe trois façons d’implémenter la projection de contenu dans Angular, selon la Docs :

• Projection de contenu à un seul emplacement. Avec ce type de projection de contenu, un composant accepte le contenu d’une source unique.
• Projection de contenu multi-slots. Dans ce scénario, un composant accepte le contenu de plusieurs sources.
• Projection de contenu conditionnelle. Les composants qui utilisent la projection de contenu conditionnelle affichent le contenu uniquement lorsque des conditions spécifiques sont remplies.

Dans l’article d’aujourd’hui, nous examinerons le dernier, projection de contenu conditionnelle en angulaire.

Avant de commencer

Les développeurs de tous niveaux, des débutants aux experts, peuvent lire cet article. Peu importe si vous connaissez les concepts pour débutants dans Angular. Voici quelques éléments que vous devriez avoir pour pouvoir suivre la démonstration de cet article :

• Un environnement de développement intégré comme VS Code
• Node version 11.0 installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l’installation de Node)
• CLI angulaire version 8.0 ou supérieure
• Version angulaire 12 ou supérieure

D’autres avantages incluent :

• Connaissance pratique du framework Angular à un niveau débutant.

Commencer

Nous allons configurer un projet Angular à l’aide de l’assistant de l’interface utilisateur de Kendo, puis illustrer le fonctionnement de ng-content avec l’implémentation à emplacement unique.

Ouvrez votre code VS et accédez à l’onglet Extensions et recherchez l’assistant de modèle d’interface utilisateur Kendo, installez-le et rechargez votre application VS Code. Maintenant que vous avez l’assistant, mettons-nous au travail !

Pour utiliser l’assistant dans l’application VS Code, appuyez sur Commande + Maj + P et sélectionnez l’assistant de l’interface utilisateur de Kendo et il ouvrira une invite où vous nommerez le projet et choisirez l’emplacement sur votre machine que vous souhaitez localiser.

Maintenant, votre application a été générée, juste comme ça. Ouvrez le projet dans VS Code et ouvrez un nouveau terminal et exécutez la commande ci-dessous pour installer tous les packages avec leurs dernières versions.

npm install

Une fois l’installation terminée, testons si tout est correct. Exécutez le serveur de développement Angular avec cette commande :

ng serve

Ouvrez votre navigateur pour http://localhost:4200/home et ça devrait ressembler à ça :

Mise en œuvre conditionnelle

Angular vous permet également de décider d’ajouter des conditions au contenu projeté afin qu’il ne puisse être affiché que lorsqu’une condition définie est remplie. Commençons là où nous nous sommes arrêtés avec la projection de contenu multi-slots.

1. Créez un nouveau composant et appelez-le projeté.

2. Assurez-vous que le fichier HTML du composant d’en-tête ressemble à ceci :

<div class='container-fluid'>
<div class="d-flex border-bottom py-2">
    <div class="d-flex">
        <div class='project-name d-flex'>
            <ng-content select="#cars"></ng-content>
        </div>
    </div>
    <div class='d-flex ml-auto nav'>
        <ng-content select=".books"></ng-content>
    </div>
</div>
</div>

3. Le fichier HTML du composant d’application doit être remplacé par ceci :

<div class="content">
    <app-header>
        <div id="cars">
            Hello world, I am projected! 
        </div>
        <app-projected class="books"></app-projected>
    </app-header>
    <router-outlet></router-outlet>
</div>
<div class="footer">
    <app-footer></app-footer>
</div>

Ajout de l’instruction conditionnelle

Pour cela, nous allons créer un bouton pour afficher le contenu projeté lorsque la valeur est true et masquer le contenu lorsque la valeur est false. Dans le composant d’en-tête, remplacez le bloc de code par celui-ci :

<div class="container-fluid">
<div class="d-flex border-bottom py-2">
    <div class="d-flex">
        <div class="project-name d-flex">
            <ng-content></ng-content>
        </div>
    </div>
    <div class="d-flex ml-auto nav"*ngIf="display">
        <ng-content select="app-projected"></ng-content>
    </div>
</div>
</div>

Angular vous permet d’écrire des instructions conditionnelles pour ng-content. Ici, nous disons à Angular d’afficher la div si l’affichage est vrai. Tout ce que nous faisons dans le fichier de modèle est de spécifier une entrée pour l’affichage comme celle-ci :

import { Component, Input } from '@angular/core';
@Component({
    selector: 'app-header',
    templateUrl: './header.component.html'
})
export class HeaderComponent {
  @Input() public display = false;
}

Tout le reste sur la façon dont l’affichage est géré ou basculé, nous définissons dans le composant de l’application.

Projection du contenu

Nous essayons toujours de projeter le message hello et le texte dans le composant projeté.

<div class="content">
    <button (click)="toggleLight()">{{title}}</button>
    <app-header [display]="display">
        <div>
            Hello world, I am projected! 
        </div>
        <app-projected></app-projected>
    </app-header>
    <router-outlet></router-outlet>
</div>
<div class="footer">
    <app-footer></app-footer>
</div>

Ici, nous avons ajouté un bouton un événement de clic pour nous aider avec l’effet de masquage/affichage que nous recherchons. Nous avons ajouté l’affichage à partir de l’ensemble d’entrées dans le composant d’en-tête ci-dessus. Passons maintenant au fichier de composant d’application :

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title="Show Me";
  display = false;
toggleLight(){
    this.display = !this.display;
    this.title = this.display ? 'Hide Me' : 'Show Me';
  }
}

Nous définissons une variable de titre, puis nous définissons une fonction pour le bouton. Nous sommes maintenant prêts à partir !

Emballer

Nous pouvons voir que notre contenu est projeté comme prévu, en fonction des conditions définies sur le bouton que nous avons créé. Avec cela, nous sommes arrivés à la fin de la série d’introduction à la projection de contenu dans Angular. Nous avons vu les trois façons dont nous pouvons projeter du contenu dans un composant sans connaître le contenu de ce composant. Bon piratage !