Ionic dynamic <ion-spinner>

I have the following directive:

import { Directive, ElementRef, Input } from '@angular/core';
    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";


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?