-1

Problem

So I have 3 tabs in fruity.component.html, on my last tab I have a component 

// fruity.component.html
<mat-tab-group>
   <mat-tab></mat-tab>
   <mat-tab></mat-tab>
   <mat-tab>
      <app-banana></app-banana>
   </mat-tab>
</mat-tab-group>

// banana.component.html
<div class="bnn" #bnn></div>

In banana.component.ts I get the div with ViewChild and document.getElementsByClassName('bnn')[0] but still show "Cannot read property 'style' of undefined" error message.

Does anyone have the same problem with me and solved the issue?

user5436320
  • 133
  • 2
  • 17
  • 1
    Can you share banana component code – Chellappan வ Dec 06 '19 at 09:45
  • 1
    I don't understand why you retrieve your div from two ways (ViewChild & document.getElementByClass) but I would advocate for not using document queries while angular provide you better tool (i.e ViewChild). Concerning ViewChild access, you need to explore `nativeElement` property and not child reference if you are looking for style property. – Mozgor Dec 06 '19 at 10:26
  • @Chellappan actually it's very simple, the main problem is the ngOnInit() in banana.component is not called. – user5436320 Dec 07 '19 at 17:52
  • @Mozgor Thank you for your answer. I mean, I tried using ViewChild and document methods yet none of them are working. – user5436320 Dec 07 '19 at 17:52

2 Answers2

0

I am unsure why you access your div through ViewChild and document query. I would advice you to stick with Angular tools rather than mixing up with raw JS queries.

The likely reason why you can't access style is because you are trying to access style of an object which does not reflect your div but something else. I could be more precise if you share your component.ts code, but I would think your ViewChild is typed as ElementRef. If so, you are one level of representation higher than the actual dom reference. You need to access nativeElement of your ElementRef and you should be able to retrieve its style.

If you retrieve a different type of ViewChild - such as any Material specified types - you will need to access first ElementRef from your component reference, then nativeElement and finally its style.

html

<mat-card #fancyCard>Testing</mat-card>

ts

@ViewChild('fancyCard', {static: true}) myCard: MatCard;
[...]

this.myCard._elementRef.nativeElement.style;

Please note that you can specify options in ViewChild annotation such as read: ElementRef to access right away to ElementRef (if you don't want to manipulate the component itself but rather just have a reference on its dom element).

If you feel like this answer is not fitting your need, please provide more context / information about your code, I will edit my answer.

Mozgor
  • 186
  • 3
  • 12
0

I solve the problem using "set @Input" to trigger a function run once when I choose the third tab, instead of using ngOnInit(). Because inside Mat Tab, ngOnInit() function was executed while the components are not created yet.

user5436320
  • 133
  • 2
  • 17