NativeScript adding xml namespace on Page tag

Question

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

When using Angular you are creating HTML pages and not XML (as it would be in NativeScript Core project). Why do you need to add XML namespace to an HTML page? — Nick Iliev
I want to add the nativescript-stripe plugin(npmjs.com/package/nativescript-stripe) and in the instructions it says to include xmlns code on the page tag — Vlad Stefan Ene
The xmlns is used only in nativeScript Code with XML pages. To use the plugin in Angular, you need the Angular instructions (which are kind of missing in the README). Basically, do this github.com/triniwiz/nativescript-stripe/blob/master/angular/… in your module file and then directly use it in your HTML with tag <CreditCardView></CreditCardView> (fo course add the params) — Nick Iliev

Nick Iliev Nick Iliev · Accepted Answer · 2018-07-24T14:46:35

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>

NativeScript adding xml namespace on Page tag

1 Answers