Unable to add class attribute to the DOM element in Angular 7

Question

I'm trying to add a class to the dynamically created element in Angular

sample-dom-manipulation.component.ts

import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-sample-dom-manipulation',
  templateUrl: './sample-dom-manipulation.component.html',
  styleUrls: ['./sample-dom-manipulation.component.css']
})
export class SampleDomManipulationComponent implements OnInit {

  @ViewChild('divMessages', {read: ElementRef}) private messages: ElementRef;

  text;
  constructor(private renderer2: Renderer2) {

  }

  ngOnInit() {
   const data = {message: 'WELCOME'};
   const pTag = this.renderer2.createElement('p');

   this.text = this.renderer2.createText(data.message);

   // append text to p element
   this.renderer2.appendChild(pTag, this.text);

   // I want to add the css-class to dynamically generated element!
   // But below line of code is not working.
   pTag.classList.add('bg-color');

   this.renderer2.appendChild(this.messages.nativeElement, this.text);

   // Below code works fine! but I don't want to do like this
   // this.renderer2.addClass(this.messages.nativeElement, 'bg-color');
  }
}

sample-dom-manipulation.component.html

<div #divMessages>

</div>

<p class="bg-color">
  COLORS
</p>

Please find the Stack-Blitz link.

Thanks in advance!

You have already applied bg-color class to ptag, what you want? — Just code
– Just code, Commented Dec 25, 2018 at 5:18
Because I want to dynamically generate elements and add come styling to it. stackblitz.com/edit/angular-4iz6cg — Rajath
– Rajath, Commented Dec 25, 2018 at 5:26

Ashish Ranjan · Accepted Answer · 2018-12-25 05:19:18Z

1

It is not working because you are not appending the correct element to the DOM.

Do this instead:

this.renderer2.appendChild(this.messages.nativeElement, pTag);

https://stackblitz.com/edit/angular-gkcpw7?file=src%2Fapp%2Fapp.component.ts

answered Dec 25, 2018 at 5:19

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

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

Comments

Murhaf Sousli · Accepted Answer · 2018-12-25 05:18:04Z

0

You don't need to use the renderer, Use template binding

<div>
  <p *ngIf="condition" class="{{bgClass}} another-static-class"> {{ data?.message }} </p>
</div>

Component code

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  bgClass: string;
  data = { message: 'WELCOME' };
  condition = false;

  ngOnInit() {
    this.condition = true;
    this.bgClass = 'bg-color';
  }
}

Fixed stackblitz

answered Dec 25, 2018 at 5:18

Murhaf Sousli

13.4k22 gold badges126 silver badges192 bronze badges

1 Comment

Rajath Over a year ago

But my goal is to achieve something different.

Collectives™ on Stack Overflow

Unable to add class attribute to the DOM element in Angular 7

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related