Angular2 Notes I

1. 1. Angular 2 Basic
   1. 1.1. Syntax
   2. 1.2. Some Syntax Instances
      1. 1.2.1. Using * to call directives
      2. 1.2.2. Using [] to pass parameter to directives
      3. 1.2.3. Using () to specify action bindings
   3. 1.3. Input/Output
   4. 1.4. Basic Routing

• Angular 2 Basic

The heart of angular 2 is containers.

import from angular/core

import { 
    Component, 
    Input,
    Output,
    EventEmitter } from '@angular/core';

• Syntax

• Annotations
  The @ is an annotation and it comes from TypeScript
• Component
  Components teach your browser new tags
• Template
  Views can be defined by the template option

• Multi-line Strings
  Using ` backticks allows for easy inline templates

  @Component({
      selector: 'main-container',
      template: `
      <div>
          <main class="main">
              main content will go here
          </main>
      </div>
      `
  })

• Class Syntax
  TypeScript allows you to define classes using the class syntax

• Events
  One-way data binding means we fire events instead of modifying data directly

  export class NoteCard {
      @Input() note = {};
      @Output() checked = new EventEmitter();
  
      showCheck: boolean = false;
      
      toggle() {
          this.showCheck = ! this.showCheck;
      }
      
      onChecked() {
          this.checked.next(this.note);
      }
  }

• Brackets for Parameters
  Use [] brackets on an attribute to pass parameters to the directive

• Star Syntax
  Use the * on an attribute to use a directive on this element

• Parenthesis for View Actions
  Use () parenthesis to specify action bindings

  @Component({
      selector: 'note-card',
      template: `
          <div 
              [ngStyle] = "{'background-color': note.color}"
              class="note-card row shadow-1"
              (mouseenter) = "toggle()"
              (mouseleave) = "toggle()"
              >
          <div class="icon" *ngIf="showCheck" (click)="onChecked()">
              <i class="material-icons">check</i>
          </div>
          <div class="col-xs-12 title">
              {{ note.title }}
          </div>
          <div class="col-xs-12 value">
              {{ note.value }}
          </div>
          </div>
      `,
      style:[``]
  })

• Strong Typing
  TypeScript lets us define collections that contain our custom type Product

• Component Definition Class
  We define new Components with a class

• Some Syntax Instances

• Using * to call directives

• ngIf
  If the expression is evaluated to be a true, the NgIf shows the elements, otherwise it removes the element from DOM.

<div *ngIf="showMe">

export class Angular2NgIf {
    showMe:boolean = true; 
}

• ngFor
  NgFor directive repeats the part of a template for each item in an array.

<note-card *ngFor = "let note of notes; let i = index" />

export class Notes {
    notes = [
        {title: '', value: ''},
        {title: '', value: ''},
        //...
    ];

• Using [] to pass parameter to directives

• ngStyle

<div [ngStyle] = "{'background-color': note.color}" />

• ngModel

<input
    type="text"
    [(ngModel)]="newNote.title"
    name="newNoteTitle"
    ...
/>

equals to:

<input
    type="text"
    [ngModel]="newNote.title"
    (ngModelChange) = "newNote.titel = $event"
    name="newNoteTitle"
    ...
/>

• Using () to specify action bindings

<note-card (checked)="onNoteChecked($event, i)" />

• Input/Output

import { 
    Component, 
    Input,
    Output,
    EventEmitter } from '@angular/core';

// in template:    
<div class="icon" (click)="onChecked()">    
    
export class NoteCard {
    @Input() note = {};
    @Output() checked = new EventEmitter();  
    onChecked() {
        this.checked.next(this.note);
    }
}

$event can be used as Rx parameter, e.g., the color object is passing in.

<div class="col-xs-3">
    <color-picker 
        (selectedInput)="onColorSelected($event)"
        [colors]="colors">
    </color-picker>
</div>

with function …

onColorSelected(color: string) {
    this.newNote.color = color;
}

• Basic Routing

Three main components configure routing

• Routes describes the application’s routes
• RouterOutlet is a “placeholder” component that gets expanded to each route’s content
• RouterLink is used to link to routes

Routes

import { Routes } from '@angular/router';
import { Main, Notes, About} from '../containers'; 

export const routes: Routes = [
    // { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: '', component: Main,
        children: [
            { path: '', component: Notes},
            { path: 'about',  component: About }
        ]
    }
]

RouterOutlet

@Component({
    selector: 'main-container',
    template: `
    <div>
        <router-outlet></router-outlet>
    </div>
    `
})

_ RouterLink_

import { RouterLink } from '@angular/router'

@Component({
    selector: 'app-bar',
    template: `
        <header class="app-bar row middle-xs">
        <span [routerLink]="['']" class="logo col-xs-10">
            Home
        </span>
        <nav class="col-xs-2">
            <div class="row middle-xs between-xs">
                <span [routerLink]="['', 'about']"  class="link">About</span>
            </div>
        </nav>
        </header>
    `,
    //...
})

---

Ref:

1. angular docs.
2. ng-book
3. basic routing in angular 2