Site icon GlaptTech

Angular Components

Chapter 3: Angular Components

Components are the building blocks of an Angular application. They are responsible for handling the logic and rendering the UI for a specific part of the application. To create a component, you need to define a TypeScript class, an HTML template, and optional CSS styles.

Create a new component by running the following command in the terminal:

ng generate component component-name

This will create the necessary files for the component, including a TypeScript class, an HTML template, and a CSS file. You can find these files in the corresponding component folder.

  1. Creating and using components:

To create a component, you define a TypeScript class with the @Component decorator. The decorator provides metadata for the component, such as the selector (used to identify the component in HTML), template URL (the path to the HTML template file), and styles (the CSS styles for the component).

In the TypeScript class of your component, you can define properties, methods, and lifecycle hooks. For example:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  name: string = 'John';

  greet() {
    console.log('Hello, ' + this.name);
  }
}

In the HTML template, you can use the component’s properties and methods:

<p>Hello, {{ name }}</p>
<button (click)="greet()">Greet</button>
  1. Component communication:

Component communication allows components to interact and share data with each other. There are three main ways to achieve this: input properties, output properties with event emitters, and services.

To pass data from a parent component to a child component, you can use input properties. In the parent component, you define the property and bind it to a value:

<app-child [name]="parentName"></app-child>

In the child component, you use the @Input decorator to declare the input property:

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() name: string;
}

To emit events from a child component to a parent component, you can use output properties and event emitters. In the child component, you define the output property and emit an event:

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Output() clicked = new EventEmitter<void>();

  handleClick() {
    this.clicked.emit();
  }
}

In the parent component, you can handle the emitted event:

<app-child (clicked)="handleClick()"></app-child>
  1. Component lifecycle hooks:

Component lifecycle hooks allow you to perform actions at different stages of a component’s lifecycle, such as initialization, rendering, and destruction. Some commonly used lifecycle hooks include ngOnInit, ngOnChanges, ngOnDestroy, etc.

In the component class, you can implement the desired lifecycle hooks and add custom logic. For example:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls:

 ['./my-component.component.css']
})
export class MyComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component initialized');
  }

  ngOnDestroy() {
    console.log('Component destroyed');
  }
}

The ngOnChanges hook is another important lifecycle hook that is called whenever there are changes to the input properties of a component. It provides you with the ability to react to these changes and perform any necessary actions.

In the component class, you can implement the ngOnChanges hook and define the logic to handle the changes. The hook receives a SimpleChanges object that contains information about the changes to the input properties.

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnChanges {
  @Input() name: string;

  ngOnChanges(changes: SimpleChanges) {
    // Check if the 'name' input property has changed
    if (changes.name) {
      console.log('Name changed:', changes.name.currentValue);
    }
  }
}

In this example, whenever the name input property changes in the parent component, the ngOnChanges hook is called in the child component. You can access the new value of the property using changes.name.currentValue and perform any necessary actions.

The ngOnChanges hook is particularly useful when you need to react to changes in input properties and update the component’s behavior or state accordingly.

During the component’s lifecycle, Angular will call the corresponding hooks, allowing you to perform tasks like initializing data, subscribing to observables, or cleaning up resources when the component is destroyed.

This covers the detailed explanation and code implementation for Chapter 3: Angular Components.

Exit mobile version