Directive inside directive

I’m creating custom directive to show custom loading html. In this directive, I’ve used spinner. But this spinner doesn’t work. I guess, I’m missing something here.


  selector: '[loader]' // Attribute selector
export class Loader {`

      	public element: ElementRef, 
      	public renderer: Renderer) {
      	this.element.nativeElement .innerHTML = '<div><ion-spinner name="dots"></ion-spinner></div>';
      	if(this.element.nativeElement.className.indexOf('center-loader') === -1){
      		this.element.nativeElement.className += ' center-loader';


use in html file

<div id="something" loader>

output in html file

<div id="something" loader="" class=" center-loader">
    <div><ion-spinner name="dots"></ion-spinner></div>

Basically spinner should have executed its own html(functionality?) 


Directives have no tie to DOM.
You cannot render an element via a @Directive, you need to use @Component instead.