Search code examples
angularangular5angular-template

Angular 5 - add style to specific element dynamically

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';
}