Learn How to Create a Zippy Component in Angular 2

Zippy Component

Zippy Component

In this article, we are going to develop a zippy component application in Angular 2. It demonstrates the following.

  • Data flow in Angular 2.
  • Working of Inputs and Outputs at Component level.
  • An event is emitted when a component is opened or closed.
  • At such event the application state is logged on the screen.

Zippy Component
In the zippy component, we are going to create a hyperlink (i.e. Get Application Status). When this hyperlink is clicked, it will emit an event and display the underlying hidden text (i.e. ‘View the Projected content’). An event will log the application status as ‘Component was opened’. The same hyperlink when clicked again will hide the underlying text and the emitted event will log the application status as ‘Component was closed’. Lets’ build this app as shown below.

Angular 2.0 coding for Tabs Component

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.


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


Explanation of Code:
Here, we are declaring the component with selector as ‘my-zippy-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 (logs: string []) that holds the selected text from the zippy component. Next, we are writing a function i.e. log (message) that has event binding with the ‘selected’ event that will eventually call this function to display the selected text on the screen when the zippy component’s hyperlink is clicked.


Explanation of Code:
Here, we are declaring the tag as ‘my-zippy’ where we are calling the ‘log (message)’ function to log the message on opened and closed events as ‘Component was Opened’ and ‘Component was Closed’, respectively. Initially at the time of loading we will keep [isOpen] event as false (i.e. no display of messages). Later, we will display the application logs lists whenever the zippy component link is clicked over and over.


Explanation of Code:
In the ‘app.component.html’ file, we have used the tags ‘my-zippy’ which is nothing but the component selector that has underlying HTML defined in the template file ‘resource/zippy.component.html’ as shown below. It has the controller class ‘ZippyComponent’ we are declaring and initializing the values to the input (i.e. isOpen) and Outputs (i.e. opened and closed) events. Lastly, we have defined a ‘toggle ()’ function which does the flipping of displaying and hiding the underlying text when we click the zippy component.


Explanation of Code:
It is the HTML template for ‘Zippy.Component’, it calls the ‘toggle ()’ function and does the flip flop of hiding and displaying the underlying text (i.e. Get Application Status) upon clicking of the hyperlink.


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


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

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 ‘my-zippy-component-app’, then we will observe the following output.


Source Code for My Zippy Component App

Conclusion: –
In this chapter, we developed a zippy component app in Angular 2.0 to demonstrate data flow and use of input and output events at component level.


Please enter your comment!
Please enter your name here