Hooking into content initialization

To be assured of gaining access to the DOM, we need to hook into the ngAfterContentInit lifecycle method. It's in this method that we can use ElementRef to query the DOM and manipulate it:

import { Component, ElementRef, OnInit, AfterContentInit } from '@angular/core';  @Component({  selector: 'app-tab',  templateUrl: './tab.component.html',  styleUrls: ['./tab.component.css'] })export class TabComponent implements OnInit, AfterContentInit {  tabContents: Array<HTMLElement>;  tabLinks: Array<HTMLElement>;    constructor(    private el: ElementRef  ) { }  ngOnInit() {}  ngAfterContentInit() {    // Grab the DOM    this.tabContents = this.el.nativeElement.querySelectorAll('.tabcontent');  this.tabLinks = this.el.nativeElement.querySelectorAll('.tablink'); ...

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.