Angular BrowserModule for NativeScript - nativescript

As we use BrowserModule for using ngModel in web area, and is imported by default while creating new ng app, what is the equivalent for this in NativeScript?

If you want to use ngModel to nativescript app, you could use NativeScriptFormsModule and import it to your app.module.ts as following:
import { NativeScriptFormsModule } from "nativescript-angular/forms"
you can check this link here

Related

Fluent UI - best way to import components

I'm a beginner in the new Javascript world and would like to know the difference between
import { MessageBar } from "office-ui-fabric-react";
import { MessageBar } from "office-ui-fabric-react/lib-commonjs/MessageBar";
Both of them seem to work fine. I'm using webpack for creating final JS files. What is the recommended way to import components?
Both should work. The first one allows you to aggregate all your imports in a single expression.
Note that UI Fabric is deprecated and you should switch to Fluent UI React or Fluent UI React Northstar. So for example your import could look like this:
import { DatePicker, MessageBar } from '#fluentui/react';

Code Editor (ace editor)(text/JavaScript/sh/sh etc editors) in angular 8

How to Integrate editor code editor in angular8 application
https://www.npmjs.com/package/ng2-ace-editor
ng2-ace-editor module is you can use for angular8 also
Refer the link for full code angular6 version https://stackblitz.com/edit/ace-code-editor
For angular8 need to add below script in app.component.ts file
import 'brace/index';
import 'brace/theme/monokai';
import 'brace/mode/html';
import 'brace/mode/javascript';

What is the best approach to use Laravel localization with Vuejs

I love Laravel localization because it is sample and straightforward, but i dont know how to integrate it whit Vue Components. Any help appreciated.
You can use vue-i18n:
$ npm install vue-i18n
Add it to you Vue app:
import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
Just few tips for implementing Laravel resources json-files with Vue when using Vue 3 (as the implementation of vue-i18n is slightly different compared to Vue 2).
I used to use martinlindhe/laravel-vue-i18n-generator, but it has deprecated and hasn't been maintained for a while, so I upgraded my implementation by switching to https://github.com/rmariuzzo/Laravel-JS-Localization.
First I installed Laravel-JS-Localization just as shown at official documentation. This was straightforward. After this I generate JSON-file with:
php artisan lang:js --json resources\js\translations.json
... Please do note that I do not use default directory (/public) as output directory, because I want to bundle translations to Vue-application.
Next I modified my Vue-applications app.js entry point by adding following code before initializing application with createApp(...):
const translations = require('./translations.json');
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
locale: 'fi',
messages: {
fi: translations['fi.strings']
}
})
Remember to use i18n, so that you get translation-methods for templates
const app = createApp(...)
app.use(i18n);
In this example I'm loading Finnish translations, which originally reside at resources/lang/fi.json.
Now I'm able to call $t('Key to translation') within my component template, or this.$t(Key to translation') within logic.

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
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>

How to import the Login component provided by ra-ui-materialui of the new react-admin

I want to use the Login component provided by the ra-ui-materialui inside the next version of admin-on-rest.
I tried
import { Login } from 'ra-ui-materialui'
import { Login } from 'react-admin/ra-ui-materialui'
import { Login } from 'react-admin/ra-ui-materialui/auth'
import { Login } from 'react-admin/packages/ra-ui-materialui/src/auth'
import Login from 'react-admin/packages/ra-ui-materialui/src/auth'
They all resulted into an compile error:
Module not found: Can't resolve 'ra-ui-materialui' in '/my-app/src'
or
Module not found: Can't resolve 'react-admin/ra-ui-materialui' in '/my-app/src'
etc.
How can I import the provided Login component and use it in my react-admin app?
PS: For the time being, I've added the admin-on-rest tag too as this is the first question that concerns react-admin. For the purpose of this question and maybe many more to come, I created the tag react-admin.
I assumed that the local packages of react-admin would be available automatically just by the earlier installation of react-admin that I did. I was wrong. You need to yarn add that separately.
So, next to:
yarn add react-admin
You also need to:
yarn add ra-ui-materialui
And then this works:
import { Login } from 'ra-ui-materialui'

Resources