Angular 5 - ajoute un style à un élément spécifique de manière dynamique

Question

J'utilise Angular 5.2 dans mon projet et une nouveauté du angular) framework. Mon composant html ressemble à ceci: -

Je veux ajouter le style = "top: 200px;" dynamiquement vers l'élément en surbrillance avec class = "app-alerts" dans la capture d'écran ci-dessus dans le code angular ts. L'élément div avec la classe "app-alerts" est ajouté au DOM sur le rendu .

S'il vous plaît suggérer les changements de code.

Answer 1

Selon nos commentaires, vous devriez utiliser document.querySelector après un crochet de cycle de vie

ngAfterViewInit() {
    (document.querySelector('.app-alerts') as HTMLElement).style.top = '150px';
}

Answer 2

Je suis super tard pour cette soirée, mais non! N'UTILISEZ PAS DOCUMENT.QUERYSELECTOR. Ce n’est PAS ainsi que vous appelez un élément Angular DOM!

<div [ngStyle]="{'top.px': divStyle}">

Ensuite, dans votre composant, vous avez

ngAfterViewInit() {
  this.divStyle = 200; 
}