Handling DOM events

The final thing to do is add event listeners to the click events and start switching tabs. In the preceding template, we have click events attached to each button:

<button class="tablink" (click)="open($event, 'London')">London</button> <button class="tablink" (click)="open($event, 'Paris')">Paris</button><button class="tablink" (click)="open($event, 'Tokyo')">Tokyo</button>

The openTab method is the event handler. Let's implement it:

export class TabComponent implements OnInit, AfterContentInit {  tabContents: Array<HTMLElement>; tabLinks: Array<HTMLElement>;  constructor( private el: ElementRef  ) { }    // ...    open(evt, cityName) {    for (let i = 0; i < this.tabContents.length; i++) {  this.tabContents[i].style.display ...

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.