title: Angular 6 + get elements with class name from document and change style
body: <p>I have a set of "tabs" in my HTML page. They are nothing but "div" with a class name "tab". My intention is to show one tab at a time and use "Next" and "Previous" buttons to access other tabs. HTML code looks like this.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div *ngFor="let question of questionList;let i = index" class="questionBox tab"&gt;
  
  
      {{question.question.query}}
  
      &lt;br&gt;
      &lt;div *ngFor="let option of question.options"&gt;
        &lt;input type="radio" value="{{option.id}}" name="radio_{{i}}" [(ngModel)]="question.selected.id"&gt;{{option.text}}
        &lt;br&gt;
      &lt;/div&gt;
      {{question.selected | json}}
  
      &lt;br&gt;
      &lt;br&gt;
      &lt;!--TO DO --&gt;
      &lt;input type="button" class="btn btn-primary" value="Previous"&gt;
      &lt;!--TO DO --&gt;
      &lt;input type="button" class="btn btn-primary nxtButton" value="Next"&gt;
    &lt;/div&gt;
    &lt;input type="button" class="btn btn-success btn-block" value="Submit"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Initially all the tabs are hidden with CSS.</p>
  
  <pre><code>.tab{
      display: none; 
  }
  </code></pre>
  
  <p>on page initialization, first tab has to be displayed and rest are hidden.
  <strong>showTab()</strong> method in the component class is intended for that purpose. shotTab method accepts a "number" that represents the index of the tab to be displayed.</p>
  
  <pre><code>  public showTab(n: number){
  
      let tabElements = document.getElementsByClassName("tab");
      let tabToDisplay = tabElements.item(n) as HTMLElement;
      tabToDisplay.style.display="block";
    }
  </code></pre>
  
  <p>to show the first tab, showTab() methos is invoked from <strong>ngOnInit()</strong> method of the component. but the line <strong>let tabElements = document.getElementsByClassName("tab");</strong> does not return any result. i.e. the length of <strong>tabElements</strong> is 0. So the application will fail saying that "<strong>Cannot read property 'style' of null</strong>".</p>
  
  <pre><code>AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'style' of null
      at AppComponent.push../src/app/app.component.ts.AppComponent.showTab (app.component.ts:25)
      at AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:18)
      at checkAndUpdateDirectiveInline (core.js:9243)
      at checkAndUpdateNodeInline (core.js:10507)
      at checkAndUpdateNode (core.js:10469)
      at debugCheckAndUpdateNode (core.js:11102)
      at debugCheckDirectivesFn (core.js:11062)
      at Object.eval [as updateDirectives] (AppComponent_Host.ngfactory.js? [sm]:1)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
      at checkAndUpdateView (core.js:10451)
  </code></pre>