Afficher l'enfant en Angular

1. Utilisez le ViewChild avec des éléments DOM dans Angular
2. Utiliser le ViewChild avec des composants enfants dans Angular

Le @ViewChild est un décorateur en Angular le plus couramment utilisé. C’est l’un des premiers décorateurs que nous rencontrons en apprenant Angular.

@ViewChild possède de nombreuses fonctionnalités décrites dans ce didacticiel, avec des exemples pratiques pour chaque cas d’utilisation.

Le @ViewChild est un décorateur de propriété qui configure une requête de vue. La propriété est mise à jour si le DOM de la vue change et qu’un nouvel enfant correspond au sélecteur.

Nous pouvons utiliser @ViewChild avec des directives, des éléments DOM et des composants enfants. Nous pouvons comprendre comment utiliser @ViewChild avec eux dans des exemples.

Créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application en Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Créons une directive, LanguageDirective. Cette directive recherchera les éléments avec l’attribut appLanguage et ajoutera au texte de l’élément le mot Language.

Il existe deux manières de générer une directive en utilisant @angular/cli ou en créant un fichier language.directive.ts.

# Angular
ng generate directive language --skip-tests

Cette commande va créer un fichier language.directive.ts et ajouter la directive au fichier app.module.ts. Et nous utiliserons ElementRef et Renderer2 pour réécrire le texte.

Ainsi, notre code dans language.directive.ts ressemblera à ci-dessous.

# angular
import {
  Directive,
  ElementRef,
  Renderer2
} from '@angular/core';

@Directive(
  { selector: '[appLanguage]' }
)
export class LanguageDirective {
  language = 'NodeJs';

  constructor(elem: ElementRef, renderer: Renderer2) {
    let language = renderer.createText('Language ');
    renderer.appendChild(elem.nativeElement, language);
  }
}

Et le code dans app.module.ts ressemblera à ci-dessous.

# Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { LanguageDirective } from './language.directive';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, LanguageDirective],
  bootstrap: [AppComponent],
})
export class AppModule {}

Ajoutez l’attribut appLanguage à li contenant du texte dans le modèle de composant. Ainsi, notre code dans app.component.html ressemblera à ci-dessous.

# Angular
<h2>Programming Languages</h2>
<ul>
  <li appLanguage>Angular</li>
  <li appLanguage>React</li>
  <li appLanguage>React Native</li>
</ul>

Production:

Le mot Language avant le contenu de l’élément peut également accéder à la variable d’instance de LanguageDirective et définir une variable d’instance extraLanguage avec sa valeur.

Ainsi, notre code dans app.component.ts ressemblera à ci-dessous.

# Angular
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { LanguageDirective } from './language.directive';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  extraLanguage!: string;

  @ViewChild(LanguageDirective)
  set appLanguage(directive: LanguageDirective) {
    this.extraLanguage = directive.language;
  }

  ngAfterViewInit() {
    console.log(this.extraLanguage); // NodeJs
  }
}

Nous avons utilisé un setter dans le code ci-dessus pour définir la variable extraLanguage.

Maintenant, vous remarquerez qu’il attendra que le hook de cycle de vie AfterViewInit accède à la variable car les composants et les directives enfants deviennent disponibles après le chargement de la vue initiale.

Production:

La sortie ci-dessus montre que le composant parent peut accéder à la valeur de la directive en utilisant @ViewChild.

Utilisez le ViewChild avec des éléments DOM dans Angular

Nous allons parcourir les éléments DOM et y accéder en utilisant @ViewChild dans cet exemple. @ViewChild nous permet d’accéder aux éléments natifs du DOM avec une variable de référence de modèle.

Créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application en Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Par exemple, nous avons une balise d’entrée dans app.component.html avec la variable de référence #forViewChild indiquée ci-dessous dans le code.

# Angular
<input #forViewChild placeholder="Your favorite Programming Language">

Nous ajouterons également du CSS dans app.component.css.

# Angular
p {
  font-family: Lato;
}
input {
  padding: 5px 10px;
}
label {
  font-size: 20px;
  padding-right: 10px;
}

Production:

Maintenant, nous pouvons accéder à l’entrée avec @ViewChild et définir la valeur. Notre code dans app.component.ts ressemblera à ci-dessous.

# angular
import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('forViewChild') forViewChild!: ElementRef;
  ngAfterViewInit() {
    this.forViewChild.nativeElement.value = 'Angular!';
  }
}

Ainsi, lorsque ngAfterViewInit s’exécute, la valeur d’entrée sera modifiée et définie sur Angular! comme indiqué dans l’exemple ci-dessous.

Production:

Comme vous pouvez le voir dans l’exemple ci-dessus, le composant parent définit la valeur de l’élément DOM enfant à l’aide de @ViewChild.

Utiliser le ViewChild avec des composants enfants dans Angular

Avec @ViewChild, on peut accéder à un composant enfant et appeler des méthodes ou des variables d’instance disponibles pour l’enfant. Nous allons maintenant passer par un exemple pour comprendre comment nous pouvons utiliser @ViewChild avec des composants enfants dans Angular.

Créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application en Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Maintenant, créons un nouveau composant en tant que HelloComponent.

Nous pouvons créer un nouveau composant de deux manières. En utilisant un @angular/cli et en exécutant la commande suivante.

# Angular
ng generate component hello --flat --skip-tests

En utilisant cette commande, les fichiers hello.component.ts, hello.component.html et hello.component.css seront créés. Ou nous pouvons créer ces fichiers manuellement.

Maintenant, dans app.module.ts, nous devons ajouter le composant nouvellement créé. Notre code dans app.module.ts ressemblera à ci-dessous.

# Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Nous allons ajouter une méthode GreetingMessage à HelloComponent pour renvoyer un message.

# Angular
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css'],
})
export class HelloComponent implements OnInit {
  constructor() {}

  GreetingMessage() {
    return 'Hello Member!';
  }

  ngOnInit(): void {}
}

Maintenant, nous allons référencer le composant enfant dans le app.component.html en utilisant <hello>. Ainsi, notre code ressemblera à ci-dessous.

# Angular
<hello>It Works</hello>

Nous appellerons la méthode GreetingMessage de la classe du composant parent app.component.ts avec @ViewChild. Ainsi, notre code ressemblera à ci-dessous.

# Angular
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(HelloComponent) hello!: HelloComponent;

  ngAfterViewInit() {
    console.log(this.hello.GreetingMessage());
  }
}

Production:

Ce tutoriel nous a appris à utiliser @ViewChild dans différentes situations avec des exemples.