├── .gitattributes ├── .gitignore ├── .vscode ├── launch.json └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTE.md ├── LICENSE ├── README.md ├── app ├── .npmignore ├── App_Resources │ ├── Android │ │ ├── app.gradle │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ └── res │ │ │ ├── drawable-hdpi │ │ │ ├── ic_arrow_back_black_24dp.png │ │ │ ├── icon.png │ │ │ ├── logo_white_bg.png │ │ │ └── nativescript.png │ │ │ ├── drawable-ldpi │ │ │ ├── ic_arrow_back_black_24dp.png │ │ │ ├── icon.png │ │ │ └── logo_white_bg.png │ │ │ ├── drawable-mdpi │ │ │ ├── ic_arrow_back_black_24dp.png │ │ │ ├── icon.png │ │ │ └── logo_white_bg.png │ │ │ ├── drawable-nodpi │ │ │ ├── splash_screen.xml │ │ │ └── splashscreen.9.png │ │ │ ├── drawable-xxhdpi │ │ │ ├── baseline_account_balance_black_18pt.png │ │ │ ├── baseline_account_balance_black_24pt.png │ │ │ ├── baseline_account_balance_black_36pt.png │ │ │ ├── baseline_account_balance_black_48pt.png │ │ │ ├── baseline_home_black_18pt.png │ │ │ ├── baseline_home_black_24pt.png │ │ │ ├── baseline_home_black_36pt.png │ │ │ ├── baseline_home_black_48pt.png │ │ │ ├── baseline_search_black_18pt.png │ │ │ ├── baseline_search_black_24pt.png │ │ │ ├── baseline_search_black_36pt.png │ │ │ ├── baseline_search_black_48pt.png │ │ │ ├── ic_arrow_back_black_24dp.png │ │ │ ├── icon.png │ │ │ └── logo_white_bg.png │ │ │ └── values │ │ │ ├── colors.xml │ │ │ └── styles.xml │ └── iOS │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── icon-29.png │ │ │ ├── icon-29@2x.png │ │ │ ├── icon-29@3x.png │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-40@3x.png │ │ │ ├── icon-50.png │ │ │ ├── icon-50@2x.png │ │ │ ├── icon-57.png │ │ │ ├── icon-57@2x.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-60@3x.png │ │ │ ├── icon-72.png │ │ │ ├── icon-72@2x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ └── icon-83.5@2x.png │ │ ├── Contents.json │ │ ├── LaunchImage.launchimage │ │ │ ├── Contents.json │ │ │ ├── Default-1125h.png │ │ │ ├── Default-568h@2x.png │ │ │ ├── Default-667h@2x.png │ │ │ ├── Default-736h@3x.png │ │ │ ├── Default-Landscape-X.png │ │ │ ├── Default-Landscape.png │ │ │ ├── Default-Landscape@2x.png │ │ │ ├── Default-Landscape@3x.png │ │ │ ├── Default-Portrait.png │ │ │ ├── Default-Portrait@2x.png │ │ │ ├── Default.png │ │ │ └── Default@2x.png │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ └── LaunchScreen-AspectFill@2x.png │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchScreen-Center.png │ │ │ └── LaunchScreen-Center@2x.png │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ ├── baseline_account_balance_black_18pt@1x.png │ │ ├── baseline_account_balance_black_18pt@2x.png │ │ ├── baseline_account_balance_black_18pt@3x.png │ │ ├── baseline_account_balance_black_24pt@1x.png │ │ ├── baseline_account_balance_black_24pt@2x.png │ │ ├── baseline_account_balance_black_24pt@3x.png │ │ ├── baseline_home_black_18pt@1x.png │ │ ├── baseline_home_black_18pt@2x.png │ │ ├── baseline_home_black_18pt@3x.png │ │ ├── baseline_home_black_24pt@1x.png │ │ ├── baseline_home_black_24pt@2x.png │ │ ├── baseline_home_black_24pt@3x.png │ │ ├── baseline_search_black_18pt@1x.png │ │ ├── baseline_search_black_18pt@2x.png │ │ ├── baseline_search_black_18pt@3x.png │ │ ├── baseline_search_black_24pt@1x.png │ │ ├── baseline_search_black_24pt@2x.png │ │ ├── baseline_search_black_24pt@3x.png │ │ ├── build.xcconfig │ │ ├── ic_arrow_back_black_24dp.png │ │ ├── icon.png │ │ ├── icon@2x.png │ │ ├── icon@3x.png │ │ └── logo_white_bg.png ├── app.component.ts ├── app.css ├── app.module.ts ├── app.routes.ts ├── css │ ├── core.dark.android.css │ ├── core.dark.ios.css │ ├── core.light.android.css │ └── core.light.ios.css ├── delegate │ ├── my-delegate.android.ts │ ├── my-delegate.d.ts │ └── my-delegate.ios.ts ├── directives │ ├── example.directive.ts │ ├── title-and-nav-button.module.ts │ └── toggle-nav-button.directive.ts ├── examples-list.component.html ├── examples-list.component.ts ├── examples-list.module.ts ├── fonts │ ├── Flaticon.ttf │ ├── IcoMoon-Free.ttf │ ├── Roboto-Medium.ttf │ ├── RobotoMono-Medium.ttf │ ├── RobotoSlab-Regular.ttf │ ├── fa-brands-400.ttf │ ├── fa-regular-400.ttf │ └── fa-solid-900.ttf ├── global-overview.md ├── images │ ├── logo.png │ └── m33.jpg ├── link.ts ├── main.ts ├── ng-framework-modules-category │ ├── application-settings │ │ ├── application-settings-examples.component.ts │ │ ├── application-settings-examples.module.ts │ │ ├── end.md │ │ ├── metadata.md │ │ ├── overview.md │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── application │ │ ├── app-checking-target │ │ │ ├── app-checking-target.component.html │ │ │ ├── app-checking-target.component.ts │ │ │ └── article.md │ │ ├── app-using-android-specifics │ │ │ ├── app-using-android-specifics.component.html │ │ │ ├── app-using-android-specifics.component.ts │ │ │ └── article.md │ │ ├── app-using-ios-specifics │ │ │ ├── app-using-ios-specifics.component.html │ │ │ ├── app-using-ios-specifics.component.ts │ │ │ └── article.md │ │ ├── application-events │ │ │ ├── application-events.component.html │ │ │ ├── application-events.component.ts │ │ │ └── article.md │ │ ├── application-examples.component.ts │ │ ├── application-examples.module.ts │ │ ├── end.md │ │ ├── metadata.md │ │ └── overview.md │ ├── color │ │ ├── color-examples.component.ts │ │ ├── color-examples.module.ts │ │ ├── end.md │ │ ├── metadata.md │ │ ├── overview.md │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── connectivity │ │ ├── connectivity-examples.component.ts │ │ ├── connectivity-examples.module.ts │ │ ├── end.md │ │ ├── metadata.md │ │ ├── overview.md │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── file-system │ │ ├── delete │ │ │ ├── delete.component.html │ │ │ └── delete.component.ts │ │ ├── end.md │ │ ├── file-system-examples.component.ts │ │ ├── file-system-examples.module.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── paths │ │ │ ├── paths.component.html │ │ │ └── paths.component.ts │ │ ├── read │ │ │ ├── read.component.html │ │ │ └── read.component.ts │ │ ├── update │ │ │ ├── update.component.html │ │ │ └── update.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── fps-meter │ │ ├── end.md │ │ ├── fps-meter-examples.component.ts │ │ ├── fps-meter-examples.module.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── http │ │ ├── end.md │ │ ├── http-delete │ │ │ ├── http-delete.component.html │ │ │ ├── http-delete.component.ts │ │ │ └── http-delete.service.ts │ │ ├── http-examples.component.ts │ │ ├── http-examples.module.ts │ │ ├── http-get │ │ │ ├── http-get.component.html │ │ │ ├── http-get.component.ts │ │ │ └── http-get.services.ts │ │ ├── http-post │ │ │ ├── http-post.component.html │ │ │ ├── http-post.component.ts │ │ │ └── http-post.services.ts │ │ ├── http-put │ │ │ ├── http-put.component.html │ │ │ ├── http-put.component.ts │ │ │ └── http-put.services.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ └── usage │ │ │ └── article.md │ ├── platform │ │ ├── end.md │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── platform-examples.component.ts │ │ ├── platform-examples.module.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── platform-module-example.html │ │ │ └── platform-module-example.ts │ ├── routing │ │ ├── end.md │ │ ├── metadata.md │ │ ├── nested-routers │ │ │ ├── article.md │ │ │ ├── nested-routers.component.html │ │ │ ├── nested-routers.component.ts │ │ │ ├── sub-route-one.component.html │ │ │ ├── sub-route-one.component.ts │ │ │ ├── sub-route-two.component.html │ │ │ └── sub-route-two.component.ts │ │ ├── overview.md │ │ ├── routing-examples.component.ts │ │ └── routing-examples.module.ts │ ├── timer │ │ ├── end.md │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── set-interval │ │ │ ├── article.md │ │ │ ├── setinterval-example.css │ │ │ ├── setinterval-example.html │ │ │ └── setinterval-example.ts │ │ ├── set-timeout │ │ │ ├── article.md │ │ │ ├── settimeout-example.css │ │ │ ├── settimeout-example.html │ │ │ └── settimeout-example.ts │ │ ├── timer-examples.component.ts │ │ └── timer-examples.module.ts │ └── trace │ │ ├── custom-trace-writer │ │ ├── article.md │ │ ├── custom-tracewriter-example.component.html │ │ ├── custom-tracewriter-example.component.ts │ │ └── style.css │ │ ├── end.md │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── style.css │ │ ├── trace-examples.component.ts │ │ ├── trace-examples.module.ts │ │ └── trace-specific-categories │ │ ├── article.md │ │ ├── style.css │ │ ├── trace-specific-categories-example.component.html │ │ └── trace-specific-categories-example.component.ts ├── ng-hardware-access-category │ ├── camera │ │ ├── camera-examples.component.ts │ │ ├── camera-examples.module.ts │ │ ├── end.md │ │ ├── overview.md │ │ └── using-camera │ │ │ ├── article.md │ │ │ ├── using-camera.component.html │ │ │ └── using-camera.component.ts │ └── location │ │ ├── basic-location-example │ │ ├── article.md │ │ ├── basic-location-example.html │ │ ├── basic-location-example.ts │ │ └── style.css │ │ ├── end.md │ │ ├── location-examples.component.ts │ │ ├── location-examples.module.ts │ │ ├── location-monitoring-example │ │ ├── article.md │ │ ├── location-monitoring-example.html │ │ └── location-monitoring-example.ts │ │ └── overview.md ├── ng-ui-category │ ├── icon-fonts │ │ ├── basics │ │ │ ├── article.md │ │ │ ├── basic.component.html │ │ │ ├── basic.component.ts │ │ │ └── basic.css │ │ ├── code-behind │ │ │ ├── article.md │ │ │ ├── codebehind.component.html │ │ │ ├── codebehind.component.ts │ │ │ └── codebehind.css │ │ ├── end.md │ │ ├── iconfonts-examples.component.ts │ │ ├── iconfonts-examples.module.ts │ │ ├── metadata.md │ │ └── overview.md │ └── modal-view-ng │ │ ├── end.md │ │ ├── metadata.md │ │ ├── modal-view-actionbar │ │ ├── article.md │ │ ├── main-view.component.html │ │ ├── main-view.component.ts │ │ ├── modal-root.component.html │ │ ├── modal-root.component.ts │ │ ├── modal-view.component.css │ │ ├── modal-view.component.html │ │ └── modal-view.component.ts │ │ ├── modal-view-examples.component.ts │ │ ├── modal-view-examples.module.ts │ │ ├── modal-view-navigation │ │ ├── article.md │ │ ├── home-modal-view-content.component.css │ │ ├── home-modal-view-content.component.html │ │ ├── home-modal-view-content.component.ts │ │ ├── home-modal-view.component.html │ │ ├── home-modal-view.component.ts │ │ ├── modal-view-navigation.component.html │ │ ├── modal-view-navigation.component.ts │ │ ├── second-modal-view-content.component.css │ │ ├── second-modal-view-content.component.html │ │ └── second-modal-view-content.component.ts │ │ ├── overview.md │ │ └── sample-modal-view-module-example │ │ ├── article.md │ │ ├── modal-view.html │ │ ├── modal-view.ts │ │ ├── sample-modal-view-module-example.html │ │ └── sample-modal-view-module-example.ts ├── ng-ui-widgets-category │ ├── action-bar │ │ ├── action-bar-examples.component.ts │ │ ├── action-bar-examples.module.ts │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── activity-indicator │ │ ├── activity-indicator-examples.component.ts │ │ ├── activity-indicator-examples.module.ts │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── animations │ │ ├── animating-properties │ │ │ ├── animating-properties.component.html │ │ │ ├── animating-properties.component.ts │ │ │ └── article.md │ │ ├── animations-examples.component.ts │ │ ├── animations-examples.module.ts │ │ ├── chaining-animations │ │ │ ├── article.md │ │ │ ├── chaining-animations.component.html │ │ │ └── chaining-animations.component.ts │ │ ├── end.md │ │ ├── metadata.md │ │ ├── multiple-views │ │ │ ├── article.md │ │ │ ├── multiple-views.component.html │ │ │ └── multiple-views.component.ts │ │ ├── overview.md │ │ ├── style.css │ │ └── width-height-properties │ │ │ ├── article.md │ │ │ ├── width-height-properties.component.css │ │ │ ├── width-height-properties.component.html │ │ │ └── width-height-properties.component.ts │ ├── bottom-navigation │ │ ├── bottom-navigation-examples.component.ts │ │ ├── bottom-navigation-examples.module.ts │ │ ├── end.md │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.css │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.css │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── button │ │ ├── button-examples.component.ts │ │ ├── button-examples.module.ts │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.css │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── date-picker │ │ ├── date-picker-examples.component.ts │ │ ├── date-picker-examples.module.ts │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.css │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── dialogs │ │ ├── action-dialog │ │ │ ├── action-dialog.component.html │ │ │ ├── action-dialog.component.ts │ │ │ ├── article.md │ │ │ └── image.png │ │ ├── alert-dialog │ │ │ ├── alert-dialog.component.html │ │ │ ├── alert-dialog.component.ts │ │ │ ├── article.md │ │ │ └── image.png │ │ ├── confirm-dialog │ │ │ ├── article.md │ │ │ ├── confirm-dialog.component.html │ │ │ ├── confirm-dialog.component.ts │ │ │ └── image.png │ │ ├── dialogs-examples.component.ts │ │ ├── dialogs-examples.module.ts │ │ ├── end.md │ │ ├── login-dialog │ │ │ ├── article.md │ │ │ ├── image.png │ │ │ ├── login-dialog.component.html │ │ │ └── login-dialog.component.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ └── prompt-dialog │ │ │ ├── article.md │ │ │ ├── image.png │ │ │ ├── prompt-dialog.component.html │ │ │ └── prompt-dialog.component.ts │ ├── formatted-string │ │ ├── end.md │ │ ├── formated-string-examples.component.ts │ │ ├── formated-string-examples.module.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.css │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── gestures │ │ ├── double-tap │ │ │ ├── article.md │ │ │ ├── double-tap.component.html │ │ │ └── double-tap.component.ts │ │ ├── end.md │ │ ├── gestures-examples.component.ts │ │ ├── gestures-examples.module.ts │ │ ├── long-press │ │ │ ├── article.md │ │ │ ├── long-press.component.html │ │ │ └── long-press.component.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── pan │ │ │ ├── article.md │ │ │ ├── pan.component.html │ │ │ └── pan.component.ts │ │ ├── pinch │ │ │ ├── article.md │ │ │ ├── pinch.component.html │ │ │ └── pinch.component.ts │ │ ├── rotation │ │ │ ├── article.md │ │ │ ├── rotation.component.html │ │ │ └── rotation.component.ts │ │ ├── swipe │ │ │ ├── article.md │ │ │ ├── swipe.component.html │ │ │ └── swipe.component.ts │ │ ├── tap │ │ │ ├── article.md │ │ │ ├── tap.component.html │ │ │ └── tap.component.ts │ │ └── touch │ │ │ ├── article.md │ │ │ ├── touch.component.html │ │ │ └── touch.component.ts │ ├── htmlview │ │ ├── end.md │ │ ├── htmlview-examples.component.ts │ │ ├── htmlview-examples.module.ts │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── image │ │ ├── Image.png │ │ ├── end.md │ │ ├── image-examples.component.ts │ │ ├── image-examples.module.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.css │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.css │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── label │ │ ├── end.md │ │ ├── image.png │ │ ├── label-examples.component.ts │ │ ├── label-examples.module.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── layouts │ │ ├── absolute-layout │ │ │ ├── absolute-layout.component.html │ │ │ ├── absolute-layout.component.ts │ │ │ ├── article.md │ │ │ └── image.png │ │ ├── dock-layout │ │ │ ├── article.md │ │ │ ├── dock-layout.component.html │ │ │ ├── dock-layout.component.ts │ │ │ └── image.png │ │ ├── end.md │ │ ├── flexbox-layout-one │ │ │ ├── article.md │ │ │ ├── flexbox-layout.component.html │ │ │ └── flexbox-layout.component.ts │ │ ├── flexbox-layout-three │ │ │ ├── article.md │ │ │ ├── flexbox-layout.component.html │ │ │ └── flexbox-layout.component.ts │ │ ├── flexbox-layout-two │ │ │ ├── article.md │ │ │ ├── flexbox-layout.component.html │ │ │ └── flexbox-layout.component.ts │ │ ├── grid-layout │ │ │ ├── article.md │ │ │ ├── grid-layout.component.html │ │ │ ├── grid-layout.component.ts │ │ │ └── image.png │ │ ├── layouts-examples.component.ts │ │ ├── layouts-examples.module.ts │ │ ├── layouts.style.css │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── stack-layout │ │ │ ├── article.md │ │ │ ├── image.png │ │ │ ├── stack-layout.component.html │ │ │ └── stack-layout.component.ts │ │ └── wrap-layout │ │ │ ├── article.md │ │ │ ├── image.png │ │ │ ├── wrap-layout.component.html │ │ │ └── wrap-layout.component.ts │ ├── listpicker │ │ ├── end.md │ │ ├── image.png │ │ ├── listpicker-examples.component.ts │ │ ├── listpicker-examples.module.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.css │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── listview │ │ ├── end.md │ │ ├── image.png │ │ ├── listview-examples.component.ts │ │ ├── listview-examples.module.ts │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.css │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ ├── tips-and-tricks │ │ │ ├── article.md │ │ │ ├── tips-and-tricks.component.html │ │ │ └── tips-and-tricks.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ ├── usage.component.ts │ │ │ └── usage.service.ts │ ├── ng-directives │ │ ├── create-custom-directive │ │ │ ├── article.md │ │ │ ├── create-custom-directive.component.html │ │ │ └── create-custom-directive.component.ts │ │ ├── custom-unless-directive │ │ │ ├── article.md │ │ │ ├── directive-unless.ts │ │ │ ├── unless-directive.component.html │ │ │ └── unless-directive.component.ts │ │ ├── end.md │ │ ├── metadata.md │ │ ├── ng-directives-examples.component.ts │ │ ├── ng-directives-examples.module.ts │ │ ├── ngfor-directive │ │ │ ├── article.md │ │ │ ├── fruits.ts │ │ │ ├── ngfor-directive.component.html │ │ │ └── ngfor-directive.component.ts │ │ ├── ngif-directive-advanced │ │ │ ├── article.md │ │ │ ├── ngif-directive-advanced.component.html │ │ │ └── ngif-directive-advanced.component.ts │ │ ├── ngif-directive │ │ │ ├── article.md │ │ │ ├── ngif-directive.component.html │ │ │ └── ngif-directive.component.ts │ │ ├── ngswitch-directive │ │ │ ├── article.md │ │ │ ├── ngswitch-directive.component.html │ │ │ └── ngswitch-directive.component.ts │ │ └── overview.md │ ├── progress │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── progress-examples.component.ts │ │ ├── progress-examples.module.ts │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.css │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ ├── tips-and-tricks │ │ │ ├── article.md │ │ │ ├── tips-and-tricks.component.html │ │ │ └── tips-and-tricks.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── scroll-view │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── scroll-view-examples.component.ts │ │ ├── scroll-view-examples.module.ts │ │ ├── tips-and-tricks │ │ │ ├── article.md │ │ │ ├── style.css │ │ │ ├── tips-and-tricks.component.html │ │ │ └── tips-and-tricks.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── search-bar │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── search-bar-examples.component.ts │ │ ├── search-bar-examples.module.ts │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── segmented-bar │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── segmented-bar-examples.component.ts │ │ ├── segmented-bar-examples.module.ts │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.css │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── slider │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── slider-examples.component.ts │ │ ├── slider-examples.module.ts │ │ ├── style.css │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── style │ │ ├── apply-style-via-code │ │ │ ├── apply-style-code.component.css │ │ │ ├── apply-style-code.component.html │ │ │ ├── apply-style-code.component.ts │ │ │ ├── article.md │ │ │ └── test.html │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── style-css-file │ │ │ ├── article.md │ │ │ ├── style-css-file.component.html │ │ │ ├── style-css-file.component.ts │ │ │ └── style.css │ │ ├── style-examples.component.ts │ │ └── style-examples.module.ts │ ├── switch │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling-switch.component.html │ │ │ └── styling-switch.component.ts │ │ ├── switch-examples.component.ts │ │ ├── switch-examples.module.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── tab-view │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ ├── tab-view-examples.component.ts │ │ ├── tab-view-examples.module.ts │ │ ├── tips-and-tricks │ │ │ ├── article.md │ │ │ ├── tips-and-tricks.component.html │ │ │ └── tips-and-tricks.component.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── tabs │ │ ├── end.md │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.css │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ ├── tabs-examples.component.ts │ │ ├── tabs-examples.module.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── text-field │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── styling │ │ │ ├── article.md │ │ │ ├── styling.component.html │ │ │ └── styling.component.ts │ │ ├── text-field-examples.component.ts │ │ ├── text-field-examples.module.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── text-view │ │ ├── end.md │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── text-view-examples.component.ts │ │ ├── text-view-examples.module.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ ├── time-picker │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── time-picker-examples.component.ts │ │ ├── time-picker-examples.module.ts │ │ └── usage │ │ │ ├── article.md │ │ │ ├── usage.component.html │ │ │ └── usage.component.ts │ └── web-view │ │ ├── end.md │ │ ├── image.png │ │ ├── metadata.md │ │ ├── overview.md │ │ ├── tips-and-tricks │ │ ├── article.md │ │ ├── tips-and-tricks.component.html │ │ └── tips-and-tricks.component.ts │ │ ├── usage │ │ ├── article.md │ │ ├── usage.component.html │ │ └── usage.component.ts │ │ ├── web-view-examples.component.ts │ │ └── web-view-examples.module.ts ├── platform.android.css ├── platform.ios.css └── shared │ └── deep-link-data.ts ├── build-docs.sh ├── nativescript.config.ts ├── package.json ├── references.d.ts ├── scripts ├── archive.js └── build.js ├── tsconfig.json ├── tslint.json └── webpack.config.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Use LF for shell scripts 2 | *.sh eol=lf 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | platforms 2 | hooks 3 | node_modules 4 | lib 5 | debugger 6 | dist 7 | report 8 | 9 | webpack.config.js 10 | 11 | app/**/*.map 12 | app/**/*.js 13 | 14 | .DS_Store 15 | **/*.log 16 | tags 17 | 18 | tsconfig.tns.json 19 | package-lock.json 20 | verify* -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.check.workspaceVersion": false 3 | } -------------------------------------------------------------------------------- /app/.npmignore: -------------------------------------------------------------------------------- 1 | LICENSE.md 2 | *.tgz 3 | -------------------------------------------------------------------------------- /app/App_Resources/Android/app.gradle: -------------------------------------------------------------------------------- 1 | // Add your native dependencies here: 2 | 3 | // Uncomment to add recyclerview:1.1.0-alpha06 dependency 4 | // dependencies { 5 | // compile 'androidx.recyclerview:recyclerview:1.1.0-alpha06' 6 | // } 7 | 8 | android { 9 | defaultConfig { 10 | generatedDensities = [] 11 | applicationId = "org.nativescript.nativescriptsdkexamplesng" 12 | } 13 | aaptOptions { 14 | additionalParameters "--no-version-vectors" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-hdpi/ic_arrow_back_black_24dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-hdpi/ic_arrow_back_black_24dp.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-hdpi/logo_white_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-hdpi/logo_white_bg.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-hdpi/nativescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-hdpi/nativescript.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-ldpi/ic_arrow_back_black_24dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-ldpi/ic_arrow_back_black_24dp.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-ldpi/logo_white_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-ldpi/logo_white_bg.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-mdpi/ic_arrow_back_black_24dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-mdpi/ic_arrow_back_black_24dp.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-mdpi/logo_white_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-mdpi/logo_white_bg.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-nodpi/splashscreen.9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-nodpi/splashscreen.9.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_18pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_18pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_24pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_24pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_36pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_36pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_48pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_48pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_18pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_18pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_24pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_24pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_36pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_36pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_48pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_48pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_18pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_18pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_24pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_24pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_36pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_36pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_48pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_48pt.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/ic_arrow_back_black_24dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/ic_arrow_back_black_24dp.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo_white_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo_white_bg.png -------------------------------------------------------------------------------- /app/App_Resources/Android/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #F5F5F5 4 | #757575 5 | #E5E5E8 6 | #33B5E5 7 | #3D5AFE 8 | -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-1125h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-1125h.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-568h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-568h@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-667h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-667h@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-736h@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-736h@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape-X.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape-X.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-AspectFill.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-AspectFill@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x" 16 | } 17 | ], 18 | "info" : { 19 | "version" : 1, 20 | "author" : "xcode" 21 | } 22 | } -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-Center.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-Center@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x" 16 | } 17 | ], 18 | "info" : { 19 | "version" : 1, 20 | "author" : "xcode" 21 | } 22 | } -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_account_balance_black_18pt@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_account_balance_black_18pt@1x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_account_balance_black_18pt@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_account_balance_black_18pt@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_account_balance_black_18pt@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_account_balance_black_18pt@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_account_balance_black_24pt@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_account_balance_black_24pt@1x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_account_balance_black_24pt@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_account_balance_black_24pt@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_account_balance_black_24pt@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_account_balance_black_24pt@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_home_black_18pt@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_home_black_18pt@1x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_home_black_18pt@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_home_black_18pt@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_home_black_18pt@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_home_black_18pt@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_home_black_24pt@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_home_black_24pt@1x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_home_black_24pt@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_home_black_24pt@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_home_black_24pt@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_home_black_24pt@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_search_black_18pt@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_search_black_18pt@1x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_search_black_18pt@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_search_black_18pt@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_search_black_18pt@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_search_black_18pt@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_search_black_24pt@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_search_black_24pt@1x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_search_black_24pt@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_search_black_24pt@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/baseline_search_black_24pt@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/baseline_search_black_24pt@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/build.xcconfig: -------------------------------------------------------------------------------- 1 | // You can add custom settings here 2 | // for example you can uncomment the following line to force distribution code signing 3 | // CODE_SIGN_IDENTITY = iPhone Distribution 4 | // To build for device with XCode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html 5 | // DEVELOPMENT_TEAM = YOUR_TEAM_ID; 6 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 7 | ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage; 8 | -------------------------------------------------------------------------------- /app/App_Resources/iOS/ic_arrow_back_black_24dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/ic_arrow_back_black_24dp.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/icon.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/icon@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/icon@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/icon@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/logo_white_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/App_Resources/iOS/logo_white_bg.png -------------------------------------------------------------------------------- /app/app.css: -------------------------------------------------------------------------------- 1 |  2 | @import '~@nativescript/theme/css/core.css'; 3 | @import '~@nativescript/theme/css/forest.css'; 4 | 5 | .far { 6 | font-family: "Font Awesome 5 Free", "fa-regular-400"; 7 | font-weight: 400; 8 | } 9 | 10 | .fab { 11 | font-family: "Font Awesome 5 Brands", "fa-brands-400"; 12 | font-weight: 400; 13 | } 14 | 15 | .fas { 16 | font-family: "Font Awesome 5 Free", "fa-solid-900"; 17 | font-weight: 900; 18 | } 19 | -------------------------------------------------------------------------------- /app/delegate/my-delegate.android.ts: -------------------------------------------------------------------------------- 1 | export class MyDelegate {} 2 | -------------------------------------------------------------------------------- /app/delegate/my-delegate.d.ts: -------------------------------------------------------------------------------- 1 | export class MyDelegate {} 2 | -------------------------------------------------------------------------------- /app/delegate/my-delegate.ios.ts: -------------------------------------------------------------------------------- 1 | import { DeepLinkData } from "../shared/deep-link-data"; 2 | 3 | @NativeClass 4 | class MyDelegate extends UIResponder implements UIApplicationDelegate { 5 | // tslint:disable-next-line 6 | public static ObjCProtocols = [UIApplicationDelegate]; 7 | 8 | applicationHandleOpenURL(application: UIApplication, url: NSURL): boolean { 9 | const dld = new DeepLinkData(url); 10 | return true; 11 | } 12 | } 13 | 14 | export {MyDelegate}; 15 | 16 | -------------------------------------------------------------------------------- /app/directives/example.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from "@angular/core"; 2 | import { ActivatedRoute } from "@angular/router"; 3 | import { Page } from "@nativescript/core"; 4 | 5 | @Directive({ 6 | selector: "[sdkExampleTitle]" 7 | }) 8 | 9 | export class ExampleTitleDirective { 10 | constructor(route: ActivatedRoute, page: Page) { 11 | page.actionBar.title = route.snapshot.data["title"]; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /app/directives/title-and-nav-button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; 2 | import { ExampleTitleDirective } from "./example.directive"; 3 | import { ToggleNavButtonDirective } from "./toggle-nav-button.directive"; 4 | 5 | @NgModule({ 6 | schemas: [NO_ERRORS_SCHEMA], 7 | declarations: [ExampleTitleDirective, ToggleNavButtonDirective], 8 | exports: [ExampleTitleDirective, ToggleNavButtonDirective] 9 | }) 10 | export class TitleAndNavButtonModule { } 11 | -------------------------------------------------------------------------------- /app/examples-list.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/fonts/Flaticon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/fonts/Flaticon.ttf -------------------------------------------------------------------------------- /app/fonts/IcoMoon-Free.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/fonts/IcoMoon-Free.ttf -------------------------------------------------------------------------------- /app/fonts/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/fonts/Roboto-Medium.ttf -------------------------------------------------------------------------------- /app/fonts/RobotoMono-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/fonts/RobotoMono-Medium.ttf -------------------------------------------------------------------------------- /app/fonts/RobotoSlab-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/fonts/RobotoSlab-Regular.ttf -------------------------------------------------------------------------------- /app/fonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/fonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /app/fonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/fonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /app/fonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/fonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /app/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/images/logo.png -------------------------------------------------------------------------------- /app/images/m33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/images/m33.jpg -------------------------------------------------------------------------------- /app/link.ts: -------------------------------------------------------------------------------- 1 | export class Link { 2 | constructor(public title: string, public link: string) { } 3 | } 4 | -------------------------------------------------------------------------------- /app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformNativeScriptDynamic } from "@nativescript/angular"; 2 | import { AppModule } from "./app.module"; 3 | import { Application } from "@nativescript/core"; 4 | import { isIOS } from "@nativescript/core"; 5 | import { MyDelegate } from "./delegate/my-delegate"; 6 | 7 | if (isIOS) { 8 | Application.ios.delegate = MyDelegate; 9 | } 10 | platformNativeScriptDynamic().bootstrapModule(AppModule); 11 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application-settings/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ApplicationSettings 3 | description: ApplicationSettings Module provides functionality for saving a different type of information (text, number, boolean values) via key-value pairs. The data is collected in SharedPreferences on Android and NSUserDefaults on iOS. 4 | position: 2 5 | slug: application-settings-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application-settings/overview.md: -------------------------------------------------------------------------------- 1 | The `application-settings` module allows you to save and restore information related to your application. -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application-settings/usage/article.md: -------------------------------------------------------------------------------- 1 | Basic usage of the `application-settings` module in a component: 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application-settings/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application/app-checking-target/article.md: -------------------------------------------------------------------------------- 1 | Basic usage of the `application` module in a component to apply different code on Android and iOS 2 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application/app-using-ios-specifics/app-using-ios-specifics.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application/app-using-ios-specifics/article.md: -------------------------------------------------------------------------------- 1 | ### Application Module iOS Specific Properties 2 | 3 | The application module provides a number of iOS specific properties to access the iOS app, delegate and root view controller, etc.. 4 | 5 | 6 | ### Adding a Notification Observer (iOS) 7 | 8 | 9 | ### Removing a notification observer 10 | 11 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application/application-events/application-events.component.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application/end.md: -------------------------------------------------------------------------------- 1 | 2 | **API Reference for** [Application Class](https://docs.nativescript.org/api-reference/modules/_application_.html) -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Application 3 | description: Application Module provides abstraction over the platform-specific funcitonality. This module allows handling application events and creating platform-specific logic. 4 | position: 1 5 | slug: application-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/application/overview.md: -------------------------------------------------------------------------------- 1 | The Application module provides abstraction over the platform-specific Application implementations. 2 | It is the main BCL module and is required for other BCL modules to work properly. 3 | The default bootstrap.js implementation for each platform loads and initializes this module. -------------------------------------------------------------------------------- /app/ng-framework-modules-category/color/color-examples.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from "@angular/core"; 2 | import { Link } from "./../../link"; 3 | 4 | let menuLinks = [ 5 | new Link("Usage", "/color/usage"), 6 | ]; 7 | 8 | @Component({ 9 | moduleId: module.id, 10 | templateUrl: "./../../examples-list.component.html", 11 | changeDetection: ChangeDetectionStrategy.OnPush 12 | }) 13 | 14 | export class ColorExamplesComponent { 15 | public links: Array; 16 | 17 | constructor() { 18 | this.links = []; 19 | 20 | for (let i = 0; i < menuLinks.length; i++) { 21 | this.links.push(menuLinks[i]); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/color/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Color 3 | description: Color module provides a common abstraction of Android android.graphics.Color and iOS UIColor. The module stores the color components(alpha (opacity), red, green, blue) in a [0-255] range. 4 | position: 3 5 | slug: color-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/color/overview.md: -------------------------------------------------------------------------------- 1 | Represents a color object. Stores all color components (alpha (opacity), red, green, blue) in a [0..255] range. 2 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/color/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/color/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/connectivity/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Connectivity 3 | description: Connectivity module provides a common abstraction of the functionality responsible for receiving information about the connection type and availability of the network. 4 | position: 4 5 | slug: connectivity-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/connectivity/overview.md: -------------------------------------------------------------------------------- 1 | The connectivity module provides a common abstraction of the functionality responsible for receiving information about the connection type and availability of the network. -------------------------------------------------------------------------------- /app/ng-framework-modules-category/connectivity/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/connectivity/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/file-system/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: FileSystem 3 | description: FileSystem module provides a common abstraction of the functionality responsible for accessing and modifing files and Folders in a NativeScript Angular application. This module provides methods allowing creating, updating, deleting and finding a path for specific FIles and Folders. 4 | position: 8 5 | slug: file-system-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/file-system/overview.md: -------------------------------------------------------------------------------- 1 | The File System module provides high-level abstractions for file system entities 2 | such as files, folders, known folders, paths, separators, etc. 3 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/fps-meter/fps-meter-examples.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from "@angular/core"; 2 | import { Link } from "./../../link"; 3 | 4 | let menuLinks = [ 5 | new Link("Usage", "/fps-meter/usage") 6 | ]; 7 | 8 | @Component({ 9 | moduleId: module.id, 10 | templateUrl: "./../../examples-list.component.html", 11 | changeDetection: ChangeDetectionStrategy.OnPush 12 | }) 13 | export class FpsExamplesComponent { 14 | public links: Array; 15 | 16 | constructor() { 17 | this.links = []; 18 | 19 | for (let i = 0; i < menuLinks.length; i++) { 20 | this.links.push(menuLinks[i]); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/fps-meter/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: FPS Meter 3 | description: The FPS meter module provides functionality, which allows receiving info about the frames-per-second statistics for the app. 4 | position: 9 5 | slug: fps-meter-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/fps-meter/overview.md: -------------------------------------------------------------------------------- 1 | Logging frames-per-second statistics for your app requires the `fps-meter` module. 2 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/fps-meter/usage/article.md: -------------------------------------------------------------------------------- 1 | Import FPS Meter Module 2 | 3 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/fps-meter/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/http/end.md: -------------------------------------------------------------------------------- 1 | ## Methods 2 | 3 | Refer to [the Angular's official documentation](https://angular.io/guide/http) for more details on `HttpClient` module. 4 | 5 | ## API References 6 | 7 | | Name | Type | 8 | |----------|---------| 9 | | [HttpClient](https://angular.io/guide/http) | `Module` | 10 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/http/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTTP 3 | description: The HTTP client allows submitting GET, POST, PUT, DELETE requests on both iOS and Android. 4 | position: 9 5 | slug: http-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/http/overview.md: -------------------------------------------------------------------------------- 1 | In order to use the Angular's `HttpClient` module the first thing to do is to import our NativeScript wrapper in the respective module file. 2 | 3 | ```TypeScript 4 | import { NativeScriptHttpClientModule } from "@nativescript/angular"; 5 | 6 | @NgModule({ 7 | imports: [ 8 | NativeScriptHttpClientModule 9 | ] 10 | ``` 11 | 12 | > **Note:** The `HttpClient` is Angular module that comes from `@angular/common/http`. However, you will need to import the NativeScript wrapper (`NativeScriptHttpClientModule`) to be able to work with the `HttpClient` module. 13 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/platform/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Platform 3 | description: The Platform module allows accessing specific information for the device like - Device model, Device type, OS, OS version, Device sdkVersion, Device language, Device manufacturer, Device uuid. Also with its help, we can get specific information about the device screen scale, screen width and height. 4 | position: 11 5 | slug: platform-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/platform/overview.md: -------------------------------------------------------------------------------- 1 | Information and details about the current device, and screen resolution & density are accessible via the `platform` module. 2 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/platform/platform-examples.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from "@angular/core"; 2 | import { Link } from "./../../link"; 3 | 4 | let menuLinks = [ 5 | new Link("Usage", "/platform/usage") 6 | ]; 7 | 8 | @Component({ 9 | moduleId: module.id, 10 | templateUrl: "./../../examples-list.component.html", 11 | changeDetection: ChangeDetectionStrategy.OnPush 12 | }) 13 | export class PlatformExamplesComponent { 14 | public links: Array; 15 | 16 | constructor() { 17 | this.links = []; 18 | 19 | for (let i = 0; i < menuLinks.length; i++) { 20 | this.links.push(menuLinks[i]); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/platform/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/platform/usage/platform-module-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/routing/end.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-framework-modules-category/routing/end.md -------------------------------------------------------------------------------- /app/ng-framework-modules-category/routing/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Routing 3 | description: The example in this part of the documentation demonstrates the main concept of using an Angular router in a NativeScript Angular application. The example shows how to navigate between the component. 4 | position: 15 5 | slug: routing-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/routing/nested-routers/nested-routers.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/routing/nested-routers/nested-routers.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./nested-routers.component.html" 6 | }) 7 | export class NestedRoutersComponent { } 8 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/routing/nested-routers/sub-route-one.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/routing/nested-routers/sub-route-one.component.ts: -------------------------------------------------------------------------------- 1 | // >> 2 | import { Component } from "@angular/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./sub-route-one.component.html" 7 | }) 8 | export class SubRouteOneComponent { } 9 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/routing/nested-routers/sub-route-two.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/routing/nested-routers/sub-route-two.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./sub-route-two.component.html" 6 | }) 7 | export class SubRouteTwoComponent { } 8 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/routing/overview.md: -------------------------------------------------------------------------------- 1 | Angular routing techniques -------------------------------------------------------------------------------- /app/ng-framework-modules-category/timer/end.md: -------------------------------------------------------------------------------- 1 | 2 | **API Reference for the** [Timer Class](https://docs.nativescript.org/api-reference/modules/_timer_.html) -------------------------------------------------------------------------------- /app/ng-framework-modules-category/timer/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Timer 3 | description: Timer module provides an implementation of two primary methods setTimeout, setInterval. They allow executing code fragments at a specific time interval. 4 | position: 12 5 | slug: timer-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/timer/overview.md: -------------------------------------------------------------------------------- 1 | Timer Module 2 | 3 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/timer/set-interval/article.md: -------------------------------------------------------------------------------- 1 | Timer method `setInterval` can be used to apply recurring action on given interval in miliseconds 2 | 3 | TypeScript 4 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/timer/set-interval/setinterval-example.css: -------------------------------------------------------------------------------- 1 | .stacklayoutStyle{ 2 | width: 100; 3 | height: 100; 4 | margin: 15; 5 | vertical-align:center; 6 | text-align: center; 7 | } 8 | .secondStacklayoutStyle label{ 9 | font-size: 24; 10 | border-color: lightgray; 11 | border-width: 1; 12 | border-radius: 2; 13 | } 14 | .layoutStyle{ 15 | text-align: center; 16 | } 17 | .layoutStyle gridlayout{ 18 | horizontal-align:center; 19 | } -------------------------------------------------------------------------------- /app/ng-framework-modules-category/timer/set-interval/setinterval-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/timer/set-timeout/article.md: -------------------------------------------------------------------------------- 1 | Timer method `setTimeout` can be used to delay the execution of an action in miliseconds. 2 | 3 | TypeScript 4 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/timer/set-timeout/settimeout-example.css: -------------------------------------------------------------------------------- 1 | /*.stacklayoutStyle{ 2 | width: 100; 3 | height: 100; 4 | margin: 15; 5 | vertical-align:center; 6 | text-align: center; 7 | } 8 | 9 | 10 | .secondStacklayoutStyle label{ 11 | font-size: 24; 12 | border-color: lightgray; 13 | border-width: 1; 14 | border-radius: 2; 15 | }*/ 16 | .layout{ 17 | text-align: center; 18 | } 19 | /*.layoutStyle gridlayout{ 20 | horizontal-align:center; 21 | } 22 | GridLayout{ 23 | width:100%; 24 | }*/ 25 | 26 | Button{ 27 | 28 | color:white; 29 | } 30 | TextField{ 31 | font-size: 24px; 32 | } -------------------------------------------------------------------------------- /app/ng-framework-modules-category/timer/set-timeout/settimeout-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/trace/custom-trace-writer/article.md: -------------------------------------------------------------------------------- 1 | Import Trace Module and Utils Types 2 | 3 | 4 | Create custom writer 5 | 6 | 7 | Adding custom trace writer 8 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/trace/custom-trace-writer/style.css: -------------------------------------------------------------------------------- 1 | .border-gridLayout { 2 | border-color: lightgray; 3 | border-width: 0.5; 4 | } -------------------------------------------------------------------------------- /app/ng-framework-modules-category/trace/end.md: -------------------------------------------------------------------------------- 1 | 2 | **API Reference for the** [Trace Class](https://docs.nativescript.org/api-reference/modules/_trace_.html) -------------------------------------------------------------------------------- /app/ng-framework-modules-category/trace/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Trace module 3 | description: Trace module provides functionality for accessing diagnostic information about the application at runtime. This module can be used for debugging, and for obtaining detailed info about internal workings. 4 | position: 14 5 | slug: trace-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/trace/overview.md: -------------------------------------------------------------------------------- 1 | Tracing is the process of logging diagnostic information about your application at runtime. This module is useful for debugging, which could provide detailed info about internal workings. 2 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/trace/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-framework-modules-category/trace/style.css -------------------------------------------------------------------------------- /app/ng-framework-modules-category/trace/trace-specific-categories/article.md: -------------------------------------------------------------------------------- 1 | Import Trace Module 2 | 3 | 4 | 5 | Tracing specific categories of events 6 | 7 | 8 | 9 | Trace add category 10 | 11 | 12 | 13 | Check is category setting 14 | 15 | 16 | 17 | Disable tracing 18 | 19 | -------------------------------------------------------------------------------- /app/ng-framework-modules-category/trace/trace-specific-categories/style.css: -------------------------------------------------------------------------------- 1 | /*.border-gridLayout { 2 | border-color: lightgray; 3 | border-width: 0.5; 4 | border-radius: 2; 5 | }*/ -------------------------------------------------------------------------------- /app/ng-hardware-access-category/camera/end.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-hardware-access-category/camera/end.md -------------------------------------------------------------------------------- /app/ng-hardware-access-category/camera/overview.md: -------------------------------------------------------------------------------- 1 | NativeScript plugin to empower using device camera. 2 | 3 | ## Install the camera plugin as dependency 4 | 5 | `npm i nativescript-camera --save` 6 | 7 | > Note: On Android 6.0 and above it is neccessary to request permissions for camera (to be able to take picture) and access for Photos (to be able to share the image via Google Photos app). 8 | NativeScript-camera plug-in has a dedicated method called `requestPermissions()` which can be used in that case. -------------------------------------------------------------------------------- /app/ng-hardware-access-category/camera/using-camera/article.md: -------------------------------------------------------------------------------- 1 | Initializing camera 2 | 3 | 4 | Taking photo with provided options width, height, keepAspectRatio and saveToGallery 5 | 6 | 7 | Requesting permissions 8 | 9 | 10 | Checking if camera hardware is available 11 | 12 | -------------------------------------------------------------------------------- /app/ng-hardware-access-category/camera/using-camera/using-camera.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-hardware-access-category/location/basic-location-example/article.md: -------------------------------------------------------------------------------- 1 | Import `@nativescript/geolocation` plugin 2 | 3 | 4 | Enable location services 5 | 6 | 7 | Check - is location enabled 8 | 9 | 10 | Get distance between two locations 11 | 12 | 13 | Get current location 14 | 15 | -------------------------------------------------------------------------------- /app/ng-hardware-access-category/location/basic-location-example/style.css: -------------------------------------------------------------------------------- 1 | Label, TextField{ 2 | font-size: 16; 3 | } -------------------------------------------------------------------------------- /app/ng-hardware-access-category/location/end.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-hardware-access-category/location/end.md -------------------------------------------------------------------------------- /app/ng-hardware-access-category/location/location-monitoring-example/article.md: -------------------------------------------------------------------------------- 1 | Import `@nativescript/geolocation` plugin 2 | 3 | 4 | Receive continuous location updates 5 | 6 | -------------------------------------------------------------------------------- /app/ng-hardware-access-category/location/overview.md: -------------------------------------------------------------------------------- 1 | `@nativescript/geolocation` plugin provides API for getting and monitoring location for NativeScript app. 2 | -------------------------------------------------------------------------------- /app/ng-ui-category/icon-fonts/basics/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./basic.component.html", 6 | styleUrls: ["./basic.css"], 7 | }) 8 | 9 | export class BasicIconFontsExampleComponent { } 10 | -------------------------------------------------------------------------------- /app/ng-ui-category/icon-fonts/basics/basic.css: -------------------------------------------------------------------------------- 1 | /* >> icon-font-css-class-def */ 2 | .far { 3 | font-family: "Font Awesome 5 Free", "fa-regular-400"; 4 | } 5 | 6 | .fab { 7 | font-family: "Font Awesome 5 Brands", "fa-brands-400"; 8 | } 9 | 10 | .fas { 11 | font-family: "Font Awesome 5 Free", "fa-solid-900"; 12 | } 13 | 14 | .ico { 15 | font-family: "IcoMoon-Free"; 16 | } 17 | /* << icon-font-css-class-def */ 18 | .border_style{ 19 | border-width: 5; 20 | border-color:black; 21 | padding: 5; 22 | margin-bottom: 2; 23 | } 24 | 25 | Label { 26 | font-size: 48; 27 | color: #66ccff; 28 | margin: 8; 29 | } -------------------------------------------------------------------------------- /app/ng-ui-category/icon-fonts/code-behind/article.md: -------------------------------------------------------------------------------- 1 | The example shows, how to use setup the `font-family` property via CSS and how to define the needed icons via Code-Behind. 2 | 3 | 4 | 5 | 6 | 7 | And the result is: 8 | 9 | ![sample-app](./img/modules/icon-fonts/sample-app.png "Sample App") 10 | 11 | Example for icon font glyphs: 12 | 13 | ![IcoMoon](./img/modules/icon-fonts/icomoon.png "IcoMoon-Free") 14 | 15 | Example for icon font folder location: 16 | 17 | ![icon-fonts](./img/modules/icon-fonts/fonts-folder.png "Fonts Folder") -------------------------------------------------------------------------------- /app/ng-ui-category/icon-fonts/code-behind/codebehind.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /app/ng-ui-category/icon-fonts/code-behind/codebehind.css: -------------------------------------------------------------------------------- 1 | /* >> icon-font-code-behind-css */ 2 | /* 3 | File name: IcoMoon-Free.ttf 4 | Font name: IcoMoon-Free 5 | */ 6 | .ico { 7 | font-family: 'IcoMoon-Free'; 8 | font-size: 48; 9 | } 10 | 11 | /* only for reference, is NOT working in this example (due to wrong glyph codes) 12 | .fa { 13 | font-family: "Font Awesome 5 Free", "fa-regular-400"; 14 | font-size: 48; 15 | } 16 | */ 17 | /* << icon-font-code-behind-css */ 18 | 19 | Label.icon { 20 | font-size: 34; 21 | color: #FF6666; 22 | } 23 | 24 | Label { 25 | font-size: 18; 26 | color: #66ccff; 27 | margin: 8 32 8 23; 28 | } -------------------------------------------------------------------------------- /app/ng-ui-category/icon-fonts/end.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-category/icon-fonts/end.md -------------------------------------------------------------------------------- /app/ng-ui-category/icon-fonts/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Icon Fonts 3 | description: Learn how to use icon fonts to display icons instead of using images. 4 | position: 140 5 | slug: icon-fonts-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/end.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-category/modal-view-ng/end.md -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Modal view 3 | description: The example demonstrates how to use Modal page inside a NativeScript Angular application. In the sample is shown how to open single modal page as well as how to enable navigation inside the modal. 4 | position: 47 5 | slug: modal-view-ng 6 | environment: angular 7 | --- 8 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-actionbar/main-view.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-actionbar/modal-root.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-actionbar/modal-view.component.css: -------------------------------------------------------------------------------- 1 | .action-bar, .page { 2 | background-color: chocolate; 3 | } 4 | .my-label { 5 | border-radius: 5; 6 | color: white; 7 | font-family: "fa-regular-400"; 8 | font-size: 24; 9 | vertical-align: middle; 10 | } -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-actionbar/modal-view.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-navigation/home-modal-view-content.component.css: -------------------------------------------------------------------------------- 1 | .action-bar, .page { 2 | background-color: chocolate; 3 | } 4 | .my-label { 5 | border-radius: 5; 6 | color: white; 7 | font-family: "fa-regular-400"; 8 | font-size: 24; 9 | vertical-align: middle; 10 | } -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-navigation/home-modal-view-content.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-navigation/home-modal-view.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-navigation/modal-view-navigation.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-navigation/second-modal-view-content.component.css: -------------------------------------------------------------------------------- 1 | .action-bar, .page { 2 | background-color: chocolate; 3 | } 4 | .my-label { 5 | border-radius: 5; 6 | color: white; 7 | font-family: "fa-regular-400"; 8 | font-size: 24; 9 | vertical-align: middle; 10 | } -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/modal-view-navigation/second-modal-view-content.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/overview.md: -------------------------------------------------------------------------------- 1 | Modal Dialog 2 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/article.md: -------------------------------------------------------------------------------- 1 | Modal Dialog 2 | 3 | **_app.module.ts_** 4 | 5 | 6 | The host component (**_sample-modal-view-module.example.html_**) from which we will open the different modal pages (e.g., **_modal-view.html_**). 7 | 8 | **_sample-modal-view-module.example.html_** 9 | 10 | 11 | Passing parameters from the opened modal view. 12 | 13 | **_modal-view.html_** and **_modal-view.ts_** 14 | 15 | 16 | 17 | Receiving the result from the modal page. 18 | 19 | -------------------------------------------------------------------------------- /app/ng-ui-category/modal-view-ng/sample-modal-view-module-example/modal-view.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/action-bar/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/action-bar/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/action-bar/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ActionBar 3 | description: ActionBar UI widget, which is a common abstraction over Android's AtionBar and iOS's NavigationBar. This component is displayed on the top of the windows and can have a title, application-level navigation. It could have custom interactive items as well. 4 | position: 16 5 | slug: action-bar-ng 6 | --- 7 | example-order: usage, styling, tips-and-tricks -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/action-bar/overview.md: -------------------------------------------------------------------------------- 1 | The `ActionBar` is NativeScript’s abstraction over the Android `ActionBar` and iOS `NavigationBar`. It represents a toolbar at the top of the activity window, and can have a title, application-level navigation, as well as other custom interactive items. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/action-bar/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { RouterExtensions } from "@nativescript/angular"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./styling.component.html" 7 | }) 8 | export class ActionBarStylingComponent { 9 | 10 | constructor(private routerExtensions: RouterExtensions) { } 11 | 12 | public goBack() { 13 | this.routerExtensions.backToPreviousPage(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/action-bar/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/action-bar/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> action-bar-basic-usage-ts 2 | import { Component } from "@angular/core"; 3 | import { RouterExtensions } from "@nativescript/angular"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./usage.component.html" 8 | 9 | }) 10 | export class ActionBarUsageComponent { 11 | 12 | constructor(private routerExtensions: RouterExtensions) { } 13 | 14 | goBack() { 15 | this.routerExtensions.backToPreviousPage(); 16 | } 17 | 18 | openSettings() { 19 | // implement the cusotm logic 20 | } 21 | } 22 | // << action-bar-basic-usage-ts 23 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/activity-indicator/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/activity-indicator/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/activity-indicator/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ActivityIndicator 3 | description: ActivityIndicator is an abstraction over Android's ProgressBar and iOS's UActivityIndicatorView. This UI component is used for displaying the progress while running background operations (e.g loading image, data, accepting a request). The ActivityIndicator's value could be controlled via its `busy` property. 4 | position: 17 5 | slug: activity-indicator-ng 6 | --- 7 | example-order: usage, styling, tips-and-tricks 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/activity-indicator/overview.md: -------------------------------------------------------------------------------- 1 | The `ActivityIndicator` represents a UI widget which displays a progress indicator hinting the user for some background operation running like loading image, data, accepting a request, etc. You can control its behavior by setting or binding to its `busy` property. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/activity-indicator/styling/article.md: -------------------------------------------------------------------------------- 1 | The `ActivityIndicator` supports styling the `color` (default value is `blue`) and `backgroundColor` (default value is `transparent`) properties. 2 | 3 | 4 | 5 | | **@nativescript/theme** CSS class | Description | 6 | |:---------------------------------------|:----------------| 7 | | `activity-indicator` | Styles the `color` of the indicator in sync with the main theme color. | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/activity-indicator/styling/styling.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/activity-indicator/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./styling.component.html" 6 | }) 7 | export class ActivityIndicatorStylingComponent { } 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/activity-indicator/usage/article.md: -------------------------------------------------------------------------------- 1 | You can work with its boolean `busy` property and set it to `true` or `false`, thus displaying or hiding the control. 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/activity-indicator/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/activity-indicator/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> activity-indicator-setting-busy-tsc 2 | import { Component } from "@angular/core"; 3 | import { ActivityIndicator, EventData } from "@nativescript/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./usage.component.html" 8 | }) 9 | export class ActivityIndicatorUsageComponent { 10 | isBusy: boolean = true; 11 | 12 | onBusyChanged(args: EventData) { 13 | let indicator: ActivityIndicator = args.object; 14 | console.log("indicator.busy changed to: " + indicator.busy); 15 | } 16 | } 17 | // << activity-indicator-setting-busy-tsc 18 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/animating-properties/animating-properties.component.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/chaining-animations/article.md: -------------------------------------------------------------------------------- 1 | Animations can be also mapped one after another, thus resulting in a single chain of a more complicated one. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/chaining-animations/chaining-animations.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/end.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/animations/end.md -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Animations 3 | description: Animation module provides the needed functionality for animating UI components in NativeScript. This module allows defining an animation Imperative ( creating animations via code-behind while using `Animation` class from `ui/animation` module) and Declarative ( creating `CSS3` keyframe animations). 4 | position: 18 5 | slug: animations-ng 6 | --- 7 | example-order: title, action-items, navigation-button, icon-fonts -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/multiple-views/article.md: -------------------------------------------------------------------------------- 1 | If appropriate, you can animate multiple items simultaneously. 2 | It is as easy as placing all the animations you want in a single array and playing them with the help of Animation element. 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/overview.md: -------------------------------------------------------------------------------- 1 | One of the ways to improve the attractiveness of your application is by adding animations. 2 | NativeScript exposes a simple and easy, but powerful enough API to allow animating almost every native element in your application. -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/style.css: -------------------------------------------------------------------------------- 1 | Label { 2 | height: 70; 3 | widows: 70; 4 | } -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/width-height-properties/article.md: -------------------------------------------------------------------------------- 1 | Since {N} 6.0, we can animate the `width` and `height` properties of views. On the snippets below are demonstrated, how to configure those animations: 2 | tns run 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/width-height-properties/width-height-properties.component.css: -------------------------------------------------------------------------------- 1 | Label { 2 | color: white; 3 | background-color:blue; 4 | border-radius: 20; 5 | margin: 16; 6 | padding: 8; 7 | horizontal-align: center; 8 | vertical-align: top; 9 | } -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/animations/width-height-properties/width-height-properties.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/bottom-navigation/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BottomNavigation 3 | description: The NativeScript's BottomNavigation component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for BottomNavigation is a high level navigaiton with 3 to 5 tabs each with separate function. 4 | position: 42 5 | slug: bottom-navigation-ng 6 | --- 7 | example-order: usage, styling, tips-and-tricks -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/bottom-navigation/styling/article.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/bottom-navigation/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./styling.component.html", 6 | styleUrls: ["./styling.component.css"] 7 | }) 8 | export class BottomNavStylingComponent { } 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/bottom-navigation/usage/article.md: -------------------------------------------------------------------------------- 1 | The `BottomNavigation` component contains two sub-components: 2 | - The `TabStrip` which defines and renders the bottom bar and its `TabStripItem` components. 3 | - Multiple `TabContentItem` components which total number should be equal to the number of the tabs (`TabStripItem` components). Each `TabContentItem` acts as a container for your tab content. 4 | 5 | 6 | 7 | 8 | > **Note:** The number of `TabStripItem` components must be equal to the number of `tabContentItem` components. 9 | 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/bottom-navigation/usage/usage.component.css: -------------------------------------------------------------------------------- 1 | /* >> bottom-navigation-usage-css */ 2 | .fas { 3 | font-family: "Font Awesome 5 Free", "fa-solid-900"; 4 | font-weight: 900; 5 | } 6 | 7 | .t-36 { 8 | font-size: 36; 9 | } 10 | /* << bottom-navigation-usage-css */ -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/bottom-navigation/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./usage.component.html", 6 | styleUrls: ["./usage.component.css"] 7 | }) 8 | export class BottomNavUsageComponent { } 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/button/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/button/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/button/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Button 3 | description: The Button is a UI component that displays a button which reacts to a user gesture. The Button provides abstraction over Android's widget.Button and iOS's UIButton. This component can be defined via HTML and we can set up its text value and set up tap event handler, which will be fired on button click. 4 | position: 20 5 | slug: button-ng 6 | --- 7 | example-order: usage, styling 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/button/overview.md: -------------------------------------------------------------------------------- 1 | A `Button` component provides an easy-to-use way for interacting through the application and invoking custom logic in response to that. Once the user taps it, the button performs any actions attached to it. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/button/styling/article.md: -------------------------------------------------------------------------------- 1 | The `Button` component can be styled using CSS or corresponding properties. 2 | 3 | 4 | 5 | 6 | ### Specific Styling Properties 7 | 8 | | Name | CSS Name | Type | Description | 9 | |----------|---------|---------|----------------| 10 | | `androidElevation` | `android-elevation` | number | (Android only) Gets or sets the elevation of the android view. | 11 | | `androidDynamicElevationOffset` | `android-dynamic-elevation-offset` | number | (Android only) Gets or sets the dynamic elevation offset of the android view. | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/button/styling/styling.component.css: -------------------------------------------------------------------------------- 1 | /* >> button-styling-css */ 2 | .my-button { 3 | android-elevation: 4; 4 | background-color: lightseagreen; 5 | border-color: darkolivegreen; 6 | border-radius: 20; 7 | border-width: 1; 8 | color: whitesmoke; 9 | font-size: 18; 10 | font-weight: bold; 11 | } 12 | 13 | .my-button:active { 14 | android-elevation: 8; 15 | background-color: whitesmoke; 16 | border-color: darkolivegreen; 17 | border-radius: 20; 18 | border-width: 1; 19 | color: lightseagreen; 20 | font-size: 18; 21 | font-weight: bold; 22 | } 23 | /* << button-styling-css */ -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/button/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { EventData } from "@nativescript/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./styling.component.html", 7 | styleUrls: ["./styling.component.css"] 8 | }) 9 | export class ButtonStylingComponent { 10 | onTap(args: EventData) { 11 | console.log(`${args.object} tapped!`); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/button/usage/article.md: -------------------------------------------------------------------------------- 1 | A `Button` component can execute custom logic via its `tap` event. Handling the event is as easy as using `(tap)` in HTML, and implementing a tap handler in your component. 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/button/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/button/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { Button, EventData } from "@nativescript/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./usage.component.html" 7 | }) 8 | export class ButtonUsageComponent { 9 | public counter: number = 0; 10 | 11 | // >> button-tap-event-code 12 | onTap(args: EventData) { 13 | let button = args.object as Button; 14 | // execute your custom logic here... 15 | // >> (hide) 16 | this.counter++; 17 | alert("Tapped " + this.counter + " times!"); 18 | // << (hide) 19 | } 20 | // << button-tap-event-code 21 | } 22 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/date-picker/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/date-picker/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/date-picker/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DatePicker 3 | description: DatePicker is UI control, which allows choosing a date from a ready-to-use dialog. The date for the component can be set or get via its corresponding section of the control(for a day, month and year). In the example is demostrated, how to set up, date range via its minDate and maxDate properties. 4 | position: 21 5 | slug: date-picker-ng 6 | --- 7 | example-order: usage, styling -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/date-picker/overview.md: -------------------------------------------------------------------------------- 1 | `DatePicker` control enables the user to choose a date as a ready-to-use dialog. Every date part can be picked separately by its corresponding section of the control - for day, month and year. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/date-picker/styling/article.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | > **Note:** On Android the native widgets [android.widget.DatePicker](http://developer.android.com/reference/android/widget/DatePicker.html) is not allowing runtime changes to the `color` property. So if you want to have a different color for your day/month/year properties, you need to change it via the Android resources by providing custom `styles.xml` (in `values-v21`) where the style for `android:textColorPrimary` can be overwritten. -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/date-picker/styling/styling.component.css: -------------------------------------------------------------------------------- 1 | /* >> styling-datepicker-css */ 2 | .date-picker { 3 | background-color: olivedrab; 4 | border-color: burlywood; 5 | border-width: 2; 6 | border-radius: 10; 7 | color: whitesmoke; 8 | vertical-align: middle; 9 | } 10 | /* << styling-datepicker-css */ -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/date-picker/styling/styling.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/date-picker/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { DatePicker } from "@nativescript/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./styling.component.html", 7 | styleUrls: ["./styling.component.css"] 8 | }) 9 | export class DatePickerStylingComponent { } 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/date-picker/usage/article.md: -------------------------------------------------------------------------------- 1 | Using `DatePicker` is as straightforward as setting `year`, `month`, and `day`. Alternatively, you can set the `date` property (accepts a `Date` object). If required you can also set `minDate` and `maxDate`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/date-picker/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/action-dialog/action-dialog.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/action-dialog/article.md: -------------------------------------------------------------------------------- 1 | An Action Dialog will require a particular activity from the user. A basic definition of such dialog that expects a selection is: 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/action-dialog/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/dialogs/action-dialog/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/alert-dialog/alert-dialog.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/alert-dialog/alert-dialog.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { Dialogs } from "@nativescript/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./alert-dialog.component.html" 7 | }) 8 | export class AlertDialogComponent { 9 | displayAlertDialog() { 10 | // >> alert-dialog-code 11 | let options = { 12 | title: "Race selection", 13 | message: "Race chosen: Unicorn", 14 | okButtonText: "OK" 15 | }; 16 | 17 | Dialogs.alert(options).then(() => { 18 | console.log("Race chosen!"); 19 | }); 20 | // << alert-dialog-code 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/alert-dialog/article.md: -------------------------------------------------------------------------------- 1 | An Alert Dialog will notify the user for an action that has happened. It can be defined as: 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/alert-dialog/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/dialogs/alert-dialog/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/confirm-dialog/article.md: -------------------------------------------------------------------------------- 1 | A Confirm Dialog will expect the user to accept or reject the action that is about the happen. For example: 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/confirm-dialog/confirm-dialog.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/confirm-dialog/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/dialogs/confirm-dialog/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/login-dialog/article.md: -------------------------------------------------------------------------------- 1 | A Login Dialog will wait for the user to input their credentials: 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/login-dialog/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/dialogs/login-dialog/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/login-dialog/login-dialog.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dialogs 3 | description: The Dialog module provides a functionality, which allows creating dialogs in your app in a manner similar to the web browser. The component enables creating alerts, confirmations, prompts, logins and dialogs that require action. 4 | position: 22 5 | slug: dialogs-ng 6 | --- 7 | example-order: alert-dialog, action-dialog, confirm-dialog, login-dialog, prompt-dialog -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/overview.md: -------------------------------------------------------------------------------- 1 | NativeScript lets you create dialogs in your app in a manner similar to the web browser. 2 | You can create alerts, confirmations, prompts, logins and dialogs that require action. -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/prompt-dialog/article.md: -------------------------------------------------------------------------------- 1 | A Prompt Dialog will request for an input. A basic definition might be: 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/prompt-dialog/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/dialogs/prompt-dialog/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/dialogs/prompt-dialog/prompt-dialog.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/formatted-string/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: FormattedString 3 | description: FormattedString is a special class, which provides a support various text transformations and decorations. This class can be used in all text-related components like Label, TextView, TextField and Button. 4 | position: 23 5 | slug: formatted-string-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/formatted-string/overview.md: -------------------------------------------------------------------------------- 1 | NativeScript has a special class called `FormattedString` to support various text transformations and decorations. The `FormattedString` class can be used with all text-related components like `Label`, `TextView`, `TextField` and even `Button`. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/formatted-string/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/formatted-string/usage/usage.component.css: -------------------------------------------------------------------------------- 1 | /* >> formatted-string-button-css */ 2 | .fas { 3 | font-family: "Font Awesome 5 Free", "fa-solid-900"; 4 | font-weight: 900; 5 | } 6 | 7 | .t-18 { 8 | font-size: 18; 9 | } 10 | /* << formatted-string-button-css */ -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/formatted-string/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 12 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/formatted-string/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./usage.component.html", 6 | styleUrls: ["./usage.component.css"] 7 | }) 8 | export class FormattedStringUsageComponent { } 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/double-tap/article.md: -------------------------------------------------------------------------------- 1 | Action: Two taps in a quick succession. 2 | 3 | Double Tap in HTML 4 | 5 | 6 | Double Tap in TypeScript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/double-tap/double-tap.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/long-press/article.md: -------------------------------------------------------------------------------- 1 | Action: Press your finger against the screen for a few moments. 2 | 3 | Long press in HTML 4 | 5 | 6 | Long Press in TypeScript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/long-press/long-press.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Gestures 3 | description: The Gesture class provides functionality, which allows interaction with the UI component in the application. We can subscribe or unsubscribe via `on` and `off`methods for one or all available gestures like `Tap`, `Double Tap` , `Long Press`, `Pan` , `Pinch` , `Swipe` , `Rotation` and `Touch`. The examples demonstrate their usage in some basic scenarios. 4 | position: 24 5 | slug: gestures-ng 6 | --- 7 | example-order: tap, double-tap, touch, swipe, long-press, pan, pinch, rotation -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/pan/article.md: -------------------------------------------------------------------------------- 1 | Action: Press your finger down and immediately start moving it around. 2 | Pans are executed more slowly and allow for more precision and the screen stops responding as soon as the finger is lifted off it. 3 | 4 | Pan in HTML 5 | 6 | 7 | Pan in TypeScript 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/pan/pan.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/pinch/article.md: -------------------------------------------------------------------------------- 1 | Action: Touch the screen using two of your fingers, then move them towards each other or away from each other. 2 | 3 | Pinch in HTML 4 | 5 | 6 | Pinch in TypeScript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/pinch/pinch.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/rotation/article.md: -------------------------------------------------------------------------------- 1 | Action: Touch the screen using two of your fingers, then rotate them simultaneously left or right. 2 | 3 | Rotation in HTML 4 | 5 | 6 | Rotation in TypeScript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/rotation/rotation.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/swipe/article.md: -------------------------------------------------------------------------------- 1 | Action: Swiftly slide your finger across the screen. Swipes are quick and affect the screen even after the finger is lifted off the screen. 2 | 3 | Swipe in HTML 4 | 5 | 6 | Swipe in TypeScript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/swipe/swipe.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/tap/article.md: -------------------------------------------------------------------------------- 1 | Action: Briefly touch the screen. 2 | 3 | Tap in HTML 4 | 5 | 6 | Tap in TypeScript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/tap/tap.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/touch/article.md: -------------------------------------------------------------------------------- 1 | Action: A finger action was performed. 2 | 3 | Touch in HTML 4 | 5 | 6 | Touch in TypeScript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/gestures/touch/touch.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/htmlview/htmlview-examples.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from "@angular/core"; 2 | import { Link } from "./../../link"; 3 | 4 | let menuLinks = [ 5 | new Link("Usage", "/html-view/usage") 6 | ]; 7 | 8 | @Component({ 9 | moduleId: module.id, 10 | templateUrl: "./../../examples-list.component.html", 11 | changeDetection: ChangeDetectionStrategy.OnPush 12 | }) 13 | export class HtmlViewExamplesComponent { 14 | public links: Array; 15 | 16 | constructor() { 17 | this.links = []; 18 | 19 | for (let i = 0; i < menuLinks.length; i++) { 20 | this.links.push(menuLinks[i]); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/htmlview/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/htmlview/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/htmlview/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HtmlView 3 | description: HtmlView is UI component, which allows representing a static HTML content in NativeScript Angular, The component supports a limited number of CSS styling properties. The examples cover some basics scenarios. 4 | position: 26 5 | slug: html-view-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/htmlview/overview.md: -------------------------------------------------------------------------------- 1 | The `HtmlView` represents a view with HTML content. Use this component instead of a `WebView` when you want to show static HTML content with base HTML support. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/htmlview/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/htmlview/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/htmlview/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> creating-htmlview-code 2 | import { Component } from "@angular/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./usage.component.html" 7 | }) 8 | 9 | export class HtmlViewUsageComponent { 10 | public htmlString: string; 11 | 12 | constructor() { 13 | this.htmlString = ` 14 |

HtmlView demo in NativeScript App

15 | `; 16 | } 17 | } 18 | // << creating-htmlview-code 19 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/image/Image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Image 3 | description: The Image is UI widget, which is a common abstraction over iOS's UIImage and Android's widget.ImageView. The component allows loading an image from different resources (URL, ImageSource, image from the resource folder or while providing the relative path to the image file) via its src property. 4 | position: 27 5 | slug: image-ng 6 | --- 7 | example-order: usage, styling -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/overview.md: -------------------------------------------------------------------------------- 1 | The `Image` widget shows an image in your mobile application. 2 | 3 | > **Note:** When working with images following [the best practices](https://docs.nativescript.org/best-practices/images-optimisations) is a must. 4 | 5 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/styling/article.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/styling/styling.component.css: -------------------------------------------------------------------------------- 1 | /* >> image-icon-fonts-css-ng */ 2 | Image { 3 | width: 100; 4 | height: 100; 5 | } 6 | 7 | .fas { 8 | font-family: "Font Awesome 5 Free", "fa-solid-900"; 9 | font-weight: 900; 10 | } 11 | 12 | .t-36 { 13 | font-size: 36; 14 | } 15 | /* << image-icon-fonts-css-ng */ 16 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/styling/styling.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | styleUrls: ["./styling.component.css"], 6 | templateUrl: "./styling.component.html" 7 | 8 | }) 9 | export class ImageStylingComponent { } 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/usage/usage.component.css: -------------------------------------------------------------------------------- 1 | /* >> image-usage-css */ 2 | Image { 3 | width: 50; 4 | height: 50; 5 | } 6 | 7 | .fas { 8 | font-family: "Font Awesome 5 Free", "fa-solid-900"; 9 | font-weight: 900; 10 | } 11 | 12 | .t-36 { 13 | font-size: 36; 14 | } 15 | /* << image-usage-css */ -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/image/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> import-image-module 2 | import { Component } from "@angular/core"; 3 | import { Image, ImageSource } from "@nativescript/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | styleUrls: ["./usage.component.css"], 8 | templateUrl: "./usage.component.html" 9 | }) 10 | export class ImageUsageComponent { } 11 | // << import-image-module 12 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/label/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/label/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/label/label-examples.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from "@angular/core"; 2 | import { Link } from "./../../link"; 3 | 4 | let menuLinks = [ 5 | new Link("Usage", "/label/usage") 6 | ]; 7 | 8 | @Component({ 9 | moduleId: module.id, 10 | templateUrl: "./../../examples-list.component.html", 11 | changeDetection: ChangeDetectionStrategy.OnPush 12 | }) 13 | export class LabelExamplesComponent { 14 | public links: Array; 15 | 16 | constructor() { 17 | this.links = []; 18 | 19 | for (let i = 0; i < menuLinks.length; i++) { 20 | this.links.push(menuLinks[i]); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/label/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Label 3 | description: The Label in NativeScript is an abstraction over Android's widget.TextView and iOS's UILabel, which allows showing read-only text. The displayed content can be controlled while using its bindable text property. 4 | position: 29 5 | slug: label-ng 6 | --- 7 | example-order: usage, styling 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/label/overview.md: -------------------------------------------------------------------------------- 1 | The `Label` widget provides a text label that shows read-only text. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/label/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/label/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/label/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./usage.component.html" 6 | }) 7 | export class LabelUsageComponent { } 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/absolute-layout/absolute-layout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./absolute-layout.component.html" 6 | }) 7 | export class AbsoluteLayoutComponent { } 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/absolute-layout/article.md: -------------------------------------------------------------------------------- 1 | The AbsoluteLayout is the simplest layout in NativeScript. It uses absolute left-top (x/y) coordinates to position its children and the place of each of them depends on its Top, Left, Width and Height properties. 2 | The AbsoluteLayout will not enforce any layout constraints on its elements and will not resize them at runtime when its size changes. 3 | 4 | **API Reference for** [AbsoluteLayout Class](http://docs.nativescript.org/api-reference/modules/_ui_layouts_absolute_layout_.html) 5 | 6 | A basic usage and definition of AbsoluteLayout and its children in HTML. 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/absolute-layout/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/layouts/absolute-layout/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/dock-layout/article.md: -------------------------------------------------------------------------------- 1 | The DockLayout is a layout that arranges its children at its own outer edges (top, bottom, left and right or center). 2 | To define the docking side of a child element, use its dock property. To dock a child element to the center of the DockLayout, it must be the last child of the DockLayout and the stretchLastChild property of the DockLayout must be set to true. 3 | 4 | **API Reference for** [DockLayout Class](http://docs.nativescript.org/api-reference/modules/_ui_layouts_dock_layout_.html) 5 | 6 | A basic usage and definition of DockLayout, its elements and setting its stretchLastChild property and in HTML. 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/dock-layout/dock-layout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./dock-layout.component.html", 6 | styleUrls: ["./../layouts.style.css"] 7 | }) 8 | export class DockLayoutComponent { 9 | } 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/dock-layout/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/layouts/dock-layout/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/end.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/layouts/end.md -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/flexbox-layout-one/article.md: -------------------------------------------------------------------------------- 1 | Directions 2 | 3 | This establishes the main-axis, thus defining the direction flex items are placed in the flex container. 4 | Flexbox is (aside from optional wrapping) a single-direction layout concept. 5 | Think of flex items as primarily laying out either in horizontal rows or vertical columns. 6 | 7 | 8 | **API Reference for** [FlexboxLayout Module](http://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_layout_.html) 9 | **API Reference for** [FlexboxLayout Class](http://docs.nativescript.org/api-reference/classes/_ui_layouts_flexbox_layout_.flexboxlayout.html) 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/flexbox-layout-one/flexbox-layout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./flexbox-layout.component.html", 6 | styleUrls: ["./../layouts.style.css"] 7 | }) 8 | export class FlexboxLayoutFirstComponent { 9 | } 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/flexbox-layout-three/flexbox-layout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./flexbox-layout.component.html" 6 | }) 7 | export class FlexboxLayoutThirdComponent implements OnInit { 8 | public desc: string; 9 | 10 | ngOnInit() { 11 | this.desc = "By default, flex items will all try to fit onto one line." + 12 | "You can change that and allow the items to wrap as needed with this property." + 13 | "Direction also plays a role here, determining the direction new lines are stacked in."; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/flexbox-layout-two/flexbox-layout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./flexbox-layout.component.html" 6 | }) 7 | export class FlexboxLayoutSecondComponent { 8 | } 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/grid-layout/grid-layout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./grid-layout.component.html", 6 | styleUrls: ["./../layouts.style.css"] 7 | }) 8 | export class GridLayoutComponent { 9 | } 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/grid-layout/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/layouts/grid-layout/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/layouts.style.css: -------------------------------------------------------------------------------- 1 | Button { 2 | height: auto; 3 | } -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Layouts 3 | description: NativeScript provides a collection of several layouts' structures(StackLayout, GridLayout, AbsoluteLayout, DockLayout, FlexboxLayout, WrapLayout), which are used for setting up the position of the views on the screen. The examples cover the main scenarios for using those layout containers inside a NativeScript Angular project. 4 | position: 30 5 | slug: layouts-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/overview.md: -------------------------------------------------------------------------------- 1 | Layout is the base class for all views that provide positioning of child elements. 2 | 3 | You can use the various layout containers to position elements. They evaluate the base properties of view such as width, height, minWidth and alignments, and expose additional properties for positioning child views (such as the four paddings). Depending on the way they arrange the children, there are five types of layouts - AbsoluteLayout, DockLayout, GridLayout, StackLayout and WrapLayout. -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/stack-layout/article.md: -------------------------------------------------------------------------------- 1 | It arranges the elements one next to the other either vertically (from top to bottom) or horizontally (from left to right). The direction depends on the value of the orientation property (horizontal or vertical). 2 | 3 | **API Reference for** [StackLayout Class](http://docs.nativescript.org/api-reference/modules/_ui_layouts_stack_layout_.html) 4 | 5 | A basic usage and definition of StackLayout, its orientation and elements in HTML. 6 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/stack-layout/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/layouts/stack-layout/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/stack-layout/stack-layout.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/stack-layout/stack-layout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./stack-layout.component.html", 6 | styleUrls: ["./../layouts.style.css"] 7 | }) 8 | export class StackLayoutComponent { 9 | } 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/wrap-layout/article.md: -------------------------------------------------------------------------------- 1 | The WrapLayout is similar to the StackLayout, but it does not just stack all child elements to one column/row, it wraps them to new columns/rows if no space is left. The WrapLayout is often used with items of the same size, but this is not a requirement. 2 | 3 | **API Reference for** [WrapLayout Class](http://docs.nativescript.org/api-reference/modules/_ui_layouts_wrap_layout_.html) 4 | 5 | A basic usage and definition of WrapLayout, its orientation and elements in HTML 6 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/wrap-layout/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/layouts/wrap-layout/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/layouts/wrap-layout/wrap-layout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./wrap-layout.component.html" 6 | }) 7 | export class WrapLayoutComponent { 8 | } 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/listpicker/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ListPicker 3 | description: ListPicker is UI spinner type widget, which allows displaying a list of options. the component can be set up via HTML or Code-Behind, and we can control the displayed options via its `items` property and its current selected value via its `selectedIndex` property 4 | position: 31 5 | slug: list-picker-ng 6 | --- 7 | example-order: usage, styling -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/overview.md: -------------------------------------------------------------------------------- 1 | The `ListPicker` is a spinner type component for listing options. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/styling/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/styling/styling.component.css: -------------------------------------------------------------------------------- 1 | /* >> picker-styling-css */ 2 | .picker { 3 | background-color: blanchedalmond; 4 | color: red; 5 | border-color: brown; 6 | border-radius: 20; 7 | border-width: 2; 8 | width: 200; 9 | height: 100; 10 | vertical-align: middle; 11 | } 12 | /* << picker-styling-css */ -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/styling/styling.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { ListPicker } from "@nativescript/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./styling.component.html", 7 | styleUrls: ["./styling.component.css"] 8 | }) 9 | export class ListPickerStylingComponent { 10 | public items: Array = ["Batman", "Joker", "Bane"]; 11 | 12 | public selectedIndexChanged(args) { 13 | let picker = args.object; 14 | console.log(`Selected: ${this.items[picker.selectedIndex]}`); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listpicker/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> creating-listpicker-code 2 | import { Component } from "@angular/core"; 3 | import { EventData, ListPicker } from "@nativescript/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./usage.component.html" 8 | }) 9 | export class ListPickerUsageComponent { 10 | public years: Array = [1980, 1990, 2000, 2010, 2020]; 11 | 12 | public onSelectedIndexChanged(args: EventData) { 13 | const picker = args.object; 14 | console.log(`index: ${picker.selectedIndex}; item" ${this.years[picker.selectedIndex]}`); 15 | } 16 | } 17 | // << creating-listpicker-code 18 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listview/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/listview/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listview/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ListView 3 | description: ListView component is an abstraction over iOS's UITableView and Android's widget.ListView, which provides functionality for displaying a collection of values,which is present in an array. The component allows adding new items runtime and includes a feature - itamTap event, which helps to handle, which cell is selected. 4 | position: 32 5 | slug: list-view-ng 6 | --- 7 | example-order: usage, styling, tips-and-tricks -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listview/styling/article.md: -------------------------------------------------------------------------------- 1 | The `ListView` supports the common CSS styling (e.g., `padding`, `margin`, `background-color`, etc.). Additionally, you can use `separatorColor`, `rowHeight` and `iosEstimatedRowHeight` to further customize the ListView's styles. 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listview/styling/styling.component.css: -------------------------------------------------------------------------------- 1 | .odd { 2 | vertical-align: center; 3 | padding-left: 15; 4 | } 5 | 6 | .even { 7 | color: #0099CC; 8 | vertical-align: center; 9 | padding-left: 15; 10 | } -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listview/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | // >> update-child-component-code 2 | import { Component, OnInit } from "@angular/core"; 3 | import { ItemService, Item } from "../usage/usage.service"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./styling.component.html", 8 | styleUrls: ["./styling.component.css"] 9 | }) 10 | export class ListViewStylingComponent implements OnInit { 11 | public items: Array = []; 12 | 13 | constructor(private _itemService: ItemService) { } 14 | 15 | ngOnInit(): void { 16 | this.items = this._itemService.getItems(); 17 | } 18 | } 19 | // << update-child-component-code 20 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listview/tips-and-tricks/article.md: -------------------------------------------------------------------------------- 1 | 2 | ### Item Templates 3 | 4 | Use `itemTemplateSelector` property to create multiple item templates. The `itemTemplateSelector` accepts a function that returns a value for `nsTemplateKey`. 5 | 6 | 7 | 8 | 9 | 10 | ### Custom Component Template 11 | 12 | Common scenario in Angular is to reuse given component via its selector name (e.g., `sdk-child-component`). The below scenario demonstrates how to pass data from the parent `ListView` to its children components (which are used as template). 13 | 14 | 15 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listview/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/listview/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/create-custom-directive/article.md: -------------------------------------------------------------------------------- 1 | HTML 2 | 3 | 4 | TypeScript 5 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/create-custom-directive/create-custom-directive.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/custom-unless-directive/article.md: -------------------------------------------------------------------------------- 1 | Directive code (Typescript) 2 | 3 | 4 | HTML 5 | 6 | 7 | Typescript 8 | 9 | 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/custom-unless-directive/directive-unless.ts: -------------------------------------------------------------------------------- 1 | // >> directive-code 2 | import { Directive, Input } from "@angular/core"; 3 | import { TemplateRef, ViewContainerRef } from "@angular/core"; 4 | 5 | @Directive({ selector: "[sdkUnless]" }) 6 | export class UnlessDirective { 7 | constructor(private templateRef: TemplateRef, private container: ViewContainerRef) { 8 | } 9 | 10 | @Input() set sdkUnless(condition: boolean) { 11 | if (!condition) { 12 | this.container.createEmbeddedView(this.templateRef); 13 | } else { 14 | this.container.clear(); 15 | } 16 | } 17 | } 18 | // << directive-code 19 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/end.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/ng-directives/end.md -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: NG Directives 3 | description: The example shows how to create custom directives inside a NativeScript Angular application and how to register them in the project. 4 | position: 48 5 | slug: ng-directives-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngfor-directive/article.md: -------------------------------------------------------------------------------- 1 | `*ngFor` structural directive usage in NativeScript + Angular-2+ 2 | A structural directive that renders a template for each item in a array or collection. The directive is placed on an element, which result in repeating the section or template. 3 | 4 | HTML 5 | 6 | 7 | Typescript 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngfor-directive/fruits.ts: -------------------------------------------------------------------------------- 1 | export let fruits = [ 2 | "Apple", 3 | "Apricot", 4 | "Avocado", 5 | "Banana", 6 | "Bilberry", 7 | "Blackberry", 8 | "Blackcurrant", 9 | "Blueberry", 10 | "Boysenberry", 11 | "Currant", 12 | "Cherry", 13 | "Cherimoya", 14 | "Cloudberry", 15 | "Coconut", 16 | "Cranberry", 17 | "Damson", 18 | "Date", 19 | "Dragonfruit", 20 | "Durian", 21 | "Elderberry", 22 | "Feijoa", 23 | "Fig", 24 | "Goji berry", 25 | "Gooseberry", 26 | "Grape" 27 | ]; 28 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngfor-directive/ngfor-directive.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngfor-directive/ngfor-directive.component.ts: -------------------------------------------------------------------------------- 1 | // >> ngfor-bind-items-code 2 | import { Component } from "@angular/core"; 3 | import { fruits } from "./fruits"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./ngfor-directive.component.html", 8 | }) 9 | export class NgForComponent { 10 | public fruitList: Array = []; 11 | 12 | constructor() { 13 | this.fruitList = fruits; 14 | } 15 | } 16 | // << ngfor-bind-items-code 17 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngif-directive-advanced/article.md: -------------------------------------------------------------------------------- 1 | `*ngIf` structural directive example usage for platform specific elements 2 | 3 | HTML 4 | 5 | 6 | TypeScript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngif-directive/article.md: -------------------------------------------------------------------------------- 1 | `*ngIf` structural directive basic usage in NativeScript + Angular-2 2 | 3 | HTML 4 | 5 | 6 | Typescript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngif-directive/ngif-directive.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngif-directive/ngif-directive.component.ts: -------------------------------------------------------------------------------- 1 | // >> using-ngif-code 2 | import { Component } from "@angular/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./ngif-directive.component.html", 7 | }) 8 | export class NgIfComponent { 9 | public isVisible: boolean = true; 10 | 11 | onTap() { 12 | if (this.isVisible) { 13 | this.isVisible = false; 14 | } else { 15 | this.isVisible = true; 16 | } 17 | } 18 | } 19 | // << using-ngif-code 20 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngswitch-directive/article.md: -------------------------------------------------------------------------------- 1 | `ngSwitch` structural directive basic usage in NativeScript + Angular-2 2 | 3 | HTML 4 | 5 | 6 | Typescript 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/ngswitch-directive/ngswitch-directive.component.ts: -------------------------------------------------------------------------------- 1 | // >> using-ngswitch-code 2 | import { Component } from "@angular/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./ngswitch-directive.component.html", 7 | }) 8 | export class NgSwitchComponent { 9 | public color: string; 10 | 11 | onBlue() { 12 | this.color = "blue"; 13 | } 14 | 15 | onPurple() { 16 | this.color = "purple"; 17 | } 18 | 19 | onYellow() { 20 | this.color = "yellow"; 21 | } 22 | } 23 | // << using-ngswitch-code 24 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/ng-directives/overview.md: -------------------------------------------------------------------------------- 1 | The following examples shows how to use Angular structural directives in NativeScript application. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/progress/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Progress 3 | description: The Progress class provides an abstraction over the iOS's UIProgressView and Android's widget.ProgressBar and allows visualising the progress while running any background tasks. The component has to properties `value` and `maxValue`, which will enable us to set up the current value and the maximum value. 4 | position: 34 5 | slug: progress-ng 6 | --- 7 | example-order: usage, styling, tips-and-tricks -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/overview.md: -------------------------------------------------------------------------------- 1 | The `Progress` widget is a visual bar indicator of a progress in a operation. 2 | It shows a bar representing the current progress of the operation. 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/styling/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/styling/styling.component.css: -------------------------------------------------------------------------------- 1 | /* >> progress-style-css-ng */ 2 | Progress{ 3 | color: cyan; 4 | background-color: green; 5 | 6 | } 7 | /* << progress-style-css-ng */ -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | // >> progress-create-code 2 | import { Component, OnInit } from "@angular/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | templateUrl: "./styling.component.html", 7 | styleUrls: ["./styling.component.css"] 8 | }) 9 | export class StylingComponent implements OnInit { 10 | public progressValue: number; 11 | 12 | ngOnInit() { 13 | this.progressValue = 25; 14 | } 15 | } 16 | // << progress-create-code 17 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/tips-and-tricks/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/tips-and-tricks/tips-and-tricks.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/progress/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> progress-create-code 2 | import { Component } from "@angular/core"; 3 | import { EventData, Progress } from "@nativescript/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./usage.component.html", 8 | }) 9 | export class UsageComponent { 10 | 11 | onValueChanged(args: EventData) { 12 | let progressBar = args.object as Progress; 13 | console.log("New value: " + progressBar.value); 14 | } 15 | } 16 | // << progress-create-code 17 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/scroll-view/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/scroll-view/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/scroll-view/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ScrollView 3 | description: ScrollView class allows displaying scrollable area, which has content that is larger than its bounds. The view enables changing its orientation(horizontal, vertical) via its orientation property and handling scroll event, which indicates if the user is scrolling the content. 4 | position: 36 5 | slug: scroll-view-ng 6 | --- 7 | example-order: usage, tips-and-tricks 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/scroll-view/overview.md: -------------------------------------------------------------------------------- 1 | The ScrollableView component allows you to display a scrollable area in your application, which has content that is larger than its bounds. 2 | The ScrollView has an `orientation` property, which allows you to set different orientations to the view: 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/scroll-view/tips-and-tricks/style.css: -------------------------------------------------------------------------------- 1 | .header-label { 2 | background-color: #0099CC; 3 | horizontal-align: center; 4 | vertical-align: center; 5 | color: #FFFFFF; 6 | margin: 2; 7 | } -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/scroll-view/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/scroll-view/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./usage.component.html" 6 | }) 7 | export class UsageComponent { } 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/search-bar/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/search-bar/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/search-bar/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SearchBar 3 | description: SearchBar is a component, which represents `UISearchBar` component in iOS and `SearchView` component for Android. Also, the component provides functionality, which allows submitting the entered text or clearing the content inside of the View. The module enables creating a simple filter for the displayed content in the app. 4 | position: 37 5 | slug: search-bar-ng 6 | --- 7 | example-order: usage, styling -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/search-bar/overview.md: -------------------------------------------------------------------------------- 1 | The `SearchBar` module represents a UI component similar to `UISearchBar` in iOS and ` android.widget.SearchView` for Android, both of which allow you to to create a simple filter for the the content in the app. 2 | This component provides `hint` and `text` properties and `submit` and `clear` events. 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/search-bar/styling/article.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/search-bar/styling/styling.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/search-bar/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./styling.component.html" 6 | }) 7 | export class StylingComponent { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/search-bar/usage/article.md: -------------------------------------------------------------------------------- 1 | Using `SearchBar` component with `hint` and `text` with Angular binding. The user input can be handled by using the `submit`, `textChange` and `clear` events. 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/search-bar/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/segmented-bar/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/segmented-bar/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/segmented-bar/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SegmentedBar 3 | description: SegmentedBar component allows defining a collection of clickable views. We can create similar collection while setting up the items property, where we should provide an array of SegmentedBarItem, The component allows to get and set the selected view's index with selectedIndex property or selectedIndexChange event. 4 | position: 38 5 | slug: segmented-bar-ng 6 | --- 7 | example-order: usage, styling -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/segmented-bar/overview.md: -------------------------------------------------------------------------------- 1 | Using a `SegmentedBar` inside a NativeScript project gives you a simple way to define a collection of tabbed views. 2 | The SegmentedBar’s `selectedIndexChange` event is emitted you for every changes of the component’s `selectedIndex`. 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/segmented-bar/styling/article.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | > **Note:** The property `selectedBackgroundColor` will behave differently on different platforms. On Android, it will apply color for the underline of the selected bar item, while on iOS, it will apply background color for the whole selected bar item. 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/segmented-bar/styling/styling.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.css -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/segmented-bar/styling/styling.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | § -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/segmented-bar/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { SegmentedBarItem } from "@nativescript/core"; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | styleUrls: ["./styling.component.css"], 7 | templateUrl: "./styling.component.html" 8 | }) 9 | export class SegmentedBarViewsComponent { 10 | public items: Array = []; 11 | 12 | constructor() { 13 | for (let i = 1; i < 4; i++) { 14 | let segmentedBarItem = new SegmentedBarItem(); 15 | segmentedBarItem.title = "View " + i; 16 | this.items.push(segmentedBarItem); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/segmented-bar/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/segmented-bar/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/slider/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Slider 3 | description: Slider module provides abstraction over iOS's UISlider and Android's widget.SeekBar and lets the user to drag the control to select a value. The component offers a functionality, which allows defining the min and max available values. 4 | position: 39 5 | slug: slider-ng 6 | --- 7 | example-order: usage, styling 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/overview.md: -------------------------------------------------------------------------------- 1 | The NativeScript Slider component lets the user to drag a control to select a value. 2 | You can set the specific range to use by setting the component’s `minValue` and `maxValue`. 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/style.css: -------------------------------------------------------------------------------- 1 | /* >> button-basic-style */ 2 | button, label, stack-layout { 3 | horizontal-align: center; 4 | } 5 | 6 | .icon { 7 | font-family: 'IcoMoon-Free'; 8 | } 9 | /* << button-basic-style */ 10 | 11 | GridLayout { 12 | padding: 0; 13 | margin-left: 0; 14 | margin-top: 10; 15 | margin-bottom: 10; 16 | } -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/styling/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/styling/styling.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./styling.component.html" 6 | }) 7 | export class StylingComponent { } 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/slider/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> basic-slider-tsc 2 | import { Component } from "@angular/core"; 3 | import { Slider } from "@nativescript/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./usage.component.html" 8 | }) 9 | export class UsageComponent { 10 | onSliderValueChange(args) { 11 | let slider = args.object; 12 | console.log(`Slider new value ${args.value}`); 13 | } 14 | } 15 | // << basic-slider-tsc 16 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/apply-style-via-code/apply-style-code.component.css: -------------------------------------------------------------------------------- 1 | .base { 2 | background-color: lightskyblue; 3 | color: whitesmoke; 4 | } -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/apply-style-via-code/apply-style-code.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/apply-style-via-code/article.md: -------------------------------------------------------------------------------- 1 | Dynamically added styles 2 | 3 | 4 | NOTE: Starting with v4.1, this is not functional in your `app.component.ts`. [See the release announcement for more details](https://www.nativescript.org/blog/announcing-the-nativescript-4.1-release) 5 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/end.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/style/end.md -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/style/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Styling 3 | description: The UI component in NativeScript Angular can be styled via CSS while using classes, selectors and IDs. The examples cover the scenarios for setting CSS via code-behind. 4 | position: 40 5 | slug: styling-ng 6 | --- 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/overview.md: -------------------------------------------------------------------------------- 1 | Styling the app is important for every application. In NativeScript there are two ways to apply styles. 2 | The most common way to style elements in the app is to define styles in a CSS file and use classes or IDs in the component HTML. 3 | Another way is to apply styles in the TypeScript code, using the `css` property of the `Page` component. 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/style-css-file/article.md: -------------------------------------------------------------------------------- 1 | Add style using CSS file 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/style-css-file/style-css-file.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/style-css-file/style-css-file.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./style-css-file.component.html", 6 | styleUrls: ["./style.css"] 7 | }) 8 | export class StyleCSSFileComponent { 9 | public counter: number = 16; 10 | 11 | public get message(): string { 12 | if (this.counter > 0) { 13 | return this.counter + " taps left"; 14 | } else { 15 | return "Hoorraaay! \nYou are ready to start building!"; 16 | } 17 | } 18 | 19 | public onTap() { 20 | this.counter--; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/style/style-css-file/style.css: -------------------------------------------------------------------------------- 1 | /* >> style-via-css */ 2 | button, label, stack-layout { 3 | horizontal-align: center; 4 | } 5 | 6 | button { 7 | font-size: 30; 8 | } 9 | 10 | .title { 11 | font-size: 25; 12 | margin: 20; 13 | } 14 | 15 | .message { 16 | font-size: 20; 17 | color: #284848; 18 | text-align: center; 19 | margin: 0 20; 20 | } 21 | 22 | #labelStyle{ 23 | background-color: #FFFF66; 24 | } 25 | /* << style-via-css */ -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/switch/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/switch/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/switch/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Switch 3 | description: The Switch component represents control, which can have two states('true', 'false'). The user can toggle the components value. The modules allow setting and getting its value via the checked property or checkedChange method. 4 | position: 41 5 | slug: switch-ng 6 | --- 7 | example-order: usage, styling 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/switch/overview.md: -------------------------------------------------------------------------------- 1 | The `Switch` component allows users to toggle a control between two states. 2 | The default state of the component is off, or `false`, however you can change the state by setting the `checked` property to a boolean value. To handle the state change event you can use the `checkedChange` property, which notifies the app when the value has changed. 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/switch/styling/article.md: -------------------------------------------------------------------------------- 1 | The styling properties for the `Swtich` control are as follows: 2 | - `color`- Controls the handle color 3 | - `backgroundColor`(`background-color` in CSS) - Controls the background color while the switch is in **ON** state. 4 | - `offBackgroundColor` (`off-background-color` in CSS) - Controls the background color while the switch is in **OFF** state. 5 | 6 | 7 | 8 | > Note: When using `@nativescript/theme` the default style will be set according to the used theme (no need to set additional CSS classes). 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/switch/styling/styling-switch.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/switch/styling/styling-switch.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./styling-switch.component.html" 6 | }) 7 | export class StylingSwitchComponent {} 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/switch/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/switch/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/switch/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> switch-event-handle-code 2 | import { Component } from "@angular/core"; 3 | import { EventData, Switch } from "@nativescript/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./usage.component.html" 8 | }) 9 | export class BasicSwitchComponent { 10 | 11 | onCheckedChange(args: EventData) { 12 | let sw = args.object as Switch; 13 | let isChecked = sw.checked; // boolean 14 | } 15 | } 16 | // << switch-event-handle-code 17 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tab-view/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/tab-view/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tab-view/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TabView 3 | description: The TabView modules allow navigating between different views by tapping on some of the tabs or by swiping between the views. The component provides the needed functionality for setting up the active tab via the selectedIndex property and handling the tab change event via selectedIndexChangedEvent. We can also specify the number of the preloaded tabs for android with androidOffscreenTabLimit property and the tabs position with the androidTabsPosition property. 4 | position: 42 5 | slug: tab-view-ng 6 | --- 7 | example-order: usage, styling, tips-and-tricks 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tab-view/overview.md: -------------------------------------------------------------------------------- 1 | 2 | > Important: With version 6 of NativeScript the `TabView` component is deprecated. Consider using `BottomNavigation` or `Tabs` components instead as these components are providing much greater control and functionalities. 3 | 4 | The `TabView` component provides a simple way to navigate between different views by tapping on some of the tabs or by swiping between the views. 5 | By default the `TabView` will load the view of the first tab, however it's possible to load alternative tabs when the app starts by setting the component’s `selectedIndex` property. 6 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tab-view/styling/article.md: -------------------------------------------------------------------------------- 1 | The `TabView` component provides several unique styling properties as shown in the example below. 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tab-view/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./styling.component.html", 6 | }) 7 | export class StylingComponent {} 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./tips-and-tricks.component.html", 6 | }) 7 | export class TipsAndTrciksComponent {} 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tab-view/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> tab-view-require 2 | import { Component } from "@angular/core"; 3 | import { SelectedIndexChangedEventData } from "@nativescript/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./usage.component.html" 8 | }) 9 | export class BasicTabViewComponent { 10 | onSelectedIndexchanged(args: SelectedIndexChangedEventData) { 11 | let newIndex = args.newIndex; 12 | } 13 | } 14 | // << tab-view-require 15 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tabs/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tabs 3 | description: The NativeScript's Tabs component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for BottomNavigation is a mid level navigaiton with unlimited tabs and common functions.The component supports swipe gestures and preloading. 4 | position: 42 5 | slug: tabs-ng 6 | --- 7 | example-order: usage, styling -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tabs/styling/styling.component.css: -------------------------------------------------------------------------------- 1 | /* >> tabs-theming-css-ng */ 2 | TabStrip { 3 | selected-item-color: blueviolet; 4 | un-selected-item-color: brown; 5 | highlight-color: gold; 6 | } 7 | 8 | TabContentItem.first-tabcontent { 9 | background-color: seashell; 10 | color: olive; 11 | } 12 | TabContentItem.second-tabcontent { 13 | background-color: slategray; 14 | color: aquamarine; 15 | } 16 | TabContentItem.third-tabcontent { 17 | background-color: blueviolet; 18 | color: antiquewhite; 19 | } 20 | /* << tabs-theming-css-ng */ -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tabs/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./styling.component.html", 6 | styleUrls: ["./styling.component.css"] 7 | }) 8 | export class TabsStylingComponent { } 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tabs/usage/article.md: -------------------------------------------------------------------------------- 1 | The `Tabs` component contains two sub-components: 2 | - The `TabStrip` which defines and renders the bottom bar and its `TabStripItem` components. 3 | - Multiple `TabContentItem` components which total number should be equal to the number of the tabs (`TabStripItem` components). Each `TabContentItem` acts as a container for your tab content. 4 | 5 | 6 | 7 | > **Note:** The number of `TabStripItem` components must be equal to the number of `tabContentItem` components. 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/tabs/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./usage.component.html" 6 | }) 7 | export class UsageComponent { } 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-field/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/text-field/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-field/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TextField 3 | description: TextField component is an abstraction over iOS's UITextField and Android's widget.EditText, which allows the user to type a text in the app. The module provides some specific properties like `secure` and `autocapitalizationType`, which helps to set up further the control. 4 | position: 43 5 | slug: text-field-ng 6 | --- 7 | example-order: usage, styling 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-field/overview.md: -------------------------------------------------------------------------------- 1 | The TextField component allows you to type text in your app. The TextField has attributes such as `secure` for handling password fields, and `pipes` for specifying the text format the control should use. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-field/styling/article.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-field/styling/styling.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-field/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | templateUrl: "./styling.component.html" 6 | }) 7 | export class StylingComponent { } 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-field/usage/article.md: -------------------------------------------------------------------------------- 1 | TextField provides multiple properties and several events for handling the user input and interaction. 2 | To submit a value use the `returnPress` event along with the `returnKeyType` property. 3 | To handle a TextField being focused use the `focus` event. 4 | To handle an interaction when the user leaves TextField use the `blur` event. 5 | To explicitly show and hide a keyboard, we can call the methods `focus` and `dismissSoftInput`. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-field/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-view/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TextView 3 | description: TextView component is an abstraction over iOS's UITextView and Android's widget.EditText, which allows the user to type a large text in the app. We can enable or disable the typing via the `editable` property 4 | position: 44 5 | slug: text-view-ng 6 | --- 7 | example-order: usage, styling -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-view/overview.md: -------------------------------------------------------------------------------- 1 | The `TextView` component can be used to type larger text content in your app. The component can also be used show any content by setting the `editable` property to `false`. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-view/text-view-examples.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from "@angular/core"; 2 | import { Link } from "./../../link"; 3 | 4 | let menuLinks = [ 5 | new Link("Usage", "/text-view/usage") 6 | ]; 7 | 8 | @Component({ 9 | moduleId: module.id, 10 | templateUrl: "./../../examples-list.component.html", 11 | changeDetection: ChangeDetectionStrategy.OnPush 12 | }) 13 | export class TextViewExamplesComponent { 14 | public links: Array; 15 | 16 | constructor() { 17 | this.links = []; 18 | 19 | for (let i = 0; i < menuLinks.length; i++) { 20 | this.links.push(menuLinks[i]); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-view/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-view/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/text-view/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> textview-edit-disable-code 2 | import { Component } from "@angular/core"; 3 | import { EventData, TextView } from "@nativescript/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./usage.component.html" 8 | }) 9 | export class UsageComponent { 10 | tvtext = ""; 11 | 12 | onTextChange(args: EventData) { 13 | const tv = args.object as TextView; 14 | console.log(tv.text); 15 | } 16 | } 17 | // << textview-edit-disable-code 18 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/time-picker/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/time-picker/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/time-picker/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TimePicker 3 | description: TimePicker is UI control, which allows choosing a time from a ready-to-use dialog. The time for the component can be set or get via its corresponding section of the control(for hour, minutes and AM/PM). In the example is demonstrated, how to set up, time range via its minHour and maxHour properties. 4 | position: 45 5 | slug: time-picker-ng 6 | --- 7 | example-order: usage, styling -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/time-picker/overview.md: -------------------------------------------------------------------------------- 1 | NativeScript provides a `TimePicker` control that enables users to choose a time as a ready-to-use dialog. Every time part can be picked separately by its corresponding section of the control - for hour, minutes and AM/PM. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/time-picker/usage/article.md: -------------------------------------------------------------------------------- 1 | The `TimePicker` component can be configured by `hour` and `minute` (accepts `number` values) or alternatively by setting the `date` property (accepts a `Date` object). 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/time-picker/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/time-picker/usage/usage.component.ts: -------------------------------------------------------------------------------- 1 | // >> time-picker-configure-code 2 | import { Component } from "@angular/core"; 3 | import { TimePicker } from "@nativescript/core"; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | templateUrl: "./usage.component.html" 8 | }) 9 | export class UsageComponent { 10 | todayObj: Date = new Date(); 11 | 12 | onTimeChanged(args) { 13 | const tp = args.object as TimePicker; 14 | 15 | const time = args.value; 16 | console.log(`Chosen time: ${time}`); 17 | } 18 | } 19 | // << time-picker-configure-code 20 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/web-view/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NativeScript/nativescript-sdk-examples-ng/4d1e4a1f2f2cd0108c2129e155b9168e76d277c0/app/ng-ui-widgets-category/web-view/image.png -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/web-view/metadata.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: WebView 3 | description: The WebView module allows loading Web page inside a NativeScript Angular application or displaying static HTML content with rich CSS. The component can be used for more advanced scenarios and for displaying dynamic HTML content. 4 | position: 46 5 | slug: web-view-ng 6 | --- 7 | example-order: usage, tips-and-tricks -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/web-view/overview.md: -------------------------------------------------------------------------------- 1 | The `WebView` component is used to display web content within your application. You use the control by providing a `src` attribute that accepts a URL,a path to a local HTML file or directly HTML string. 2 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/web-view/tips-and-tricks/article.md: -------------------------------------------------------------------------------- 1 | ### Gestures in WebView 2 | 3 | 4 | 5 | 6 | > **Note:** To be able to use gestures in `WebView` component on Android, we should first disabled the zoom control. To do that we could access the `android` property and with the help of `setDisplayZoomControls` to set this control to `false`. 7 | 8 | ### Using HTML file & strings 9 | 10 | 11 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/web-view/tips-and-tricks/tips-and-tricks.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/web-view/usage/article.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | In the above samples, we are setting up `loadStarted` and `loadFinished` events. Both events will be emitted when there is a change the source for the `WebView` component (change the URL or load local HTML file). The `loadStarted` event will be executed when the WebView source start loading and `loadFinished` will be fired when the source is already loaded. The events will return info of type `LoadEventData`. -------------------------------------------------------------------------------- /app/ng-ui-widgets-category/web-view/usage/usage.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/platform.android.css: -------------------------------------------------------------------------------- 1 | /*.example-container { 2 | font-size: 15; 3 | padding: 16; 4 | } 5 | 6 | .label-item { 7 | vertical-align: center; 8 | } 9 | 10 | TextField, TextView { 11 | margin-top: 10; 12 | padding: 8; 13 | min-height: 38; 14 | font-size: 15; 15 | text-align: justify; 16 | }*/ -------------------------------------------------------------------------------- /app/platform.ios.css: -------------------------------------------------------------------------------- 1 | /*.example-container { 2 | font-size: 15; 3 | padding:15 4 | } 5 | 6 | Page Button { 7 | background-color: #30BCFF; 8 | color: #FFFFFF; 9 | margin-top: 10; 10 | margin-bottom: 10; 11 | height: 38; 12 | font-size: 15; 13 | border-radius: 2; 14 | } 15 | 16 | Button { 17 | font-size: 15; 18 | } 19 | 20 | TextField, TextView { 21 | border-color: lightgray; 22 | border-width: 1; 23 | border-radius: 2; 24 | margin-top: 10; 25 | height: 38; 26 | font-size: 15; 27 | padding-left: 8; 28 | } 29 | 30 | ListView { 31 | padding: 15; 32 | font-size: 15; 33 | }*/ -------------------------------------------------------------------------------- /build-docs.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -e 3 | 4 | rm -rf dist 5 | npm install 6 | npm run build 7 | -------------------------------------------------------------------------------- /nativescript.config.ts: -------------------------------------------------------------------------------- 1 | import { NativeScriptConfig } from '@nativescript/core' 2 | 3 | export default { 4 | id: 'org.nativescript.nativescriptsdkexamplesng', 5 | appPath: 'app', 6 | appResourcesPath: 'app/App_Resources', 7 | android: { 8 | v8Flags: '--expose_gc', 9 | markingMode: 'none', 10 | }, 11 | } as NativeScriptConfig 12 | -------------------------------------------------------------------------------- /references.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | --------------------------------------------------------------------------------