Appearance
Comment utiliser @ViewChild dans un composant dans Angular ?
Voici comment utiliser @ViewChild dans un composant Angular :
- Déclarez @ViewChild en haut de votre classe de composant :
ts
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<input type="text" #myInput>
`,
})
export class AppComponent {
@ViewChild('myInput') input!: ElementRef;
}
- 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 utilisantthis.input.nativeElement.value
.
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',
standalone: true,
template: `
<input type="text" #myInput>
<button (click)="changeValue()">Modifier la valeur de l'input</button>
`
})
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".