NativeScript + Angular: Build Native iOS, Android & Web Apps

Explore Angular as a client-side JavaScript framework that runs in the browser, uses TypeScript to power engaging and reactive user interfaces, and simplifies routing, HTTP requests, and state management.

Install and set up an Angular project using the Angular CLI (Seelie), install Node.js and npm, and create a new project with optional routing and default styling.

Install Visual Studio Code, apply a dark theme, install Angular Essentials and Material extensions, then run ng serve to preview your Angular app at localhost:4200.

Explore the Angular project folder structure, focusing on the source folder, app module and component, and how the module decorator, browser module, declarations, and bootstrap configure startup.

Create your first Angular component by adding a persons component, decorate with @Component, declare it in the app module, and use the app-persons selector in the app's HTML.

Learn how to pass data from the app component to the child persons component using Angular property binding and the @Input decorator, enabling a shared list of strings.

Configure a new person-input component to handle user input, register it in the app module, and render a labeled input with a create button above the list of persons.

bind a click event in angular using the data binding syntax and a component method such as on create user, then log and process user input to create a person.

Discover Angular template local references by using a hash tag to reference HTML element, pass its value as a string to a method, and create a person from the input.

Learn how two-way binding with Angular ngModel synchronizes input values and component properties, enabled by the forms module, to read and update data in real time.

Implement routing to render different components via paths and a router outlet, mapping routes for the person and person input components, and use services to pass data between views.

Inject the person service via the constructor, call the addPerson method with the entered name, and observe the updated persons array to confirm the addition and navigation considerations.

Implement a remove person feature by filtering the array by name, wiring a click listener on a list item, and calling the service to update the list in Angular.

Learn how to send http requests in Angular by fetching data from a public API, using the HttpClient, observables, subscribe, and map to extract names.

Set up macOS native script environment for iOS and Android; install Node.js, npm, the native script CLI, Xcode, Android Studio, and VS Code, then create and run an Angular project.

Explore NativeScript fundamentals and how the Angular app starts and runs behind the scenes, then learn to build native interfaces using core UI elements, layouts, styling, and debugging.

Explore starting emulators for native iOS, Android, and web apps with NativeScript + Angular, using the integrated VS Code terminals to run in watch mode, build, and test.

Explore how NativeScript loads and mounts Angular apps, connects logic to views, and uses layouts and built-in widgets to build cross-platform iOS, Android, and web interfaces.

Build and declare your first NativeScript Angular component, use a stack layout and label to show the current challenge name, and render it in the app for Android and iOS.

Learn to build basic interactions using the text field widget, two-way binding with ngModel, and a tap button to display entered text in a NativeScript Angular app.

Learn to style a button and text field in native apps by applying theme-wide and component-specific styles, using class selectors, font, colors, margins, borders, and responsive width.

Explore how the stack layout arranges items vertically by default or horizontally, and apply horizontal and vertical alignment to children. See a stack component with colored labels to visualize placement.

Learn how to use the absolute layout to position overlapping elements with top and left, and know when to apply it alongside stack, grid, and flex layouts.

Position input field and button with a two-column grid layout, using auto height for the first row and star sizing for the second, placing the output in the new row.

Learn to set up NativeScript Angular routing with an app routing module, define roots and an empty path, and navigate between pages using the NativeScript router module.

Learn to implement forward and backward navigation in NativeScript with a page wrapper and page router outlet, enabling proper back button behavior and native transitions on Android and iOS.

Learn to use the nsRouterLink directive with NativeScript and angular to enable navigation via the router link directive, including options like clear history with property binding.

Add a native action bar with a page title for iOS and Android, include a navigation back button, and customize it with an Android system icon and color.

Override the default Android navigation by applying a slide left transition via a transition object for programmatic routing. Hide the back button on today page to prevent the toolbar jump.

Add a TabView component to create two taps, today and current challenge, configure tab titles, and render nested routes inside the taps page with a router outlet.

Learn to implement dynamic routing in tabs using named page router outlets, assign outlet names, and configure nested routes so two routes load simultaneously and display the correct content.

Learn to add a sidedrawer icon in a NativeScript + Angular app, configuring an Android navigation button and iOS action item with asset icons.

Render the navigation button only on Android while showing the action item on iOS by using an Android check and ngIf, ensuring the action bar buttons connect without errors.

Discover how to pass dynamic data in a NativeScript + Angular app by using a dynamic mode parameter and nested routes, then read mode in the loaded component.

Read dynamic route parameters in Angular and NativeScript by injecting activated route, accessing the paramMap for the mode parameter, and subscribing to changes, while using pageRoute to handle caching.

Inject dynamic values into the action bar on a per-page level by using page router outlet and ng-content to project page-specific actions, ensuring the action bar updates with navigation.

Learn how to open a full-screen modal in NativeScript Angular by using the modal dialog service to load a Day modal component, pass data, and manage the view container ref.

Expose the root view container ref via a UI service, then set and get it from the app component, enabling modals, data passing, and closing in NativeScript Angular.

Learn to pass data into a NativeScript Angular modal using a context object, access parameters, handle a date value, and return results with close in TypeScript.

Explore lazy loading in angular routes, loading code only when needed to speed startup and improve performance in large apps, with examples like the challenges block and its components.

Implement lazy loading by creating a feature module and configuring loadChildren for the challenges module. Share the action bar via a shared module to support lazy-loaded components.

Wrap up by reviewing routes and navigation across native and web contexts, including router outlets, tabs, and a side drawer, with dynamic data loading and data passing.

Enhance the app’s look by adding user interface elements, styling, and theming with platform-specific styles for iOS and Android, core styles, colors, fonts and font families, icon fonts, and images.

Explore organizing NativeScript and Angular apps with platform-specific files and a shared common file to apply platform-specific styling while sharing code across Android and iOS.

Discover how NativeScript translates CSS rules into native UI updates and why some web properties behave differently. Learn about dynamic class binding, specificity, and debugging styling issues in apps.

Apply built-in native script themes and predefined CSS classes to quickly style buttons, forms, and text, while switching themes to change colors and typography.

Create a calendar-style current challenge view listing days of month (1–31 or 1–30), with a take a walk description of 20 minutes per day, centered text, and a flexbox grid.

Build a dynamic grid calendar in NativeScript and Angular, with a seven-column header for weekdays and day circles, and populate the days of the current month using a date trick.

Populate the grid by labeling each day and computing its row and column. Use the month's start weekday and the current year and month to position days accurately.

Fix the sidedrawer button and add font awesome icons to the menu and action bar in a NativeScript + Angular app, using icon fonts and platform-specific tweaks.

add a custom font by moving Oswald bold and regular into the fonts folder and applying the font family to headings and labels across the page.

Learn to add font awesome icons to apps by downloading, converting SVGs to PNGs, and wiring menu, trophy, and check icons into the UI for Android and iOS.

Wrap up the module by styling in NativeScript with Angular, adding images, font icons, a custom font, platform-specific styles, CSS selectors, and enabling user input to edit a challenge.

Learn how to configure form inputs in NativeScript with Angular, switching a text field to a multiline text view, setting keyboard behavior, validators, and template-driven validation using ngModel.

Learn to implement form validation in NativeScript Angular apps by applying conditional styling with ngClass to show invalid fields in red and disable the submit button when inputs are invalid.

Validate the description TextView with the engy model directive, apply the invalid class, show an error, and enable the submit button only when both title and description controls are valid.

Learn to build reactive forms in angular by configuring form groups and controls in the component, then bind them to the template with formGroup, formControlName, validators, and update on blur.

Utilize reactive forms to monitor email and password validation, show dynamic validation text in the template, and enable the submit button only when the form is valid.

Learn to handle user input with template-driven and reactive forms, validate text fields, manage focus, and read local references to display errors and prepare data for backend submission.

Explore how to manage application state with Angular services and models, enabling create and update actions that reflect in the user interface, with later server persistence.

Implement an app-wide challenge service in Angular using injectable and provided in root, manage the current challenge with a BehaviorSubject and a typed challenge model.

Inject the challenge service and subscribe to its behavior subject to access the current challenge, guard the UI with a no-challenge fallback, and provide a router link to create one.

Explore how the today page manages state with the challenge service, subscribes to current day updates, and displays the date and status for today's challenge.

Learn to update today's day status in a NativeScript Angular app by importing day status, emitting completed, failed, or open, and updating via the challenge service.

Reflect the day state on action buttons by rendering an alternate button when an action is chosen (complete or fail), using a 60-pixel stack layout and a Font Awesome checkmark.

Open the modal from the current challenge component, choose a day status in the challenge actions, and update and reflect the new status (open, complete, or failed) in the template.

Bind an external chosen value to reflect the current day status (complete or fail) and handle ngOnChanges to update the action name and UI accordingly.

Disable the edit button when there is no current challenge by conditionally rendering the action item with an ngIf check, and confirm the edit option reappears after creating a challenge.

Learn to send http requests from a NativeScript + Angular app to a backend server to persist data in a server database, ensuring data survives device changes.

Fetch the current challenge from the Firebase backend using Angular's http get, show a spinner while awaiting the response, and navigate on success or handle errors.

Display fetched data by using a service with rxjs pipe and the tap operator, initialize a loaded challenge model, and emit updated data for iOS, Android, and web apps.

Extract the update logic into a private save-to-server method and send updates or new challenges to the server. Reuse this path for update and create, and refresh state after fetch.

Send http requests from a NativeScript app using the Angular web client, extract data, show a loading spinner, ensure navigation after data loads, and secure the app with authentication.

Learn to implement authentication in a NativeScript and Angular app using Firebase or any authentication API, manage user status, and store a user-specific active challenge.

Learn how Firebase authentication uses a token-based approach with email and password, store the ID token on the front end, and attach it to every request to secure your calls.

Manage the authenticated user in the auth service with a private behavior subject and a user observable. Reuse signup and login logic to emit the token, user id, and expiration.

Refine token handling by checking existence and expiration with the current date, returning null if invalid, and store user data on disk to auto-login for authenticated requests.