Directive inside directive

ionic-v1
1

Hi,
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.

loader.ts

@Directive({
  selector: '[loader]' // Attribute selector
})
export class Loader {`

      constructor(
      	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>
    </div>

output in html file

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

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

thanks
2

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