<h2>My technologies</h2>
<ul class="techs">
  <li *ngFor="let tech of techs" (click)="selected = tech;" [class.selected]="selected === tech">
    <span class="badge">{{tech.id}}</span>
    {{tech.name}}
  </li>
</ul>

<section *ngIf="selected">
  <h1>{{selected.name}} is my tech</h1>
  <a routerLink="/techs/{{selected.id}}">See details</a>
</section>

<section>
  <label>Tech name: <input #techName></label>
  <button (click)="add(techName.value);">Add</button>
</section>

<h2>My technologies</h2>
<ul class="techs">
  <li *ngFor="let tech of techs" (click)="selected = tech;" [class.selected]="selected === tech">
    <span class="badge">{{tech.id}}</span>
    {{tech.name}}
  </li>
</ul>

<section *ngIf="selected">
  <h1>{{selected.name}} is my tech</h1>
  <a routerLink="/techs/{{selected.id}}">See details</a>
</section>

<section>
  <label>Tech name: <input #techName></label>
  <button (click)="add(techName.value); techName.value = '';">Add</button>
</section>

Clear tech name input after technology creation.
Clear tech name input after technology creation.
