Angular 2 Components: Making app development easier

When Angular 2 was announced in October 2014, the JavaScript community went into a frenzy. What was going to happen to the beloved Angular 1, which so many developers loved? Could change be a good thing? Change only means improvement, so we should welcome Angular 2 with open arms and embrace it.

One of the biggest changes from Angular 1 to Angular 2 was the purpose of a component. In Angular 2, components are the main way to build and specify logic on a page; or in other words, components are where you define a specific responsibility of your application. In Angular 1, this was achieved through directives, controllers, and scope. With this change, Angular 2 offers better functionality and actually makes it easier to build applications. Angular 2 components also ensure that code from different sections of the application will not interfere with other sections of the component.

To build a component, let’s first look at what is needed to create it:

1. An association of DOM/host elements.
2. Well-defined input and output properties of public APIs.
3. A template that describes how the component is rendered on the HTML page.
4. Configuration of the dependency injection.

Input and output properties

Input and Output properties are considered the public API of a component, allowing you to access the backend data.

The input property is where data flows into a component. Data flows out of the component through the output property. The purpose of the input and output propertiesis to represent a component in your application.

Template

A template is needed in order to render a component on a page. In order to render the template, you must have a list of directives that can be used in the template.

Host elements

In order for a component to be rendered in DOM, the component must associate itself with a DOM or host element. A component can interact with host elements by listening to its events, updating properties, and invoking methods.

Dependency Injection

Dependency Injection is when a component depends on a service. You request this service through a constructor, and the framework provides you with this service. This is significant because you can depend on interfaces instead of concrete types. The benefit of this enables testability and more control.

Dependency Injections is created and configured in directives and component decorators.

Bootstrap

In Angular,you have to bootstrap in order to initialize your application through automation or by manually initializing it. In Angular 1, to automatically bootstrap your app, you added ng-app into your HTML file. To manually bootstrap your app, you would add angular.bootstrap(document, [‘myApp’});.

In Angular 2, you can bootstrap by just adding bootstrap();.

It’s important to remember that bootstrapping in Angular is completely differentfromTwitter Bootstrap.

Directives

Directives are essentially components without a template. The purpose behind a directive is to allow components to interact with one another. Another way to think of a directive is a component with a template. You still have the option to write a directive with a decorator.

Selectors

Selectors are very easy to understand. Use a selector in order for Angular to identify the component. The selector is used to call the component into the HTML file. For example, if your selector is called App, you can use <app> </app> to call the component in the HTML file.

Let’s build a simple component!

Let’s walk through the steps required to actually build a component using Angular 2:

Step 1: add a component decorator:

Step 2: Add a selector:

In your HTML file, use <myapp></myapp> to call the template.

Step 3: Add a template:

Step 4: Add a class to represent the component:

Step 5: Bootstrap the component class:

Step 6: Finally, import both the bootstrap and Component file:

This is a root component. In Angular, you have what is called a component tree. Everything comes back to the component tree.

The question that you must ask yourself is: what does a component looks like if it is not a root component? Perform the following steps for this:

Step 1: Add an import component:

For every component that you create, it is important to add “import {Component} from "angular2/core";”

Step 2: Add a selector and a template:

Step 3: Export the class that represents the component:

Step 4: Switch to the root component. Then, import the component file:

Add the relative path(./todo) to the file.

Step 5: Add an array of directives to the root component in order to be able to use the component:

Let’s review. In order to make a component, you must associate host elements, have well-defined input and output properties, have a template, and configure Dependency Injection. This is all achieved through the use of selectors, directives, and a template.

Angular 2 is still in the beta stages, but once it arrives, it will be a game changer for the development world.

About the author

Mary Gualtieri is a full stack web developer and web designer who enjoys all aspects of the web and creating a pleasant user experience. Web development, specifically frontend development, is an interest of hers because it challenges her to think outside of the box and solve problems, all while constantly learning. She can be found on GitHub as MaryGualtieri