CSS styles doesn't work for Html added by innerHtml in Angular 2+ directive

Question

I'm trying to implement a simple loading icon directive:

import { Directive, ElementRef, Renderer2, Input, OnChanges } from '@angular/core';

@Directive({
  selector: '[appLoading]',
})
export class LoadingDirective implements OnChanges {
  @Input() appLoading: boolean;

  constructor(private elRef: ElementRef, private renderer: Renderer2) {
  }

  ngOnChanges() {
    if (this.appLoading) {
      this.renderer.addClass(this.elRef.nativeElement, 'loading-wrap');
      this.elRef.nativeElement.innerHtml = '<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>';

    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'display', 'none');
    }
  }

}

In my template I have:

<div [appLoading]="isLoading"></div>

But it looks like Angular doesn't apply my styles for loading spinner in styles.css for the content added into innerHtml. The styles work for the main element with class 'loading-wrap' though.

You mean lds-elliosis class style not being applied to innerHTML div? — Chellappan வ
@Chellappanவ yes, styles doesn't apply to lds-ellipsis, however, they apply to loading-wrap class — Garfield Lasaga
Sorry for the late replay can you move your ids-ellipsis class to style.css and check — Chellappan வ

Garfield Lasaga Garfield Lasaga · Accepted Answer · 2020-05-22T14:52:30

The error was caused by innerHtml, it obviously should be innerHTML

this.elRef.nativeElement.innerHTML = '<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>';

CSS styles doesn't work for Html added by innerHtml in Angular 2+ directive

1 Answers