Search code examples
nativescriptangular2-nativescript

NativeScript adding xml namespace on Page tag

I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?

Best regards, Vlad

Solution

  • To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.

    I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.

    Installation

    npm i nativescript-stripe --save

    Register the UI element in app.module.ts as done here

    import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);

    Add the following in main.ts as required in the plugin README

    import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";

declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
    if (platform.isIOS) {
        STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
    }
});

    Use the plugin in your HTML (example)

    <CreditCardView id="card"></CreditCardView>