How to use @nativescript/angular - 10 common examples

import { NgModule } from '@angular/core';

import { AppBarComponent, appBarMeta } from './app-bar';
import { AppBarDirective } from './appbar.directive';
// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from "nativescript-angular/forms";

import { registerElement } from '@nativescript/angular/element-registry';
registerElement('AppBar', () => require('../appbar').AppBar, appBarMeta);

@NgModule({
    imports: [],
    declarations: [AppBarComponent, AppBarDirective],
    exports: [AppBarComponent, AppBarDirective],
    providers: []
})
export class MaterialComponentsModule {}

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from '@nativescript/angular/platform';

import { AppModule } from './app/app.module';

// A traditional NativeScript application starts by initializing global objects,
// setting up global CSS rules, creating, and navigating to the main page.
// Angular applications need to take care of their own initialization:
// modules, components, directives, routes, DI providers.
// A NativeScript Angular app needs to make both paradigms work together,
// so we provide a wrapper platform object, platformNativeScriptDynamic,
// that sets up a NativeScript application and can bootstrap the Angular framework.
platformNativeScriptDynamic().bootstrapModule(AppModule);

import { NgModule } from '@angular/core';
import { TextValueAccessor } from './textvalue-accessor';

import { registerElement } from '@nativescript/angular/element-registry';

export const FORMS_DIRECTIVES = [TextValueAccessor];

@NgModule({
    declarations: FORMS_DIRECTIVES,
    exports: FORMS_DIRECTIVES
})
export class NativeScriptMaterialTextFieldModule {}

registerElement('MDTextField', () => require('../textfield').TextField);

import { NgModule } from "@angular/core";
import { isKnownView, registerElement } from "@nativescript/angular/element-registry";

const webviewElementName = "WebViewExt";

if (!isKnownView(webviewElementName)) {
    registerElement(webviewElementName, () => require("../webview-ext").WebViewExt);
}

@NgModule()
export class WebViewExtModule {}

import { Directive, NgModule } from '@angular/core';
import { registerElement } from '@nativescript/angular/element-registry';

@Directive({ selector: 'MDRipple' })
export class MaterialRippleDirective {}

@NgModule({
    declarations: [MaterialRippleDirective],
    exports: [MaterialRippleDirective]
})
export class NativeScriptMaterialRippleModule {}

registerElement('MDRipple', () => require('../ripple').Ripple);

import { NgModule } from '@angular/core';
import { registerElement } from '@nativescript/angular/element-registry';

import { Directive } from '@angular/core';

@Directive({ selector: 'MDButton' })
export class MaterialButtonDirective {}

@NgModule({
    declarations: [MaterialButtonDirective],
    exports: [MaterialButtonDirective]
})
export class NativeScriptMaterialButtonModule {}

registerElement('MDButton', () => require('../button').Button);

import { NgModule } from '@angular/core';
import { registerElement } from '@nativescript/angular/element-registry';

import { DIRECTIVES } from './nativescript-material-bottomnavigationbar.directives';

@NgModule({
    declarations: [DIRECTIVES],
    exports: [DIRECTIVES]
})
export class NativeScriptMaterialBottomNavigationBarModule {}

registerElement('BottomNavigationBar', () => require('../').BottomNavigationBar);
registerElement('BottomNavigationTab', () => require('../').BottomNavigationTab);

import { NgModule } from '@angular/core';
import { registerElement } from '@nativescript/angular/element-registry';

import { Directive } from '@angular/core';

@Directive({ selector: 'MDSlider' })
export class MaterialSliderDirective {}

@NgModule({
    declarations: [MaterialSliderDirective],
    exports: [MaterialSliderDirective]
})
export class NativeScriptMaterialSliderModule {}

registerElement('MDSlider', () => require('../slider').Slider);

import { NgModule } from '@angular/core';
import { registerElement } from '@nativescript/angular/element-registry';

import { Directive } from '@angular/core';

@Directive({ selector: 'MDProgress' })
export class MaterialProgressDirective {}

@NgModule({
    declarations: [MaterialProgressDirective],
    exports: [MaterialProgressDirective]
})
export class NativeScriptMaterialProgressModule {}

registerElement('MDProgress', () => require('../progress').Progress);

import { NgModule } from '@angular/core';
import { registerElement } from '@nativescript/angular/element-registry';

@NgModule()
export class NativeScriptMaterialFloatingButtonModule {}

registerElement('MDFloatingActionButton', () => require('../floatingactionbutton').FloatingActionButton);