Components in Angular

What You’ll Learn 📚

• Core concepts of Angular components
• Key terminology and definitions
• Simple and progressively complex examples
• Common questions and troubleshooting tips

Introduction to Angular Components

In Angular, components are the building blocks of your application. They control a part of the screen called a view. Each component is a TypeScript class with an HTML template and optional CSS styles.

Key Terminology

• Component: A self-contained unit of an Angular application, consisting of a TypeScript class, HTML template, and CSS styles.
• Template: The HTML part of a component that defines what gets rendered on the screen.
• Decorator: A function that adds metadata to a class, making it an Angular component.

Getting Started: The Simplest Example

npm install -g @angular/cli

ng new my-angular-app

cd my-angular-app

ng generate component hello-world

<h1>Hello, Angular!</h1>

ng serve

Progressively Complex Examples

Example 1: Data Binding

Let’s enhance our component with data binding. Update hello-world.component.ts:

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  message: string = 'Welcome to Angular!';
}

Update hello-world.component.html to use the message property:

<h1>{{ message }}</h1>

Example 2: Event Binding

Let’s add a button to change the message. Update hello-world.component.ts:

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  message: string = 'Welcome to Angular!';

  changeMessage() {
    this.message = 'You clicked the button!';
  }
}

Update hello-world.component.html to include a button:

<h1>{{ message }}</h1>
<button (click)="changeMessage()">Click me!</button>

Example 3: Input and Output

Let’s create a parent component to interact with hello-world. Generate a new component:

ng generate component parent

Update parent.component.html to include app-hello-world:

<app-hello-world></app-hello-world>

In hello-world.component.ts, add an @Input property:

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  @Input() message: string = 'Welcome to Angular!';
}

In parent.component.ts, define a message:

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  parentMessage = 'Message from Parent';
}

Update parent.component.html to pass the message:

<app-hello-world [message]="parentMessage"></app-hello-world>

Common Questions and Answers

1. What is a component in Angular?

   A component is a building block of Angular applications, consisting of a TypeScript class, HTML template, and optional CSS styles.

2. How do I create a new component?

   Use the Angular CLI command ng generate component component-name.

3. What is data binding in Angular?

   Data binding is a mechanism to synchronize data between the component class and its template.

4. How do I pass data to a component?

   Use the @Input decorator to pass data from a parent component to a child component.

5. What is event binding?

   Event binding allows you to listen for events and execute methods in response.

Troubleshooting Common Issues

If you encounter an error saying a component is not recognized, ensure it’s declared in the app.module.ts file.

Always check the console for errors if something isn’t working as expected. It often provides clues to solve the issue.

Practice Exercises

• Create a new component that displays a list of items and allows the user to add new items.
• Modify the hello-world component to accept a color input and change the text color accordingly.

For more information, check out the official Angular documentation.