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
– Karan, Commented Jun 18, 2018 at 11:15
you can directly use document.querySelector('app-alerts').style="top:200px" — Aravind
– Aravind, Commented Jun 18, 2018 at 11:17
if it is going to be a child component then use ngAfterViewInit or ngAfterContentInit — Aravind
– Aravind, Commented Jun 18, 2018 at 11:20

Chris Stanley · Accepted Answer · 2018-08-14 16:47:00Z

104

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, 2018 at 16:47

Chris Stanley

2,9663 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ben Over a year ago

Can you not do <div [style.top]="'200px'"> ?

Frozenfrank Over a year ago

@Ben You can even do <div [style.top.px]="variableTopHeight">! If you wanted to inline the value, you could <div [style.top.px]="'200'">

CSS Over a year ago

looks neat. but how you will apply style to a class which is present in a third party control dynamically in Angular way?

Aravind · Accepted Answer · 2018-06-18 12:04:22Z

40

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, 2018 at 12:04

answered Jun 18, 2018 at 11:45

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

6 Comments

Hettomei Over a year ago

When you need to reach a native element, consider using "Template reference variables" angular.io/guide/… . For specific dynamic style, prefer @chris-stanley anwser

makkasi Over a year ago

This is not solution for angular, thus the down vote.

nicowernli Over a year ago

No, this is a really bad practice

CSS Over a year ago

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?

Wahrenheit Sucher Over a year ago

Also use of document makes this not SSR compatible

|

Pankaj Shinde · Accepted Answer · 2020-04-01 03:25:25Z

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 1, 2020 at 3:25

Pankaj Shinde

1071 silver badge5 bronze badges

Comments

Fabricio Leite · Accepted Answer · 2020-05-20 17:12:57Z

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.

Collectives™ on Stack Overflow

Angular 5 - add style to specific element dynamically

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related