Win a copy of Bad Programming Practices 101 (e-book) this week in the Beginning Java forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

How to access a grandchild component in Angular 2?  RSS feed

 
Ranch Hand
Posts: 90
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am using the Angular Material components that are in beta right now. I have a tabs component containing various tabs, and I would like to be able to access the MdTabHeader child of the MdTabGroup component.

My component template HTML contains:



This allows me to access the MdTabGroup child component via @ViewChild('tabGroup'):



What I would like to do is access the MdTabHeader child component of the MdTabGroup component.

The template HTML for MdTabGroup contains the following:



I am thinking that because the <md-tab-header> element contains #tabHeader, I should be able to access it somehow. Unfortunately, MdTabGroup does not expose its MdTabHeader child directly.

Is this possible?
 
Author
Greenhorn
Posts: 7
5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It's not possible. In fact component's encapsulation is one of the most promoted Angular advantages. Just curious, what's your use case?
 
Daniel Trebbien
Ranch Hand
Posts: 90
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I integrated a Material Design tabs component with routing, so that clicking on a tab changes the URL, and visiting a certain tab's URL will cause the tab to be opened. See my Plunker: http://plnkr.co/edit/xNUO08jgFcFCsdWDzCRZ (it helps to click the "Launch the preview in a separate window" button to see the changing URL).

What I would like to do is, if the user goes back and a tab is focused, I would like to move the focus to the previous tab.

To see what I mean, run the Plunker that I linked to. When you see the tabs rendered, click on "Tab 3" to open the third tab. Right click on "Tab 3" and select "Back" from the context menu (in Firefox, the "back" menu item is just an arrow icon). The blue tab underline will move to "Tab 1" and the first tab will be opened; however, the focus is still on "Tab 3". I would like to move the focus to "Tab 1".
 
Anton S Moiseev
Author
Greenhorn
Posts: 7
5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I see. It look like a bug, I would expect the focus to be automatically moved when a tab is activated. I would try to file an issue, or send a pull request. Also you can try MdTabNavBar, this is basically tab headers + <router-outlet>, though MdTabNavBar currently doesn't support dynamic height and tabs pagination.
 
Daniel Trebbien
Ranch Hand
Posts: 90
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you for your response. I have now opened an issue on GitHub: https://github.com/angular/material2/issues/2993
 
Curse your sudden but inevitable betrayal! And this tiny ad too!
Why should you try IntelliJ IDEA ?
https://coderanch.com/wiki/696337/IntelliJ-IDEA
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!