Components In Angular

In Angular, components are the fundamental building blocks of an application’s user interface. Each component represents a specific part of the UI and is responsible for rendering that part, managing its data, and handling interactions. A component in Angular consists of four key parts:

1. Template: The HTML view that defines the structure and layout of the UI for that component.
2. Class (Component Logic): A TypeScript class that contains the data (properties) and logic (methods) to manage the component’s behavior.
3. Styles: CSS or SCSS that styles the component’s template, making it look the way you want.
4. Metadata (Decorator): The @Component decorator that provides metadata for the Angular framework, linking the class, template, and styles together.

Here’s an example of a basic Angular component:

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

@Component({
  selector: 'app-example',         // Custom HTML tag for using the component
  templateUrl: './example.component.html', // Link to the template
  styleUrls: ['./example.component.css']   // Link to the styles
})
export class ExampleComponent {
  title = 'Hello Angular';           // Component data
  onClick() {                        // Component logic
    alert('Button clicked!');
  }
}

Detailed Breakdown of Angular Components

1. Component Anatomy

A component in Angular is typically composed of four major elements:

Get Ranjeet Sahoo’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Selector: This is the custom HTML tag or element that represents the component in the DOM. It allows the component to be used in the template of other components. For example, <app-header> might be a selector for a header component.

Template: Defines the view or UI of the component. This can be inline HTML or provided via an external HTML file. The template can include Angular’s template syntax (interpolation, directives, binding).

Class: This is a TypeScript class where the component logic resides. It defines the properties and methods that bind to the view. This is where you define the state and behavior of the component.

Styles: Components can have their own scoped CSS (or SCSS), ensuring that styles do not leak into other parts of the application. This can also be inline styles or external files.

Here’s an example of how these elements come together:

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

@Component({
  selector: 'app-hero',           // Custom HTML tag for the component
  template: `
    <h1>{{ heroName }}</h1>
    <button (click)="updateHero()">Change Hero</button>
  `,                              // Inline template (can also be external)
  styles: [`
    h1 {
      color: blue;
    }
  `]                              // Inline styles (can also be external)
})
export class HeroComponent {
  heroName = 'Superman';           // Component property bound to the view

  updateHero() {
    this.heroName = 'Batman';      // Component method that updates the state
  }
}

In this example:

• heroName is a property that holds the name of the hero and is rendered in the template using interpolation ({{ heroName }}).
• updateHero() is a method that changes the hero's name when the button is clicked, demonstrating event binding.

Conclusion

In Angular, components are the heart of the application. They allow developers to break down the user interface into smaller, manageable pieces, making the application more maintainable and easier to understand. Components encapsulate the data, logic, and presentation, ensuring a separation of concerns. By using components, Angular enables developers to build dynamic, interactive, and scalable UIs with reusable, modular code. Understanding how components work and mastering their use is crucial for any Angular developer.