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

Recognize this module as optional and skip it if you already know Angular. Learn what Angular is, how it works, and how we will use it for this course.

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.

Explore how Angular builds single-page web apps and, with NativeScript, delivers native mobile experiences by bundling TypeScript into JavaScript for reactive, offline-capable UI that connects to data behind the scenes.

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.

Explore the app component in Angular, detailing the component decorator, selector, template, and styles, and how Angular bootstraps and renders it in the DOM.

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.

Learn to render a list of persons in an Angular template by using property binding, the *ngFor directive, and string interpolation to display each list item from the person list.

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.

Define an Angular service to share data between components using @Injectable and providedIn: 'root'. Implement dependency injection to inject the service into components and add a person to an array.

Use dependency injection to inject the person service into a component via the constructor, then assign the service's list of persons to the component's list for rendering.

Discover how to use Angular life cycle hooks, especially on init, to initialize a component, inject a person service, and manage data flow with constructor patterns for testable code.

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.

Navigate between components in NativeScript + Angular apps by using the routerLink directive to bind to target routes, replacing anchor tags and avoiding page reloads for seamless navigation.

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.

Learn how to show a loading placeholder while awaiting data in an angular app by toggling an isFetching boolean and using the ngIf directive to display a spinner or content.

Wrap up the course by reinforcing Angular basics, and guide learners to official docs and an Angular guide for mastery of architecture, user inputs, validation, dependency injection, and observables.

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.

Set up native script on Windows by installing node.js and the native script, install Android SDK and JDK, configure the emulator, and create an Angular hello world project.

Learn why extra .js files appear in a NativeScript + Angular setup: TypeScript compiles to JavaScript, and these files can be ignored or deleted since they’re automatically recreated.

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.

Discover how NativeScript builds a real native app package, bootstraps the Angular app, and wires Angular logic to native views via the NativeScript module and router module.

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.

Understand the four core native script layouts—stack, grid, flex box, and absolute—learn how to nest layouts, compare one- and two-dimensional positioning, and preview dock layout and wrap layout.

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.

Master the grid layout by defining rows and columns and assigning items to cells. Use auto, star, and absolute sizes, plus row/column spanning to create flexible layouts.

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.

Split an Angular app into reusable components, such as challenge edit and challenge added. Move input and output logic into separate components and use Angular CLI to generate them.

Refactor the app to manage a list of string challenges, add items via a button, and render each item with ngFor in NativeScript + Angular project, enabling a scrollable list.

Wrap your stack layout in a scroll view to enable vertical or horizontal scrolling on small devices. Learn how virtualization renders only visible items, improving performance for long lists.

Discover how the NativeScript list view renders long lists with virtualization, binding to an items array, optional item tap handling, and Angular templates to lay out each item.

Learn to extract and render dynamic values in a NativeScript + Angular app by using list view templates with let dash, item, and index, and apply estimatedHeight for stable layouts.

Explore stack-based navigation in mobile apps, with push and pop of pages, the topmost view, and back navigation—plus DTAP-based navigation with tabs and a side drawer.

Plan the app navigation in a NativeScript Angular project, implementing login, side drawer, bottom tabs, modals, and pages for daily challenges across Android and iOS.

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.

Add a new route for the today page in the global routes, import and declare the component, then navigate with the Angular router using an absolute /today path.

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 how NativeScript's router object extends the Angular router to enable stack-based navigation, with navigate configurations like animated routes and clear history to prevent back navigation on specific pages.

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.

Implement a dynamic back button in a NativeScript + Angular app using a canGoBack getter and the router to navigate back when possible.

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.

Highlight the currently active tab in the tab view by using Android-specific highlight color and selected tab text color, with kebab-case properties and a hex color.

Add a side drawer to a NativeScript Angular app using the UI side drawer plugin, including installation and template integration, with notes on Android bundle issues.

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.

Implement logout logic with a router link and clear history, close the side drawer on logout, and bind has menu to pass data between routes via the app component.

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.

Learn how to apply no errors schema in all modules when using NativeScript UI elements, so Angular accepts non-default HTML elements and eliminates warnings.

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 CSS in NativeScript with Angular, covering type, class, and attribute selectors, hierarchical and pseudo selectors, font usage, and the supported styling properties to craft native UI.

Explore adding styles in native script with component-scoped styles and a global app.css, and apply platform-specific inline styles using iOS Colen and Android Colen prefixes.

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.

Design and implement today's challenge controls with green complete, red failed, and neutral reset buttons, centered using a flexbox layout, and styled via theme colors and flat button variations.

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.

Style the weekday grid using weekday label and day classes, theme colors, borders, and circular markers; wrap days in a responsive flex/grid layout and support states like completed and failed.

Tap a day to open a modal, then reuse a shared challenge actions component with a white flex box background for today and the modal, supporting complete, fail, and cancel.

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 integrate images into a NativeScript app using the image builder. Configure Android and iOS resources, and load images with the image element or set a background image.

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.

Improve the logout button by widening it to 80 percent, increasing font size to 24, and setting height to 45 within the drawer container’s app component HTML.

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.

Wire a tap listener to an on submit method, read title and description from form controls, and navigate back after saving with router extensions in Angular NativeScript.

Add a login form by implementing email and password inputs using a reactive forms approach, configuring keyboard types, auto correct, and secure text, and introducing basic validation hints.

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.

Learn to validate and read form values in a NativeScript Angular form using a form group and get('email') and get('password'), with submit handling and blur management.

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.

Learn to manage navigation to the challenges area and handle an active challenge by creating, replacing, and editing days in the past or today with a dedicated service.

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.

Define a challenge model and a day model in TypeScript, using constructor shorthand for properties, a days array, a day status enum, and integration with the current challenge service.

Create a new challenge in the challenge service by constructing it with title, description, year, and month, then emit it via a behavior subject and expose it as an observable.

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.

Inject the challenge service to create new challenges with title and description, bind current challenge data dynamically, and display the current challenge on the current challenge tab.

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.

Implement update day status logic by fetching the latest challenge with take(1), locating the day by day and month, updating its status, and emitting a new 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.

Learn to add S.O.S animations in native script by defining keyframes, naming the animation slide up, and using translate Y to move elements during a controlled duration.

Implement get is sellable to show only future days as clickable, then use ng class to mark not suitable past days and open modals only for suitable days.

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.

Change the cancel logic in the modal by passing day status into the day model, enabling completed or failed states and preserving the current value on cancel.

Reset today’s state by handling null chosen values and replacing the current day when a new challenge appears, ensuring done is false and actions update correctly.

Update an existing challenge by pre populating title and description via two-way binding, switching to editing mode, and using the challenge service to update or create 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.

Leverage NativeScript with Angular to reuse web logic, building and updating a challenge service with day models and generated days. This enables cross component communication and effective state management.

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.

Sign up for Firebase and set up a real-time database through the Firebase console, gaining a full backend service with a rest API you can call from your app.

Store a new challenge in Firebase by posting via the NativeScript Angular HTTP client in the challenge service, appending .json, overwriting existing data, and subscribing to the response.

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.

Fix the disabled state of the failed button in the today component by adding a start done input and wiring engine changes to disable on initial load.

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.

Implement a single Angular auth service to sign up and login users, sending post requests with email and password to Firebase, using a Firebase API key and dependency injection.

Sign up and log in users with Firebase authentication using email and password, handling tokens and post requests, then show a loading indicator and navigate only after successful login.

Learn to implement centralized error handling for login and signup in a NativeScript + Angular app, catching firebase errors and showing native alerts for email exists or invalid password.

Create a user model to manage email, user id, and a private id token, compute its expiration, and prepare storing it for attaching to a protected resource.

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.

Implement automatic logout by calculating token expiry and triggering a timer to log out on expiry. Ensure timer cleanup and correct scope to preserve user experience.

Implement a canLoad authentication guard to protect lazy-loaded routes in a NativeScript + Angular app, redirecting unauthenticated users to login or the off page.

Implement automatic login by checking a stored token and device storage data, enforce logout on expiry, and guard startup redirection with token-based authentication that works with any API.