Exploring the New Template Syntax

  1. Repeating Data with ngFor
  2. Handling Null Values with the Safe-Navigation Operator
  3. Hiding and Showing Content with ngIf
  4. Hiding Content with the [Hidden] Binding
  5. Hiding and Showing Content with ngSwitch
  6. Styling Components with ngClass
  7. Styling Components with ngStyle

1   Repeating Data with ngFor

Finished project screenshot/code:

Starter Project:
https://plnkr.co/edit/6eGck1qHhvRvxua5pcl3?p=info

Finished Project:
https://plnkr.co/edit/eZkde29p1BCFJzDMftTy?p=info


2   Handling Null Values with the Safe-Navigation Operator

If the data in the previous example is missing we will get errors. The display is OK but to prevent errors we use “calls?”.
Starter Project:
https://plnkr.co/edit/6eGck1qHhvRvxua5pcl3?p=info

Finished Project:
https://plnkr.co/edit/eZkde29p1BCFJzDMftTy?p=preview


3   Hiding and Showing Content with ngif

If for example the call length is some times omitted we could use ngIf to not show the call length field, like:

<div *ngIf="call?.length>
   Length:{{call?.length}}
</div>

Without the use of *ngIf:

Starter Project:
https://plnkr.co/edit/opblRmYNLz6DUd9B6k87

Now using *ngIf to remove the field when the location is missing:

Finished Project:
https://plnkr.co/edit/RJt5aUTIjX3NtH2ZdSdV?p=info

Routing and Navigating Pages

An Angular application runs as a SPA (Single Page Application). The  first page loaded, usually index.html  is displayed and on a simple application will never be changed. Inside this page the root component is loaded, in our case app.component is shown. So how do we change pages?

In the traditional browser setup as we navigate from page to page a completely new page is requested with a http request to the serve. In a SPA only part of the page which has new content is  updated by replacing the root component  with another component.The SPA  has many advantages over the traditional setup.

  • New pages are generated with partial page updates
  • Serve traffic is reduced
  • The application becomes more responsive

How this is done is the subject of routing and navigation.

Angular Starter Kits

A starter kit is a living , automated, and interactive checklist.

Having worked many years in aerospace and from my training as an engineer I have learnt that checklists are a simple and effective tool to complete processes, requiring many steps and needing to be applied consistently and in sequence .

Angular-CLI Starter Kit, Developing in TypeScript

Checklists:
  1. Setting up a Windows development environment
  2. Setting up an IDE -Visual Studio Code

1 :   Setting up a Windows development environment

  1. Download and install node and npm
  2. Check installation versions
  3. Install Angular-CLI globally
  4. Create a starter project. Change to the working directory
  5. Serve the application (display in browser): http:// localhost: 4200/
  6. To stop the server ctr + c and at the prompt “Terminate batch job (Y/N)?” type y. You will not be able to continue to open Visual Studio Code or any other commands until the server has terminated. You can also continue without terminating the server by opening another command window in this directory.

2 :   Setting up an IDE – Visual Studio Code

  1. Download and install Visual Studio Code (Free Editor)
  2. View the project in the IDE “code  .” (note space and period)
  3. The project in Visual Studio Code

How to work in VS Code will be a whole other topic to blog about. Stay tuned! 🙂


Online reference:
CLI Quickstart
A command line interface for Angular

Building an Angular Development Environment

This is a big topic that can prove overwhelming. We will tackle it in small bites. First looking at the minimum setup to get going and then gradually exploring deeper into the various options and how to pick the best combination of current technologies to match your individual needs. To fully explore the topic we really have to look at building a JavaScript development internment.

Angular-CLI Starter Kit, Developing in TypeScript

As of the time of writing, this is currently the simplest and quickest environment to setup. It has now become relatively stable and quite usable for development work.

Setting up a Windows development environment
Developing Angular 2 web apps with TypeScript

Binding Syntax – A Review of Template Syntax

Data Binding is the communication between the DOM and the Component and maybe classified into four different types:

  1. Interpolation
  2. One Way Binding
  3. Event Binding
  4. Two Way Binding

Interpolation

Communication Directions: To the DOM from the component

Syntax: {{ student.name}}  and would display the students name:

Student Name: Jane Doe

import { Component } from '@angular/core'

@Component({
    selector:'student-data',
    template:`
       <div> Student Name: {{student.name}} </div>
    '
 })
 export class StudentDataComponent(){
    student: IStudent = {
       name:"Jane Doe",
       email:"jane@gmail.com",
       cell:"453-123-1212"
    }
 }

One Way Binding

Communication Directions: To the DOM from the component

Syntax:

<h3 [innerText]= "student.name" ></h3>

 and would display the students name:  Jane Doe

Example #1

<div [style.visibility]= "isRabbit? 'visible':'hidden'">
   <img [src]="imagePath">
   <br/>
   <a [href]="link">{{rabbit}}</a>
</div>
  • Any HTML Element Property

Event Binding

Communication Directions: From the DOM to the component

Syntax:   <button (click) = “onClick” > OK </button>

import { Component } from '@angular/core'

@Component(
   { selector: 'button-message', 
     template: ` 
       <button (click) = "onclick()"> OK </button> ` 
   }) 
export class ButtonMessageComponent { 
   OnClick(){ console.log("Logging OK button click") 
   } 
}

Two Way Binding

Communication Directions:  To and from the DOM to and from the component.

Syntax:   <input [(ngModel)] = {{student.name}}>

This can be remembered as banana in a box it is short hand for a combination of the two bindings “one way” and “event”. It is a great performance improvement over the AngularJS two way binding.

<input [(ngModel)]= {{student.name}}>

Online Reference: Binding syntax overview

Online Example: Code