0

I read a tab menu via a directive and an event. I get the right index and most likely the right element. Now I would like to animate the ElementRef to be able to animate it, but I can not find it. It is not templateRef and not origin. Can somebody tell me how to find the current element and how to fix it when I change the tab?

The below code is a simple color change example to see if I have the correct element; my final goal is to be able to animate the content via fade content 1 out and fade content 2 in animation.

@HostListener('selectedTabChange', ['$event']) selectedTabChange(event: MatTabChangeEvent) {

    console.log('Change Tab', event);


    this.renderer.setStyle(event.tab.content.templateRef.elementRef.nativeElement, 'background-color', 'red');


}
Marshal
  • 10,499
  • 2
  • 34
  • 53
Helge
  • 79
  • 3
  • 17
  • Are you just wanting to change the background color of the selected tab to red? – Marshal Oct 15 '18 at 17:48
  • Not realy. That is a test. I want to fade out and fade in the content. Fade out content 1 and fade in content 2. – Helge Oct 15 '18 at 18:54
  • 1
    Got it, I will continue to play in stackBlitz and let you know if I come up with anything. The reason I asked was that a CSS solution would solve the background-color. – Marshal Oct 15 '18 at 19:00

1 Answers1

0

I am struggling to find a way to grab the html reference of the MatTab content body and manipulate the styles. In this situation I would recommend exploring an HTML type tab solution so you have full control over the feature versus trying to override the MatTab component.

https://www.w3schools.com/howto/howto_js_tabs.asp

Marshal
  • 10,499
  • 2
  • 34
  • 53