ElementRef

The API to achieve Dom manipulation is ElementRef. Let's build a tab component that uses this API based on the basic demo on https://www.w3schools.com/howto/howto_js_tabs.asp.

Start by generating a new component using the CLI generate command:

ng g component tab

Add the template as a child to our app component right after the *ngFor directive:

<ul>  <li *ngFor="let item of items">{{item}}</li>  </ul>  <!--Add tab component to app--><app-tab></app-tab>

Then, replace the component's template with the following:

<!--./src/app/tab/tab.component.css--><div class="tab">    <button class="tablink" (click)="openTab($event, 'London')">London</button>   <button class="tablink" (click)="openTab($event, 'Paris')">Paris</button>  <button class ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.