1// example.component.ts
2
3@Component({
4  templateUrl: './example.component.html'
5})
6export class ExampleComponent {
7  timestamp:string = ‘2018-05-24T19:38:11.103Z’;
8}

1ng new my-app

1<!-- renders “<h1>Hello!</h1>” -->
2<div *ngIf="true">
3  <h1>Hello!</h1>
4</div>
5
6<!-- does not render -->
7<div *ngIf="false">
8  <h1>Hi!</h1>
9</div>

1// my.component.ts
2@Component({
3  templateUrl: './my.component.html'
4})
5
6export class MyComponent {
7  handler(event):void {
8      // function does stuff
9  }
10}

1<div [ngSwitch]=“potato”>
2  <h1 *ngSwitchCase=“‘Russet’”>{{ potato }} is a Russet Potato.</h1>
3  <h1 *ngSwitchCase=“‘Sweet’”>{{ potato }} is a Sweet Potato.</h1>
4  <h1 *ngSwitchCase=“‘Laura’”>{{ potato }} is a Laura Potato.</h1>
5  <h1 *ngSwitchDefault>{{ potato }} is not a Russet, Sweet, nor Laura Potato.</h1>
6</div>

1// app.component.ts
2
3@Component({
4  templateUrl: 'app.component.html'
5})
6export class AppComponent {
7  someValue:string = "HeLlO WoRlD!";
8}

1cd my-app
2ng serve --open

1<!-- app.component.html -->
2
3<ul>
4  <li routerLink="/A" routerLinkActive="active">Go to A!</li>
5  <li routerLink="/B" routerLinkActive="active">Go to B!</li>
6</ul>
7<router-outlet></router-outlet>

1<!-- app.component.html -->
2
3<ul>
4  <!-- routerLink(s) here -->
5</ul>
6<router-outlet></router-outlet>
7<!-- routed content appends here (AFTER THE ELEMENT, NOT IN IT!) -->

1<!-- my.component.html -->
2<any-element [property]=“value”>innerHTML</any-element>