Understanding Angular Components

Components are the building blocks of Angular applications. In this lesson, you'll learn about components and their lifecycle.

What is a Component?

A component is a piece of UI that includes HTML, CSS, and TypeScript code. It represents a part of your application's user interface.

Creating a Component

Use Angular CLI to create a component easily:

ng generate component my-component

ng generate component my-component

Component Structure

An Angular component usually has four main files:

• .html: template
• .ts: logic
• .css: styles
• .spec.ts: testing

Component Decorator

The @Component decorator connects your component class to its template and styles.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Lifecycle Hooks

Angular components have lifecycle hooks that let you run code at specific points. Common hooks include ngOnInit() and ngOnDestroy().

Using ngOnInit()

ngOnInit() runs after Angular initializes component data. It's great for initial setup:

ngOnInit() {
  console.log('Component initialized!');
}

Displaying Components

Use your component's selector in other templates to display it:

<app-my-component></app-my-component>

Summary

You learned about components, how to create them, and their lifecycle hooks. Great job!