J'ai un composant Angular 2 où je veux récupérer un élément div <div id ="myId">
par son identifiant. J'essaie de faire: document.getElementById("myId")
dans mon composant (TypeScript), mais j'obtiens une erreur: "impossible de trouver le nom du document". Je vois que dans d'autres articles, nous pouvons faire quelque chose de similaire en utilisant @ViewChild, mais je ne vois pas comment nous pouvons utiliser cela avec une div, des idées?
Vous pouvez utiliser @ViewChild avec une div en ajoutant un TemplateRef .
Modèle
<div id ="myId" #myId>
Composant
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('myId') myId: ElementRef;
constructor() {
}
ngAfterViewInit() {
console.log(this.myId.nativeElement);
}
}
Ce billet de blog par Kara Erickson est une très bonne lecture pour se familiariser avec l’approche Angular pour faire des choses comme celle-ci.
Ajoutez variable de référence du modèle à l'élément auquel vous devez accéder:
<div #myDiv></div>
Et dans le composant:
class MyComponent implements AfterViewInit {
@ViewChild('myDiv') myDiv: ElementRef;
constructor() {}
ngAfterViewInit() {
console.log(this.myDiv);
}
}