Angular 5 – add style to specific element dynamically

Issue

I am using Angular 5.2 in my project and new to the angular framework. My component html is looking like this:-

enter image description here

I want to add the style=”top:200px;” dynamically to the highlighted element with class=”app-alerts” in the above screenshot in the angular ts code. The div element with class “app-alerts” get added to the DOM on the render.

Please suggest the code changes.

Solution

As per our comments, You should be using document.querySelector after a life cycle hook

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

Answered By – Aravind

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.