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: https://gist.github.com/gdi2290/634101fec1671ee12b3e 
 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 = 'http://example.com/feed';
  public static NEWS_URL_2: string = 'http://example.com/feed/common';


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) {
    this.id = _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 julienrenaux.fr

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