Angular

Appearance

Comment utiliser @ViewChild dans un composant dans Angular ? ​

Voici comment utiliser @ViewChild dans un composant Angular :

  1. Déclarez @ViewChild en haut de votre classe de composant :
ts
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myInput') input: ElementRef;
}
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myInput') input: ElementRef;
}
  1. Dans votre template HTML, ajoutez un référentiel à l'élément que vous souhaitez récupérer dans votre composant :
html
<input type="text" #myInput>
<input type="text" #myInput>
  1. Vous pouvez maintenant accéder à l'élément de votre template HTML dans votre composant en utilisant la propriété input. Par exemple, vous pouvez accéder à la valeur de l'input en utilisant this.input.nativeElement.value. Vous pouvez également utiliser la propriété input pour changer la valeur de l'input en utilisant this.input.nativeElement.value = 'nouvelle valeur'.

Voici un exemple complet et concret de l'utilisation de @ViewChild dans un composant Angular :

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

@Component({
  selector: 'app-root',
  template: `
    <input type="text" #myInput>
    <button (click)="changeValue()">Modifier la valeur de l'input</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myInput') input: ElementRef;

  changeValue() {
    this.input.nativeElement.value = 'Nouvelle valeur';
  }
}
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" #myInput>
    <button (click)="changeValue()">Modifier la valeur de l'input</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myInput') input: ElementRef;

  changeValue() {
    this.input.nativeElement.value = 'Nouvelle valeur';
  }
}

Dans cet exemple, lorsque vous cliquerez sur le bouton, la valeur de l'input sera modifiée en "Nouvelle valeur".