question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

tabs break @Viewchild

See original GitHub issue

Using a template variable within md-tab-group and trying to access it in the component with @Viewchild does not work. My template

<md-tab-group>
<md-tab>
    <template md-tab-label>Tab Title</template>
    <template md-tab-content>
        <video #vidPlayer>
            <source src="http://localhost/vid.mp4" type="video/mp4">
        </video>   
    </template>
</md-tab>
</md-tab-group>

My component

@ViewChild('vidPlayer') player;
ngAfterViewInit(){console.log(this.player);}

undefined is logged to the console. If I move the <video> element out of <md-tab-group>, it gets correctly logged to the console.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:4
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
jelbourncommented, Nov 2, 2016

This was fixed by #1645, which will be part of alpha.10

1reaction
jelbourncommented, May 31, 2016

@RoxKilly your initial example is correct in using @ViewChild and not @ContentChild. We’ll look into it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 2 Material Tabs break ViewChild. Ideas for a ...
I have a functional workaround: I created an attribute directive with an (instance) event that will emit the element hosting that directive.
Read more >
Angular Tabs Component Getting Started - jQWidgets
The Tabs is breaking the content into multiple sections. You can populate it from 'LI' ... In some of the examples, we use...
Read more >
Accessible Tabs in Angular - This Dot Labs
We're using @ViewChildren to get all the TabTriggerComponent instances. Using the AfterViewInit life cycle, I get a clone of the component ...
Read more >
How to Tab Selection in Angular Tabs component - Syncfusion
import { Component, OnInit, ViewChild } from '@angular/core'; import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns'; import { Tab, ...
Read more >
In-depth analysis of ViewChild, ElementRef and ViewChildren ...
Here we have three child elements as ViewChild element and it is available ngAfterViewInit in the parent component. Note, for Angular 8 you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found