Introduction to Components in Angular

Components are the fundamental building blocks of Angular applications. Each component encapsulates a portion of the user interface, along with its related logic and styling. This tutorial provides an introduction to 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:

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'
})
export class ExternalTemplateComponent {}

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']
})
export class ExternalStylesComponent {}

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-inline-template></app-inline-template>

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!