Creating Your First Angular 2 Components

If you're already familiar with the Angular ecosystem, it’s time to build your own components. This guide will show you how to create Angular components using the latest Angular versions.

Ensure you have the Angular CLI installed. While not strictly necessary, it's highly recommended to start with the Angular CLI for a smoother development experience.

Key Takeaways

• @Component replaces AngularJS controllers, linking classes to HTML templates.
• Angular components create new HTML and are distinct from directives, which enhance existing HTML.
• The Angular CLI simplifies creating new components and managing project files.
• Angular's use of ES6 classes supports modern JavaScript and enhances data binding.

Angular Components Overview

The @Component decorator in Angular is used to define components, a core building block for Angular applications. Unlike AngularJS, there’s no $scope; instead, ES6 class instances are used for data binding.

What Happened to $scope?

Angular uses this instead of $scope to encapsulate data within a component's class instance, making it clearer and more powerful.

Component vs. Directive

Both @Component and @Directive decorators serve specific purposes; components are for creating reusable UI blocks with their own HTML, while directives manipulate existing DOM elements or components.

Angular Component Example

Setting Up the Angular Project

Start a new Angular project if you haven't already:

ng new angularComponents

This initializes a new project with all dependencies, including a default app.component.ts in src/app/.

To run your project, navigate to the root directory and execute:

ng serve

Visit http://localhost:4200 in your browser to verify your project setup is correct.

Creating Angular Components

Using the CLI

Create a new component effortlessly with:

ng generate component <component-name>

This generates a component complete with HTML, CSS, and test files in src/app/<component-name> and updates app.module.ts appropriately.

Creating Components Manually

If avoiding the CLI, manually create required files and update app.module.ts to import your new component.

Anatomy of Angular Components

Let’s look at app.component.ts, automatically generated when you create a new Angular project.

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

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

importing the Component Module

Angular uses ES6 import statements. Here, Component is imported from @angular/core, linking the class with essential Angular functionalities.

The @Component Decorator

The decorator defines metadata for Angular to understand how to compile a TypeScript class into a component and bind it to a DOM element using the selector property.

Working with ES6 Classes

Angular embraces ES6 classes to build components, similar to AngularJS controllers but more powerful. Properties defined in a component's class, such as title, are easily bound within HTML templates.

The following in app.component.html demonstrates two-way binding:

Welcome to {{title}}!

This example shows how {{title}} dynamically binds to the title property.

Conclusion

Components are a foundational element of Angular, distinctly separating logic and UI while making the codebase manageable. Use components over directives for creating new UI elements with encapsulated logic and styles.

FAQ

How do components differ from services?

Components manage UI and user interactions, while services provide reusable business logic that components can share.

Can components be nested within other components?

Yes, you can nest components freely, allowing you to build complex and modular UIs.

Does Angular CLI automatically update imports?

Yes, when you generate a component using the CLI, it updates app.module.ts automatically to include the component.