60-120 with NativeScript + Angular

Thank you sponsors!!!

About Me

NativeScript developer @FocustApps

Open Source Contributor

  • NS Market Samples
  • GitHub Issues
  • NS Community Slack


  • Review
    • Angular vs NS Differences
    • Angular vs NS Similarities
    • Code Sharing
  • Demo
    • Event Binding (tap)
    • Navigation with Parameters
    • 1 Way Binding
    • 2 Way Binding


Component Lifecycle


NativeScript has its own RouterModule which extends the Angular RouterModule

Which provides the following:

  • Back Navigation Handling
  • Mobile Navigation Lifecycle
  • Mobile Specific History
  • Http Client


    Workflow / Adding New Pages

    1. Create a folder inside of /src/app directory
    2. Add a code behind file (add-car.component.ts)
    3. Add a template file (add-car.component.html)
    4. Add a styling file (add-car.component.css|scss)
    5. Import the component into your (app.module.ts)
    6. Add a routing path in your (app-routing.module.ts)


    Code Behind


    Type Syntax
    1 Way [text]="productNumber"
    1 Way (cont) [color]="isPaid ? 'green' : 'red'"
    Interpolation text="Total price is {{totalPrice}}."
    2 Way [(ngModel)]="userName"
    Event (tap)="someMethod(params,...)"


    • CSS
    • SASS

    Code Sharing

    How can I have multiple template files for 1 code behind file?

    Build Process

    Demo Time!

    What We'll Make

    Link to follow along: https://bit.ly/32CzP83

    Additional Resources