Why component generated from RendererFactory2 from service does not get the predefined style from component CSS?

Issue

I'm trying to use a service to render html in the dom from a service, using RendererFactory2, but the element does not get the CSS style for the given class name from the component CSS.

before i try to generate the template from the service it was working since it was been created from the component.ts

This is the HTML form in which will be the template will be generated inside:

<form #formInputEl class="edit-area">
  </form>

This is the CSS that will style the generated Template:

.edit-area{
  width: 100%;
  height: 600px;
  min-height: 600px;
  min-width: 100%;
}

.edit-area .outer-text-wraper{
  position:relative;
  height:auto;
  width: auto;
 
}

.edit-area .outer-text-wraper .close-btn{
  top:0;
  left:95%;
  background-color: salmon;
  border-style:none;
  border-radius: 4px;
  position:absolute;
  width:16px;
  height:16px;
  font-size: 16px;
  outline:none;
  visibility:hidden;
}
.edit-area .outer-text-wraper:hover .close-btn{
  visibility:visible;
}
.edit-area .outer-text-wraper .close-btn:active{
  background-color:rgb(255,80,80);
}
.edit-area .outer-text-wraper .close-btn:active{
  background-color:rgb(255,80,80);
}
.edit-area .outer-text-wraper .inner-text-wraper{
  padding:24px;
  height:auto;
  width: auto;
  box-shadow: 1px 2px 2px 1px #eee inset;
  border: 1px solid #ddd;
  border-radius: 2px;

  box-sizing: border-box;
 
}

This is the Service that will generate the template

export class TextAreaService  {
  
    private renderer : Renderer2

    constructor(rendererFactory: RendererFactory2) {
        this.renderer = rendererFactory.createRenderer(null, null);
    }

    public createSimpleDiv(parent){
      
    let newTextEl :HTMLDivElement = this.renderer.createElement('div');
    
    this.renderer.addClass(newTextEl,'outer-text-wraper');
    this.renderer.appendChild(parent,newTextEl);
    //close Button child of newTextEl
    let clsDivEl : HTMLButtonElement =  this.renderer.createElement('button');
    this.renderer.addClass(clsDivEl,'close-btn');
    this.renderer.listen(clsDivEl,'click',() => {
      this.renderer.removeChild(parent,newTextEl);
    });
    this.renderer.appendChild(newTextEl,clsDivEl);
    
    //input textfield sibling from button
    let innerTextWraper : HTMLDivElement = this.renderer.createElement('div');
    this.renderer.addClass(innerTextWraper,'inner-text-wraper');
    this.renderer.setAttribute(innerTextWraper,'contenteditable','true');
    this.renderer.appendChild(newTextEl,innerTextWraper);

  }
}

This is the Component

export class AppComponent implements OnInit{

  @ViewChild('formInputEl',{static: false}) inputForm : ElementRef;
  inputFieldText = new FormControl('');
  constructor(private textArea : TextAreaService){}

  ngOnInit(){}
  generateTextArea(){
    this.textArea.createSimpleDiv(this.inputForm.nativeElement);
  }
}

when the template from service be generated, it should style the way I predefined in the CSS, but it is rendering without the style.

Solution

It's because code injected through Renderer2 is not treated as angular component code but rather as plain html so it doesn't get affected by CSS written in component's CSS, so in order to do so use ViewEncapsulation.NONE on your component like:

@Component({
  ...
  encapsulation: ViewEncapsulation.NONE
})

Read more about ViewEncapsulation

Answered By - Mustahsan