Components: tabs break @Viewchild

Created on 29 May 2016  路  10Comments  路  Source: angular/components

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.

P3

Most helpful comment

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

All 10 comments

I think i't better with @contentChild
Chears

Do I need to make any other change (besides switching decorator name @ViewChild to @ContentChild and importing ContentChild)? Now I get undefined logged to the console even if I move the <video> out of <md-tab-group>

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

@jelbourn I noticed that this issue has not be added to alpha.8. Just wanted to note that this has still not been resolved as of Angular 2 rc 5 and Material 2 alpha 7-4

Open this plunker, go to AppComponent and take a look at the console.

Angular 2 rc.6 with ng-Material 2 alpha 8-1 still has this bug. Removing the <template> tag around the @ViewChild target gets the reference to work but of course breaks the tabs.

I have the same problem with angular 2.0.1.

Me too, why is no one assigned to this ?
Are people under the impression that is has been fixed ?

Same issue on Angular 2.0.0 and Material 2.0.0-alpha.9-3.
Spent one hour looking for this issue :( Ill switch to another theme for now. Better to wait until its out of alpha :)

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

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alanpurple picture alanpurple  路  3Comments

Hiblton picture Hiblton  路  3Comments

jelbourn picture jelbourn  路  3Comments

constantinlucian picture constantinlucian  路  3Comments

vitaly-t picture vitaly-t  路  3Comments