Angular 10 Tabs Component ERROR TypeError: Cannot read property 'nativeElement' of undefined

user_10870978 0
Viewed 398

I'm a new learner of Angular. I have a problem with the Angular 10 Material Tabs Component, I'm already tried to follow the angular documentation and other tutorial websites.

The header of tabs is showed up but the content is not. the error shown in the console is like this "ERROR TypeError: Cannot read property 'nativeElement' of undefined"

screenshot of the error in my app

Here are my codes and I'm imported the MatTabsModule in app.module.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-penilaian',
  templateUrl: './penilaian.component.html',
  styleUrls: ['./penilaian.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class PenilaianComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}
}
<mat-tab-group mat-align-tabs="center" class="tab">
  <mat-tab label="tab A">
    <p>TEST 1</p>
  </mat-tab>
  <mat-tab label="tab B">
    <p>TEST 2</p>
  </mat-tab>
  <mat-tab label="tab C">
    <p>TEST 3</p>
  </mat-tab>
</mat-tab-group>

angular10 angular-material angular tabs
1 Answers

Not sure if this helps. But you are using ViewEncapsulation.None, which means any styling in penilaian.component.css is applied to the children also (remember, using this ViewEncapsulation setting causes no shadow DOM being created here and the styling will be added to the head tag), which means in this case each mat-tab. Furthermore, each tab (child component) will (by default) be initialized (unless lazy loaded) but only gets injected into the DOM when the tab is activated. So in general: It might be, you're trying to target things inside a tab which can not be targeted as the tab is not active. This could maybe explain your errors...?

user_97536070
Related