Dynamically loading custom components- CSS style is not picked


#1

Quick question about dynamic xml builder in PAN, If I pass the dynamically build component to a page container using _addView method, then it renders perfectly with style of css classes. like the following

var popover = builder.load({
            path: "~/shared/popover",
            name: "Popover",
            page: frameModule.topmost().currentPage,
            attributes: {
                bindingContext: { message: "The available QTY is 21" }
            }
    });
page.getViewById("placeholder")._addView(popover);

However, in my case I’m passing the component to a nativescript-popup which render the component in the topmost frame so no root page. in this case it renders correctly but no css styles applied. Is there away around this problem?


#2

@ganas If I’m not wrong, each child element inherits the page’s styling scope. So builder assumes you are going to add the custom component to the page you are passing in.

But when you add the component to a native view (popup plugin) which is not aware of the styling scope, it fails. A workaround could be,

export function onShowPopupTap(args: EventData) {
    let page = frameModule.topmost().currentPage;
    let popover = builder.load({
            path: "~/shared/popover",
            name: "Popover",
            page: page,
            attributes: {
                bindingContext: { message: "The available QTY is 21" }
            }
    });
    popover.on("loaded", () => {
        // removing all loaded listeners
        popover.off("loaded");
       // inherit style scope
        (<any>popover)._inheritStyleScope(page._styleScope);
    });

    let popup = new Popup({
        width: 70,
        height: 40,
        unit: '%'
    });
    popup.showPopup(args.object, popover);
}

Here is a working example.


#3

Awesome this worked like a charm. a million thanks