Monday, May 9, 2016

Catchups on Angular2 and TypeScript

How to define arrays in the interface and class properties in TypeScript
How-to's on using services, router and templates in Angular2

and many more coming...

1. How to define Array of complex items in interface

// see: 
 interface TodoItem {
   value: string; 
   created_at: Date; 
   completed?: boolean; 

interface TodoList {
  todos: Array< TodoItem > 

2. How to define class properties
export class MyClassService { 
  private NEWS_URL: string = '';
  public static NEWS_URL_2: string = '';

3. How-to's on using services in angular2
4. How-to's on angular2 Router syntax:

  • template link declaration
<a [routerLink]="['./STATE_NAME', {STATE_PARAM: 4}]">LINK_TEXT</a>
  • necessary imports in component
import {Router} from 'angular2/router';
import {RouteParams} from 'angular2/router';

  • component class syntax for accessing route params
  id: number;
  constructor(private _params: RouteParams) { = _params.get('STATE_PARAM');

  • component syntax to navigate to a route:

this._router.navigate(['./STATE_NAME',{id:4 }]);
More details also in this detailed post on Router syntax

5. How-to's on angular2 template syntax:
6. How to communicate between components in Angular2