The 5 Minute Angular Component Tutorial

Assuming you've gotten your feet wet with the Angular ecosystem, it's time to get started writing some Angular components. In this tutorial, we'll demonstrate how to write your own components with the latest Angular 4.

This tutorial assumes you have the Angular CLI installed. While using the CLI isn't necessary, we highly recommend getting started with the Angular CLI before this tutorial.

Angular 2 Component

The @Component is the Angular 2 replacement for controllers in Angular 1. With the @Component decorator, you can mark a class as an Angular component and link it to a specified HTML template. This achieves the same two-way data binding relationship between your class and the HTML template originally seen in Angular 1.

What happened to $scope?

Angular 2 doesn't use scope. Instead, this is used to reference a specified instance of the class you link to the @Component decorator. We'll discuss this more when we cover ES6 classes.

Difference between @Component and @Directive

Angular 2 has the same concept of directives as Angular 1. With the @Directive decorator, you can link existing HTML to a custom class. This is very similar to components in that templates are linked to a specific class, etc. The key difference is that components require a predefined HTML template.

Use components when you want to create new HTML that links to a specific class. Use directives when you want to link existing HTML to a specified class. The key difference is you are creating new HTML with components and not with directives.

Angular 2 Component Example

Setting Up the Angular Project

Let's get started building out your first Angular 2/4 component. Assuming you have the latest version of Angular CLI installed, you can run the following to easily create a new Angular project:

ng new angularComponents

This will create a new Angular project with all the necessary dependencies. It even generates a default app.component.ts in the src/app/ directory.

To ensure the project is properly set up, run the following CLI command in the root directory of your newly created angularComponents project:

ng serve

Navigate to localhost:4200 in your browser and you should see the filler HTML provided by Angular. Your now ready start building your first component.

Creating Angular Components

Creating Components Using the CLI

You can easily create new components via the CLI:

ng g component <component-name>

This will create a new component for us (complete with the accompanying three files for our HTML, CSS, and testing) in a new directory under src/app/<component-name>. It will also import the newly created component in the root /src/app/app.module.ts module.

Creating Components Manually

If you want to create a new component without using the CLI then you need to create the supporting files (HTML, CSS) yourself and manually add the component reference to the root module.

The anatomy of Angular Components

Since the CLI already created a component app.component.ts in the src/app/ directory we will use this for our example. Open the automatically generated app.component.ts file and you should see:

import { Component } from '@angular/core';

@Component({
    selector:'app-root',
    templateUrl:'./app-component.html',
    styleUrls:['./app.component.css']
})
export class AppComponent {
        title = 'app'
}

Let's explain what each of these lines means in more detail:

Importing the Component Module

Angular 2 uses ES6 import statements to import the code you need from specified modules. In this case the import {Component} specifies to import the Component class from the @angular/core module.

The @Component Decorator

Now that you've imported the @Component class, you can use the @Component decorator to link up a defined class (in this case AppComponent) to a specific HTML element (app-root).

The @ specifies a TypeScript decorator. A decorator allows you to add meta-data to a specified class that gives the framework information on how to process the class.

The @Component decorator has specific properties such as selector and templateUrl that tell Angular 2 how to render the AppComponent class. Specifically, the selector property specifies what HTML element to bind the class to (in this case the app-root element).

Also notice how the templateUrl and stylesUrls properties reference the generated HTML, CSS files for the app.component.ts.

Writing ES6 classes

Angular 2 uses ES6 classes as the "new age" controller seen in Angular 1. While Angular 1 uses the $scope variable to link controllers to views, Angular 2 simply uses this to reference the instance of the class.

With the auto generated AppComponent class, we see a title property already defined.

Preview the referenced app.component.html file and you will see something like:

Welcome to {{title}}!

This {{title}} is referencing the same title property as defined in the AppComponent class. This is how Angular 2 achieves the same two-way data binding originally seen with Angular 1. For more on working with ES6 classes, see our tutorial on getting started with ES6 classes..

Conclusion

Components are a simple and effective way to separate app logic and easily allow you to link JavaScript classes with HTML components. While directives serve a similar need, remember to use Angular components for building out reusable pieces of HTML in your application.

Your thoughts?