Nativescript Angular Lifecycle hooks not applying css classes to dynamic components

Question

When components are added dynamically to a page, style information that inherits from classes do not render in the final component

We have monitored that all lifecycle hooks are correctly executing, and shown that the classes are appended to the Button's internal representation.

This is consistent on both iOS and Android.

https://play.nativescript.org/?template=play-ng&id=qVa8K6&v=28

In the playground above, click on any button to add an error case.

There are no error messages, there is no indication of failure except for incorrect rendering.

Answer 1

I have updated the playground for you here. There is no method available to add/remove class, you should provide the class name and it is working as expected.

ngAfterContentInit() {
        const button: Button = this._getButton();

        button.minHeight = 36;
        button.minWidth = 64;
        button.borderWidth = 2;
        button.borderRadius = 4;
        console.log(button);
        button.className = "happy"
        button.cssClasses.add("happy"); // <-- this doesn't render
    }