Learn How To Develop The Tabs Component in Angular 2

1
2930
Component

Component

In this article, we are going to build an application in Angular 2 to learn about the tabs component from a consumer point of view. In this application, we will develop tabs with web technologies in the form of an HTML list, which will represent these tabs. Each tab will be associated with the container elements that will be displayed at the bottom of the page when any of these tabs is clicked.

Tour Company App based on Tabs Component
Here we are going to develop a tour company app in Angular 2 which publishes details associated with the various tour packages.

Angular 2.0 coding for Tabs Component
app/main.ts

Explanation of Code:
The above main.ts file is used to Bootstrap the angular 2.0 app that uses the root component from the NgModule.
app/app-module.ts

Explanation of Code: –
The root App Module typescript file is present in the app package. Here, we are importing the NgModule, BrowserModule, TabsComponent, TabComponent, and AppComponent classes as shown above. The @NgModule decorator declared here that has imports, declaration classes and bootstrap class to start the app.

app/app-component.ts

Explanation of Code: –
Here, we are declaring the component with selector as ‘my-tab-app’ and templateUrl as ‘resource/app-component.html’ that has the required HTML code to render on the web page. The controller class ‘AppComponent’ has an array of string type (details: string []) that holds the selected text from the tabs. Next, we are writing a function i.e. detail (selectedTab: Tab) that has event binding with the ‘selected’ event that will eventually call this function to display the selected text on the screen when the tab is selected.

resource/app-component.html

Explanation of Code:
Here, we are declaring the nested tags as ‘my-tabs-comp’ and ‘my-tab-comp’. The ‘my-tab-comp’ tag has the property binding with ‘tabText’ which is declared as string type in the interface ‘Tab’ as shown below. This is to be noted that the property binding for [tabText] = “‘Premium Holiday Tour Package'” and tabText=”‘Premium Holiday Tour Package'” serves the same purpose in Angular 2.0. Later in the HTML code, we are displaying the list of selected Tab text as well as image on the screen by using the *ngFor directive to iterate over the ‘details’ list.

app/my-tab-interface.ts

Explanation of Code: –
It is an interface that has a variable ‘tabText’ declared as that of the string type.

app/my-tab-component.ts

Explanation of Code: –
In the ‘app-component.html’ file, we have used the tags ‘my-tab-comp’ which is nothing but the component selector that has underlying HTML defined in the template file ‘resource/my-tab-component.html’ as shown below. It has the controller class ‘TabComponent’ that implements ‘OnInit’ and ‘Tab’ interfaces. In the class, ‘tabText’ is overridden or implemented as the Input by using @Input class field decorator and we are adding the tab by calling the ‘addTab’ function of TabsComponent controller class (explained next) inside the ‘ngOnInit’ component change directive.

resource/my-tab-component.html

Explanation of Code: –
It is the HTML template for ‘my-tab-component’, it has the expression ‘! selected’ that has the property with HTML ‘hidden’ event. Therefore, when the value of this expression is true, the contents will be displayed and when false the contents will be hidden.

app/my-tabs-component.ts

Explanation of Code: –
In the ‘app-component.html’ file, we have used the tags ‘my-tabs-comp’ which is nothing but the component selector that has the underlying HTML defined in the template file ‘resource/my-tabs-component.html’ as shown below. It has the controller class ‘TabsComponent’ that has an array of Tab, ‘selected’ expression as ‘EventEmitter’ by using @Output class filed decorator, and the definitions of the two functions ‘addTab’ and ‘selectTab’. In both of these functions, we are using the dependency injection concept of Angular 2.0 to add the tab and display the selected tab text on the screen respectively.

resource/my-tab-component.html

Explanation of Code: –
It is the HTML template for ‘my-tabs-component’ which is using *ngFor directive to iterate over the array of Tabs. Each of the displayed Tab has the hyperlink which has the HTML click event binding with the ‘selectTab (tab)’ function that selects the tab text and display it on the screen.

assets/styles.css

Explanation of Code: –
It is the stylesheet used to style the text on the web page of the app.

Index.html

Explanation of Code: –
It is the ‘index.html’ file that has the ‘my-tab-app’ tag in its body section i.e. selector of ‘app-component’ to load and display the complete application. Here, we will include all the paths for the scripts which are required for the Angular 2.0 build as shown above.

Output: –
When we run the above angular 2.0 app for Tab components by executing the command ‘npm start’ on command line that has pointer to the application’s root directory ‘tour-company-app’ then we will observe the following output.

Capture

Source code for the Tour Company App

Conclusion: –
In this chapter, we developed a tab component app in Angular 2.0 for a tour company to demonstrate the practical use of tab components.

1 COMMENT

  1. I read your articles very excellent and the i agree our all points because all is very good information provided this through in the post.

LEAVE A REPLY

Please enter your comment!
Please enter your name here