Angular Tutorial: Component Interaction 🎯

Welcome back! In our previous lesson, we learned about Angular Components. Today, we're going to dive deeper and explore Component Interaction. This is a crucial concept as it allows components to communicate with each other, making our applications more dynamic and interactive. 💡

Understanding Component Interaction 📝

In a nutshell, Component Interaction refers to the ways in which Angular components can share data and functionality. We'll be looking at two main types:

Parent-Child Communication
Sibling Communication
Service Communication

Parent-Child Communication 📝

Parent-child communication is one of the most common ways components interact in Angular. Here, the parent component passes data to the child component.

Parent Component Template

html

<!-- parent.component.html -->
<app-child [data]="parentData"></app-child>

Child Component Typescript

typescript

// child.component.ts
import { Input } from '@angular/core';

export class ChildComponent {
  @Input() data: any;

  // Component logic
}

In the above example, parentData is a property of the parent component, which is passed to the child component as an input. The @Input() decorator tells Angular that the data property can accept input from parent components. ✅

Quiz

Sibling Communication 📝

Sibling communication is less common but still useful when components share a common parent. One component can emit an event, and another component can listen to that event.

Event Emitter

typescript

// sibling1.component.ts
import { EventEmitter } from '@angular/core';

export class Sibling1Component {
  public data = 'Hello from Sibling 1!';
  public dataChange = new EventEmitter<string>();

  public changeData() {
    this.dataChange.emit(this.data);
  }
}

In the above example, Sibling1Component has a dataChange event emitter. When the changeData() function is called, it emits the data property.

Event Listener

html

<!-- sibling2.component.html -->
<app-sibling1 (dataChange)="handleDataChange($event)"></app-sibling1>

typescript

// sibling2.component.ts
import { Component } from '@angular/core';

export class Sibling2Component {
  public receivedData: string;

  public handleDataChange(event: string) {
    this.receivedData = event;
  }
}

In the above example, Sibling2Component listens to the dataChange event from Sibling1Component and stores the received data in receivedData. ✅

Service Communication 📝

Services are a great way to share data across components that are not related. Services are singleton objects, meaning only one instance of a service is created per Angular application.

Service Creation

typescript

// shared.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  public sharedData: string;

  public setSharedData(data: string) {
    this.sharedData = data;
  }

  public getSharedData(): string {
    return this.sharedData;
  }
}

In the above example, we have created a service called SharedService that has a sharedData property and methods to set and get that property.

Component Usage

html

<!-- component1.component.html -->
<app-component2 [data]="sharedService.getSharedData()"></app-component2>

typescript

// component1.component.ts
import { Component, Inject } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  providers: [{ provide: SharedService, useExisting: SharedService }]
})
export class Component1Component {
  constructor(public sharedService: SharedService) {}
}

html

<!-- component2.component.html -->
<p>Shared Data: {{ data }}</p>
<button (click)="updateSharedData()">Update Shared Data</button>

typescript

// component2.component.ts
import { Component } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html'
})
export class Component2Component {
  public data: any;
  constructor(public sharedService: SharedService) {
    this.data = sharedService.getSharedData();
  }

  public updateSharedData() {
    this.sharedService.setSharedData('New Shared Data');
  }
}

In the above example, Component1Component injects the SharedService and uses it to pass data to Component2Component. Component2Component updates the shared data and Component1Component gets the updated data. ✅

And there you have it! You've learned about Component Interaction in Angular. This knowledge will help you create more complex and interactive applications.

Remember, practice makes perfect! Try out the examples and modify them to suit your needs. Happy coding! 💡🎯