Last active
February 14, 2023 06:07
-
-
Save dushyant89/ee32397f03f2da8acb60f22d10a6643d to your computer and use it in GitHub Desktop.
Angular 2 How to communicate between parent, children or sibling components; Input from Parent; Services
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { NgModule } from '@angular/core'; | |
import { BrowserModule } from '@angular/platform-browser'; | |
import { FormsModule } from '@angular/forms'; | |
import { ParentComponent } from './app.parent.component'; | |
import { ChildComponent } from './child.component'; | |
@NgModule({ | |
imports: [ BrowserModule, FormsModule ], | |
declarations: [ ParentComponent, ChildComponent ], | |
bootstrap: [ ParentComponent ] | |
}) | |
export class AppModule {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { ParentChildService } from './parent-child.service'; | |
@Component({ | |
selector: 'parent-app', | |
template: ` | |
<div> | |
<div> | |
<h1>Hello from Parent</h1> | |
</div> | |
<div style="border: 1px dotted blue;"> | |
<p> <b> Child message history </b> </p> | |
<p *ngFor="let message of childMessages"> | |
{{ message }} | |
</p> | |
</div> | |
<child-app [id] = 1> </child-app> | |
<child-app [id] = 2> </child-app> | |
</div> | |
`, | |
providers: [ ParentChildService ] | |
}) | |
export class ParentComponent { | |
childMessages: string[] = []; | |
constructor(private parentChildService: ParentChildService) { | |
parentChildService.attentionRequested$.subscribe((request) => { | |
this.childMessages.push(this.parentChildService.requestedBy + ": " + request); | |
}); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, OnDestroy, Input } from '@angular/core'; | |
import { ParentChildService } from './parent-child.service'; | |
import { Subscription } from 'rxjs/Subscription'; | |
@Component({ | |
selector: 'child-app', | |
template: ` | |
<div> | |
<div> | |
<h2>Hello from {{ id }} child component</h2> | |
<span> Message: </span> <input type="text" [(ngModel)]="message"> | |
<button (click) = "requestAttention();"> Request </button> | |
</div> | |
<div style="border: 1px dotted green;"> | |
<p> <b> Sibling message history </b> </p> | |
<p *ngFor="let message of siblingMessages"> | |
{{ message }} | |
</p> | |
</div> | |
</div> | |
` | |
}) | |
export class ChildComponent implements OnDestroy { | |
message: string; | |
subscription: Subscription; | |
siblingMessages: string[] = []; | |
@Input() id: number; | |
requestAttention(): void { | |
this.parentChildService.requestAttention(this.message, this.id); | |
} | |
constructor(private parentChildService: ParentChildService) { | |
this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => { | |
if (this.id != this.parentChildService.requestedBy) { | |
this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request); | |
} | |
}); | |
} | |
ngOnDestroy(): void { | |
// prevent memory leak when component destroyed | |
this.subscription.unsubscribe(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable } from '@angular/core'; | |
import { Subject } from 'rxjs/Subject'; | |
@Injectable() | |
export class ParentChildService { | |
// Observable sources | |
private requestAttentionSource = new Subject<string>(); | |
// Observable streams | |
attentionRequested$ = this.requestAttentionSource.asObservable(); | |
requestedBy: number; | |
requestAttention(request: string, id: number) { | |
this.requestedBy = id; | |
this.requestAttentionSource.next(request); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment