Angular 5 - add style to specific element dynamically

Question

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

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.

There is no condition at the moment. Please suggest the code changes. — Karan, Jun 18 '18 at 11:15
you can directly use `document.querySelector('app-alerts').style="top:200px"` — Aravind, Jun 18 '18 at 11:17
if it is going to be a child component then use `ngAfterViewInit` or `ngAfterContentInit` — Aravind, Jun 18 '18 at 11:20
ngAfterViewInit(): void { document.querySelector('app-alerts').style = "top:200px"; } gives red-error lines in vs.net. It says style does not exist on type 'Element' — Karan, Jun 18 '18 at 11:24
Gives typescript error TypeError: Cannot set property 'style' of null — Karan, Jun 18 '18 at 11:24
The syntax might be wrong I guess watch the return types please. — Aravind, Jun 18 '18 at 11:25
ngAfterViewInit(): void { (document.querySelector('.app-alerts') as HTMLElement).style.top = '150px'; } — Karan, Jun 18 '18 at 11:40
You can move the answer to the correct section. And then i can select this as an answer. — Karan, Jun 18 '18 at 11:41
OP -- Is there a reason you don't prefer [the solution](https://stackoverflow.com/a/51846248/1028230) from @ChrisStanley? That seems to be the "Angular Way" to solve your issue, afaict. — ruffin, Nov 05 '18 at 15:23
Chris replied in August and i got the earlier solution in June. His solution is neat as well. — Karan, Nov 08 '18 at 09:09

score 97 · Answer 1 · answered Aug 14 '18 at 16:47

97

I'm super late to this party, but NO! DO NOT USE DOCUMENT.QUERYSELECTOR. That is NOT how you style an Angular DOM element!

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

Then in your component, you have

ngAfterViewInit() {
  this.divStyle = 200; 
}

answered Aug 14 '18 at 16:47

Chris Stanley

2,766
2
13
18

2

Can you not do `
` ?
– Ben Jun 28 '19 at 07:50
4

@Ben You can even do `
`! If you wanted to inline the value, you could `
`
– Frozenfrank Aug 26 '19 at 16:28
1

looks neat. but how you will apply style to a class which is present in a third party control dynamically in Angular way? – CSS Jun 03 '22 at 07:16

Aravind · Accepted Answer · 2018-06-18T12:04:22.717

39

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

edited Jun 18 '18 at 12:04

answered Jun 18 '18 at 11:45

Aravind

40,391
16
91
110

1

When you need to reach a native element, consider using "Template reference variables" https://angular.io/guide/template-syntax#template-reference-variables-var . For specific dynamic style, prefer @chris-stanley anwser – Hettomei Sep 03 '19 at 13:34
3

This is not solution for angular, thus the down vote. – makkasi Feb 21 '20 at 11:36
3

No, this is a really bad practice – nicowernli Sep 14 '20 at 12:56
If this is bad practice then how we can apply style to a class which is present in a third party control dynamically in Angular way? – CSS Jun 03 '22 at 07:17
Also use of `document` makes this not SSR compatible – Wahrenheit Sucher Aug 09 '22 at 14:38
I settled on this solution as nothing seemed to work for setting width of the component inserted in the router outlet into mat-sidenav-content – user3088037 Jun 06 '23 at 16:59

score 1 · Answer 3 · answered Apr 01 '20 at 03:25

1

I came across a page that has good explanation and sample code to add the style dynamically in Angular 2+. Attach the style dynamically in Angular

answered Apr 01 '20 at 03:25

Pankaj Shinde

107
1
5

score 1 · Answer 4 · answered May 20 '20 at 17:12

I had the same problem, i needed to scroll a div when user scroll a page, and solved my problem with the code below. At the component where you want to capture the scroll:

import { HostListener } from '@angular/core';

@ViewChild('curtain') divCurtain: ElementRef;

export class ComponentX {
    @HostListener('window:scroll', ['$event']) onScrollEvent($event) {
        console.log(window.pageYOffset);
        this.divCurtain.nativeElement.style.top = window.pageYOffset.toString().concat('px');
    }

    ngOnInit(): void { }
}

Only this, i did not create any directive or other code. This HostListener is executed every time the user scroll the page, and i get the window.pageYOffset to send to my div.

I hope it helps.

Angular 5 - add style to specific element dynamically

4 Answers4