How to update another component from current component in angular

DECODER answered on December 5, 2020 Popularity 3/10 Helpfulness 1/10

answer How to update another component from current component in angular

related update one component from another component angular 9

related How to update another component from current component in angular

How to update another component from current component in angular

Comment

import { Injectable } from '@angular/core';
    import { Observable, Subject } from 'rxjs';
    
    @Injectable({ providedIn: 'root' })
    export class CommonService {
        private subjectName = new Subject<any>(); //need to create a subject
    
        sendUpdate(message: string) { //the component that wants to update something, calls this fn
            this.subjectName.next({ text: message }); //next() will feed the value in Subject
        }
    
        getUpdate(): Observable<any> { //the receiver component calls this function 
            return this.subjectName.asObservable(); //it returns as an observable to which the receiver funtion will subscribe
        }
    }

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: angular javascript

Link to this answer
Share Copy Link

Contributed on Oct 18 2022

DECODER

0 Answers Avg Quality 2/10

Closely Related Answers

update one component from another component angular 9

Comment

this.CommonService.updateListsObs
.subscribe(
(response) => {console.log("You will get date range in response which can be used to filter Car list in Component A ")}
)

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: angular javascript

Link to this answer
Share Copy Link

Contributed on Dec 05 2020

Better Boar

0 Answers Avg Quality 2/10

How to update another component from current component in angular

Comment

import { Component } from '@angular/core';
    import { CommonService } from 'provide proper path';
    
    @Component({ templateUrl: 'sender.component.html' })
    export class SenderComponent {
        constructor(private Service: CommonService) { } //mention the service in constructor
    
        sendMessage(): void {
            // send message to subscribers via observable subject
            this.Service.sendUpdate('Message from Sender Component to Receiver Component!');
        }
    
    }

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: angular whatever

Link to this answer
Share Copy Link

Contributed on Oct 18 2022

DECODER

0 Answers Avg Quality 2/10

How to update another component from current component in angular

Comment

import { Component, OnDestroy } from '@angular/core';
    import { Subscription } from 'rxjs';
    import { CommonService } from 'provide proper path';
    
    @Component({
        templateUrl: 'receiver.component.html'
    })
    
    export class ReceiverComponent implements OnDestroy {
        messageReceived: any;
        private subscriptionName: Subscription; //important to create a subscription
    
        constructor(private Service: CommonService) {
            // subscribe to sender component messages
            this.subscriptionName= this.Service.getUpdate().subscribe
             (message => { //message contains the data sent from service
             this.messageReceived = message;
             });
        }
    
        ngOnDestroy() { // It's a good practice to unsubscribe to ensure no memory leaks
            this.subscriptionName.unsubscribe();
        }
    }

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: whatever angular

Link to this answer
Share Copy Link

Contributed on Oct 18 2022

DECODER

0 Answers Avg Quality 2/10

How to update another component from current component in angular

Contents

More Related Answers

How to update another component from current component in angular

Closely Related Answers

update one component from another component angular 9

How to update another component from current component in angular

How to update another component from current component in angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.