{"id":10679,"date":"2016-02-11T16:11:13","date_gmt":"2016-02-11T14:11:13","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=10679"},"modified":"2016-02-06T13:50:29","modified_gmt":"2016-02-06T11:50:29","slug":"learning-angular-2-creating-tabs-component","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/learning-angular-2-creating-tabs-component\/","title":{"rendered":"Learning Angular 2: Creating a tabs component"},"content":{"rendered":"

This is a follow-up article of\u00a0thoughtram’s excellent article on developing a tabs component with Angular 2<\/a>, where we’re going to explore an alternative way of creating a tab component by learning about\u00a0@ContentChildren<\/code> and\u00a0AfterContentInit<\/code>.<\/p>\n

That said, definitely read thoughtram’s article on how to develop a tabs component in Angular 2<\/a> first. Then come back and continue here \"\".<\/p>\n

Ok, to recap, the API of the tabs component looks as follows:<\/p>\n

<tabs>\r\n  <tab tabTitle=\"Tab 1\">Tab 1 Content<\/tab>\r\n  <tab tabTitle=\"Tab 2\">Tab 2 Content<\/tab>\r\n<\/tabs><\/pre>\n
Whenever a user clicks on the tab header, the <tabs><\/code> component takes care of setting that specific tab to be visible and to hide all others. That’s why we need to establish a communication between the parent <tabs><\/code> and its children <tab><\/code>.<\/p>\n
For establishing a communication between the two components, the thoughtram article uses Angular 2’s powerful dependency injection<\/strong> which allows us to simply ask for an instance of a parent component. In the <tab><\/code> child component it simply asked for its parent <tabs><\/code> and registered itself on that parent component, using the addTab<\/code> function:<\/p>\n
class Tab {\r\n  constructor(tabs: Tabs) {\r\n    tabs.addTab(this)\r\n  }\r\n}<\/pre>\n
This is one way of doing it. In fact, as Pascal says:<\/p>\n
Angular 2 is so awesome that there is not just one way how to do things!<\/p>\n
We can take a totally different approach how to implement our simple tabs ( which isn\u2019t so easily possible in Angular 1 ), leveraging special Angular 2 @ContentChildren property decorator with QueryList type and AfterContentInit life cycle interface. Those are more advanced concepts, which we will cover in future articles.<\/p><\/blockquote>\n
The alternative approach<\/h2>\n
This article is just about continuing thoughtram’s example, but without using the dependency injection approach. So basically, rather than getting a reference to our parent component Tabs<\/code> in the child component Tab<\/code> (child => parent<\/code>), we’re doing it the other way round: we’ll get a reference to all of the Tab<\/code> child components from the parent Tabs<\/code> (parent => child<\/code>).<\/p>\n
If you open the Tabs component, you can see that the child <tab><\/code> components are projected into it’s template via the content projection<\/a> mechanism using <ng-content><\/code>.<\/p>\n
...\r\n@Component({\r\n  selector: 'tabs',\r\n  template:`\r\n    <ul class=\"nav nav-tabs\">\r\n      <li *ngFor=\"#tab of tabs\" (click)=\"selectTab(tab)\" [class.active]=\"tab.active\">\r\n        <a href=\"#\"><\/a>\r\n      <\/li>\r\n    <\/ul>\r\n    <ng-content><\/ng-content>\r\n  `\r\n})\r\nexport class Tabs {\r\n    ...\r\n}<\/pre>\n
What we want, is to get a reference to all of the <tab><\/code> children that get projected into that section, so that we can act on their corresponding API (i.e. hiding\/showing them).<\/p>\n
@ContentChildren<\/code> and QueryList<\/code><\/strong><\/p>\n
We can do exactly this using the @ContentChildren<\/code> decorator. You have to pass the decorator the type you want to get a reference to. In our example it would look like @ContentChildren(Tab)<\/code>. As a result we will get a list of instances in the form of a QueryList<Tab><\/code>.<\/p>\n
Minko Gechev<\/a> posted an awesome article explaining the difference between @ContentChildren and @ViewChildren<\/strong> on his blog<\/a>. So I’m not going to replicate that here, simply check that article! \"\"<\/p><\/blockquote>\n
A QueryList<T><\/code> is simply “an unmodifiable list of items that Angular keeps up to date when the state of the application changes” (see docs<\/a>).<\/p>\n
Hence, as a first step, we’re going to import the new constructs in our Tabs component.<\/p>\n
import { ContentChildren, QueryList } from 'angular2\/core';<\/pre>\n
Then, inside our class we can use it like<\/p>\n
import { Tab } from '.\/tab';\r\n...\r\nexport class Tabs {\r\n  @ContentChildren(Tab) tabs: QueryList<Tab>;\r\n}<\/pre>\n
ngAfterContentInit<\/code> lifecycle hook<\/strong><\/p>\n
To access the list of Tab<\/code> instances, we need to wait for them to be projected into our Tabs<\/code> component. There’s a dedicated component lifecycle hook for that: ngAfterContentInit<\/code>. This hook is called after the component content is initialized (more on the official docs<\/a>).<\/p>\n
import { AfterContentInit } from 'angular2\/core';\r\n\r\n@Component({\r\n  selector: 'tabs',\r\n  ...\r\n})\r\nexport class Tabs implements AfterContentInit {\r\n\r\n  @ContentChildren(Tab) tabs: QueryList<Tab>;\r\n\r\n  \/\/ contentChildren are set\r\n  ngAfterContentInit() {\r\n    ...\r\n  }\r\n\r\n  ...\r\n}<\/pre>\n
Also note the AfterContentInit<\/code> interface we’re importing. This is really just for better type checking with TypeScript. It doesn’t have any other effect, as TypeScript interfaces do not alter the transpiled JavaScript code, they disappear once you transpile.<\/p>\n
Within the ngAfterContentInit<\/code> function we can now fetch all of our tabs and activate the first one if none is already set to be the active one.<\/p>\n
\/\/ contentChildren are set\r\nngAfterContentInit() {\r\n  \/\/ get all active tabs\r\n  let activeTabs = this.tabs.filter((tab)=>tab.active);\r\n\r\n  \/\/ if there is no active tab set, activate the first\r\n  if(activeTabs.length === 0) {\r\n    this.selectTab(this.tabs.first);\r\n  }\r\n}<\/pre>\n
Similarly, whenever someone clicks on a tab header, we call the selectTab(tab: Tab)<\/code> function which gets all of the tabs and deactivates all of them to finally set the clicked tab to active and thus visible.<\/p>\n
selectTab(tab: Tab){\r\n  \/\/ deactivate all tabs\r\n  this.tabs.toArray().forEach(tab => tab.active = false);\r\n\r\n  \/\/ activate the tab the user has clicked on.\r\n  tab.active = true;\r\n}<\/pre>\n
The final solution<\/h2>\n
That’s it \"\". You did it! Here’s the full code to play with:<\/p>\n