Nathan Walker NathanWalker

npm i -g nativescript

A) Starting a new Angular web project and adding {N} to it afterwards:

	/**
	* {N} 7 uses es2017 targeting
	* @NativeClass decorator transforms native class extensions to work with iOS/Android runtimes
	* When used in a single file by itself, the transformation modifies the esm export syntax
	* Without any other esm exports in the file, you will want to export the symbol at bottom explicitly
	* This will ensure a proper esm export of your extended native class symbol will work as expected.
	*/

	@NativeClass()
	class MyNativeClassExt extends NSObject {

	// pseudo code using angular flavor as example

	@Injectable({ providedIn: 'root' })
	export class SomeHttpInterceptor implements HttpInterceptor {
	_mobileOffline = new MobileOffline();

	constructor(private mobileStorage: MobileAPIStorageService) {}

	intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
	if (!this._mobileOffline.isOnline) {

	package io.nstudio.ui

	import android.animation.ValueAnimator
	import android.animation.ValueAnimator.AnimatorUpdateListener
	import android.annotation.TargetApi
	import android.content.Context
	import android.content.res.TypedArray
	import android.graphics.Color
	import android.graphics.RectF
	import android.graphics.Canvas

	import {
	platformNativeScript,
	runNativeScriptAngularApp,
	} from "@nativescript/angular";
	import { AppModule } from "./app/app.module";

	// runs the NativeScript application, nothing is bootstrapped yet, as we're only setting up the platform and callbacks
	runNativeScriptAngularApp({
	// this function will be called when we need to display the application UI
	// a major difference from the web is that this module may be destroyed when the user leaves the application and recreated when the user opens it again

	import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
	import { AppModule } from "./app/app.module";

	// locate the app-root and bootstrap the component in it's place
	platformBrowserDynamic()
	.bootstrapModule(AppModule)
	.catch((err) => console.error(err));

	@NgModule({
	imports: [NativeScriptModule],
	})
	export class BackgroundModule {
	ngDoBootstrap() {
	// do nothing, this is not an UI module
	}
	}

	const moduleRefPromise = platformNativeScript().bootstrapModule(AppModule);

	import { Component } from "@angular/core";
	import { NativeScriptCommonModule } from "@nativescript/angular";

	@Component({
	standalone: true,
	selector: "hello-standalone",
	imports: [NativeScriptCommonModule],
	template: `<Label text="Hello, I'm a standalone component"></Label>`,
	schemas: [NO_ERRORS_SCHEMA],
	})

	import { Directive, ElementRef, inject } from "@angular/core";

	@Directive({
	selector: "[appHighlight]",
	})
	export class HighlightDirective {
	private el = inject(ElementRef);

	constructor() {
	this.el.nativeElement.style.backgroundColor = "yellow";