Angular Components

Components are the fundamental building blocks of an Angular application. Each component encapsulates its own view and logic, making it reusable and maintainable. This tutorial provides an overview of Angular components, their key features, and how to create and use them effectively.

What is an Angular Component?

An Angular component is a class that is decorated with the @Component decorator. It includes a template, styles, and logic that define the view and behavior of a part of the user interface.

Key Features of Angular Components

Angular components provide several key features:

Example of an Angular Component

Here is an example of a simple Angular component:

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

@Component({
  selector: 'app-hello-world',
  template: '<h1>Hello, World!</h1>',
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

Creating a Component

You can create a new component using Angular CLI with the following command:

ng generate component my-component

This command generates the necessary files and updates the module to include the new component.

Component Template

The template defines the HTML view of the component. You can define the template inline using the template property or in a separate HTML file using the templateUrl property:

// Inline template
@Component({
  selector: 'app-inline-template',
  template: '<p>This is an inline template!</p>'
})

// External template
@Component({
  selector: 'app-external-template',
  templateUrl: './external-template.component.html'
})

Component Styles

The styles define the CSS for the component. You can define the styles inline using the styles property or in a separate CSS file using the styleUrls property:

// Inline styles
@Component({
  selector: 'app-inline-styles',
  template: '<p>This component has inline styles!</p>',
  styles: ['p { color: red; }']
})

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

Component Selector

The selector specifies the custom HTML tag that represents the component. This tag can be used in the templates of other components to include this component:

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

Component Class

The class defines the logic and behavior of the component. It is typically written in TypeScript and includes properties and methods that can be used in the component's template:

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

@Component({
  selector: 'app-greeting',
  template: '<p>{{ greeting }}</p>'
})
export class GreetingComponent {
  greeting: string = 'Hello, Angular!';
}

Inputs and Outputs

Inputs and outputs allow data to be passed into and out of the component:

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

@Component({
  selector: 'app-message',
  template: '<p>{{ message }}</p><button (click)="sendMessage()">Send</button>'
})
export class MessageComponent {
  @Input() message: string;
  @Output() messageSent = new EventEmitter<string>();

  sendMessage() {
    this.messageSent.emit(this.message);
  }
}

Conclusion

Angular components are essential for building dynamic and reusable user interfaces. By understanding their key features and how to create and use them effectively, you can build robust and maintainable Angular applications. Happy coding!