Unable to change Label's text with a directive

Question

I have the following directive, and I'm trying to change the text inside w/o luck

@Directive({
    selector: "[FontAwesomeIcon]"
})
export class FontAwesomeIconDirective implements OnInit {

    constructor(private el: ElementRef) {
    }

    get nativeView(): Label {
        return this.el.nativeElement;
    }

    ngOnInit() {
        const nativeView = this.nativeView;
        console.log("init: ", nativeView.text);    // This prints "init: Z"

        nativeView.on(Label.loadedEvent, () => {
            console.log("LOADED:", nativeView.text);
        });       
        
        nativeView.text = 'R';
        console.log("Setting to: ", nativeView.text); // This prints "Setting to:  R"
    }
}

The nativeView.on(Label.loadedEvent never fires ... not sure why.

The rest of the code print stuff correctly to console, but the UI doesn't change.

I'm using this inside the Label:

<Label class="far" text="Z" FontAwesomeIcon></Label>

Appreciate the help