Angular 2 by Examples

Basics

Using variable

import { Component } from '@angular/core';

@Component({
        selector: 'my-app',
        template: `
<div>Hello {{ name }}</div>
`
})

export class AppComponent {
        name: string;

        constructor() {
                this.name = 'Michael';
        }
}

Hello Michael

ngFor to iterate through an array

import { Component } from '@angular/core';

@Component({
        selector: 'my-app',
        template: `
<ul>
        <li *ngFor="let name of names">Hello {{ name }}</li>
</ul>
`
})

export class AppComponent {
        names: string[];

        constructor() {
                this.names = ['Ari','Carlos','Felipe','Nate'];
        }
}

• Hello Ari
• Hello Carlos
• Hello Felipe
• Hello Nate