====== Angular concrete ======
===== Components =====

==== Lifecycle hooks ====
<code javascript>
import { OnInit } from '@angular/core';

export class AppComponent implements OnInit {
  ngOnInit() {
  }
}
</code>

==== Call method of a nested component ====
<code html>
<nk-activities #nkActivities></nk-activities>
<a style="cursor:pointer;" (click)="nkActivities.createActivity(0, 'Talk')">Dialogue</a>
</code>
===== Templates =====
==== Access to HTML tags ====
<code html>
<input #newHeroName />
<button (click)="addHero(newHeroName.value); newHeroName.value=''">
</code>

==== Access to a form ====
<code html>
    <form (ngSubmit)="onSubmit()" #missionForm="ngForm">
        <input type="text"  class="form-control" required [ngModel]="mission.name" name="name">
        <button type="button" class="btn btn-default" (click)="updateMission(missionForm.form.controls)"><span class="glyphicon glyphicon-open" aria-hidden="true"></span> Update Name</button>
        
</code>

==== ngFor with index ====
<code html>
<ul>
  <li *ngFor="let item of items; let i = index">
    {{i}} {{item}}
  </li>
</ul>
</code>

==== Combining ngFor and ngIf ====
<code>
  <select class="form-control" [(ngModel)]="value" (change)="valueChanged.emit($event.target.value)" name="content">
  <template ngFor let-f [ngForOf]="files">
    <option [value]="f.id">{{f.name}}</option>
  </template>
  </select>
</code>
===== Others =====

==== String values ====
<code javascript>
let url = `${this.heroesUrl}/${hero.id}`;
</code>