Angular 6 + вземете елементи с име на клас от документа и променете стила

Имам набор от "табове" в моята HTML страница. Те не са нищо друго освен "div" с име на клас "tab". Намерението ми е да показвам един раздел наведнъж и да използвам бутоните "Напред" и "Предишен" за достъп до други раздели. HTML кодът изглежда така.

<div class="container">
  <div *ngFor="let question of questionList;let i = index" class="questionBox tab">


    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" value="{{option.id}}" name="radio_{{i}}" [(ngModel)]="question.selected.id">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>
    <!--TO DO -->
    <input type="button" class="btn btn-primary" value="Previous">
    <!--TO DO -->
    <input type="button" class="btn btn-primary nxtButton" value="Next">
  </div>
  <input type="button" class="btn btn-success btn-block" value="Submit">
</div>

Първоначално всички раздели са скрити с CSS.

.tab{
    display: none; 
}

при инициализация на страницата, първият раздел трябва да се покаже, а останалите са скрити. Методът showTab() в класа на компонента е предназначен за тази цел. Методът shotTab приема "число", което представлява индекса на раздела, който ще се показва.

  public showTab(n: number){

    let tabElements = document.getElementsByClassName("tab");
    let tabToDisplay = tabElements.item(n) as HTMLElement;
    tabToDisplay.style.display="block";
  }

за да покаже първия раздел, методът showTab() се извиква от метода ngOnInit() на компонента. но редът let tabElements = document.getElementsByClassName("tab"); не връща никакъв резултат. т.е. дължината на tabElements е 0. Така че приложението ще се провали, казвайки, че „Не може да прочете свойството „стил“ на нула“.

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)