title: Unable to add class attribute to the DOM element in Angular 7
body: <p>I'm trying to add a class to the dynamically created element in Angular</p>
  
  <p><strong>sample-dom-manipulation.component.ts</strong></p>
  
  <pre><code>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');
    }
  }
  </code></pre>
  
  <p><strong>sample-dom-manipulation.component.html</strong></p>
  
  <pre><code>&lt;div #divMessages&gt;
  
  &lt;/div&gt;
  
  &lt;p class="bg-color"&gt;
    COLORS
  &lt;/p&gt;
  </code></pre>
  
  <p>Please find the <strong><a href="https://stackblitz.com/edit/angular-dom-manipulation-rk" rel="nofollow noreferrer">Stack-Blitz</a></strong> link.</p>
  
  <p>Thanks in advance!</p>