Ionic dynamic <ion-spinner>

Ionic Framework ionic-v3
1

I have the following directive:

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ 
    selector: '[activity]',
    host: {
        '(click)': 'onClick($event)'
    } 
})
export class ActivityDirective {
    constructor(private el: ElementRef) {
       
    }

    onClick($event) {
         const loading =  document.createElement('ion-spinner');
        const nameAttr = document.createAttribute("name");
        nameAttr.value = "ios";
        loading.setAttributeNode(nameAttr);

        this.el.nativeElement.appendChild(loading);
    }
}

Basically, it is used to show the Spinning icon when user click on . However, when user click on a , it appends tag to the tag already, but the spinning icon is not showing. Anyone has any suggestions?