Introduction
AngularJs 2 is a popular JavaScript framework to create Single Page Application (SPA). In a Single Page Application, upon client making the request the data fetched from the server or locally is rendered in the browser instantly without the page refresh. Only the area or part of the DOM, that needs to display the data, is changed. AngularJs 2 comes with wide variety of programming features like Component, Templates, Databinding, Http, Directives, Pipes, Forms, Dependency Injection, Services, Routing and many more. It uses Typescript as the native scripting language. Typescript is written on top of JavaScript and offers plenty of useful features which is otherwise not found in JavaScript. The final code is eventually compiled into JavaScript by the build tool. Typescript is also a strongly typed scripting language and enforces the use of types for every property declared. In this article I will demonstrate the use of AngularJs 2 Component feature.
Setting Up
We will use Angular CLI (Command Line Interface) to build the AngularJs 2 Component. AngularJs CLI provides ‘ng’ utility that can be used to setup and build the complete Angular project. There are various commands used with ‘ng’ tool to create different components or features of AngularJs application.
We will install Node.js and use its npm utility to install Angular CLI. Download the latest version of Node.js from the official site and install the same. Once installed, open the Node.js command prompt and enter the following command to install Angular CLI:
npm install -g angular-cli
Once installed, navigate to the folder where you want to create the project and run the following command on the command prompt:
ng new my-app
This will create the new folder named my-app and different other files and sub-directories that will enable you to kick start with the development of AngularJs 2 application in this new project. The project can be created with the name of your choice. I am using my-app as the project name. Navigate to my-app\src\app folder. This is the folder where we will do lot of our action or coding work. As you see under the app folder, certain files are created and they have .ts extension which means they are Typescript files. We will ignore these files for the time being and move ahead in creating our first component. Before we deep dive into creating our first component, let’s understand what is a component in AngularJs 2.
What is Component in AngularJs 2
The Component is an element on the web page. It is created as a Typescript class annotated or decorated with @Component decorator. Decorators in AngularJs 2 comprises of meta data that provides a specific meaning to the Typescript class. Components are typically used to display something on HTML page. It is therefore backed by what is called as template and styles. Template refers to HTML code fragment and styles refers to CSS styles. Styling is optional though. One more important meta data which every component must have is the selector. Selectors are custom HTML elements that is used to display the component. Component is identified by a selector for e.g. <my-custom-component>. This selector is used in HTML page to render the component.
Creating Item List Component
We will create a item list component that will display the list of items on a web page. Open the Node.js command prompt, navigate to my-app\src\app folder and run the following command:
ng generate component item-list
The above command will create the item-list component in the new folder named item-list and generate some files. Navigate to item-list folder and you will see four files generated:
- item-list.component.ts – This is our main component class.
- item-list.component.spec.ts – This is used for the purpose of testing (You can ignore for now as we are not discussing testing).
- item-list.component.html – This is a template file for our component.
- item-list.component.css – This will be the style sheet for our component.
Lets look at the code in the file item-list.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-item-list',
templateUrl: './item-list.component.html',
styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}This is our main component class. Let’s understand the structure of the class. As you can see the @Component decorator is used to indicate that this class is a component and it has an appropriate selector, template and style meta-data. By default, the selector generated is app-item-list but you can change it to the name of your choice. Just make sure the name does not clash with the native HTML element name. So you can’t use names like strong or li or h1 as these are reserved HTML element names. The next meta-data is the template URL which points to the template which is in this case is item-list.component.html and then we have style URLs that points to the CSS file. You can have more than one CSS files for a component. Note that providing style for your component is optional and it can be safely removed. For now our component does nothing but we will add value by creating list of items in a HTML template of this component.
The component class implements
OnInitlifecycle interface. The component provides different lifecycle hooks (likengOnInit,ngOnChangesand more) that can be used to capture lifecycle events.
Creating Template
Open the file item-list.component.html and replace the existing code with the following HTML snippet:
<h1>Item List</h1> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> </ul>
All we are doing is displaying the list of items using <li> tag. Now that we have created the component we need to make sure that it is recognized by our application. Earlier when we created our project my-app, it created app.component.ts file which is the default bootstrap component. Bootstrap component is the starting component that the application launches. All other components that are created are called from this bootstrap component. So we will call our item-list component in the template file of the bootstrap component. In order to see the item list, you can place the component element (selector) <app-item-list> in the app.component.html template file which is part of the bootstrap component. The existing code can be replaced with the following:
<app-item-list></app-item-list>
You can use the built in development server provided by Angular CLI to run the application. Navigate to the project root folder my-app and run the following command:
ng serve
This will build your new my-app application and serve it on the port 4200. Open the browser and point to http://localhos:4200 and you should see your item list component displayed.
| Reference: | AngularJs 2 Series: Build Your Own Component from our WCG partner Rajeev Hathi at the TECH ORGAN blog. |
