CODEWITHSUNDEEP
htmlangulartypescriptdomviewchild
user1234567
user1234567

Reputation: 37

@ViewChild not defined in ngAfterViewInit

I am facing a problem with *ngIf and @ViewChild. I tried most of the recommended solutions on the other questions of this type but nothing worked for me.

My HTML file is as below:

<div id="main-container" class="page-layout blank p-24" fusePerfectScrollbar fxLayout="column">
  <mat-tab-group #tabGroup (selectedTabChange)="onTabChange($event);" fxLayout="row wrap">

     <mat-tab label="Some1" *ngIf="arrayNames.includes('Some1')">
            <ng-template matTabContent>
                <my-table #table></my-table>
            </ng-template>
        </mat-tab>

        <mat-tab label="Some2" *ngIf="arrayNames.includes('Some2')">
            <ng-template matTabContent>
                <my-table #table></my-table>
            </ng-template>
        </mat-tab>

        <mat-tab label="Some3" *ngIf="arrayNames.includes('Some3')">
            <ng-template matTabContent>
                <my-table #table></my-table>
            </ng-template>
        </mat-tab>
   </mat-tab-group>
</div>

In my component ts file I have the following:

  matTabs = [1, 2, 3]; 
  @ViewChild('tabGroup', {static: false}) tabGroup: MatTabGroup;
  data: Array<SomeEntity> = [];
  arrayNames: Array<string> = [];
  @ViewChild('table', { static: false }) table: AnotherComponent;
  
  ngOnInit() {
    this.someService.getAll()
    .subscribe((result) => {
      this.data = result;
      for (let d of this.data) {
        this.arrayNames.push(d.name);
      }
    });
  }

  ngAfterViewInit(): void {
    this.selectedTabLabel = this.tabGroup?._tabs?.first.textLabel;
    this.TabChangeService.changeTab(this.selectedTabLabel);
    this.table.displayMyTable();
  }
The 'table' child always comes as undefined. Is there any way I can modify this so I can show the data on the first mat-tab after the view has initialized?

When the page finished loading it shows like this: enter image description here

because this.table.displayMyTable(); does not display anything since the 'this.table is undefined'

Upvotes: 0

Views: 1071

Answers (2)

jesvin palatty
jesvin palatty

Reputation: 373

Instead of *ngIf can you try using the hidden property of the html tag that may solve the problem. The problem I think is that the html dom doesn't have the ngif elements thus giving this error when you are trying to access this element in your Typescript file. Your code then should be -

 <mat-tab label="Some1" [hidden]="!arrayNames.includes('Some1')">
        <ng-template matTabContent>
            <my-table #table></my-table>
        </ng-template>
    </mat-tab>

    <mat-tab label="Some2" [hidden]="!arrayNames.includes('Some2')">
        <ng-template matTabContent>
            <my-table #table></my-table>
        </ng-template>
    </mat-tab>

    <mat-tab label="Some3" [hidden]="!arrayNames.includes('Some3')">
        <ng-template matTabContent>
            <my-table #table></my-table>
        </ng-template>
    </mat-tab>

Upvotes: 1

Gabriel Sereno
Gabriel Sereno

Reputation: 855

Two things that you can consider trying:

First of them: Surround this.table with setTimeout

  ngAfterViewInit(): void {
    this.selectedTabLabel = this.tabGroup?._tabs?.first.textLabel;
    this.TabChangeService.changeTab(this.selectedTabLabel);
    setTimeout(() => {
    this.table.displayMyTable();
    })
  }

Second attempt: Change the ViewChild to ViewChildren

  @ViewChildren('table') table: QueryList<AnotherComponent>;

Upvotes: 0

Related Questions