How to set a variable to another angular 2 component

Question

I am creating an Angular 4 application and I have two separate pages, a Detail page and an Edit page, each of which has its own component.

When a user edits a model on the Edit page, I redirect it back to the Details page as follows:

// This is within my RetailerEditComponent save(): void { this.retailerService.updateRetailer(this.retailer) .then(() => this.router.navigate(['/admin/retailer'])); } 

On the admin / retailer page, I have a RetailerDetailComponent that looks like this:

 export class RetailerDetailComponent { retailer: Retailer; public hasBeenUpdated: boolean = false; constructor( private retailerService: RetailerService, ) { console.log("in RetailerDetailComponent"); } } 

How to set bool hasBeenUpdated to true from my other page?

Update:

I like the idea of ​​EventEmitter, but the problem is working.

My RetailerService:

 export class RetailerService { public OnRetailerUpdated = new EventEmitter();; updateRetailer(retailer: Retailer): Promise<Retailer> { this.OnRetailerUpdated.next(true); return new Promise((resolve, reject) => { apigClient.retailerVPut({}, retailer, {}) .then(function (result) { resolve(result.data[0]) }).catch(function (result) { reject(result) }); } }) }); } } 

And in my RetailerDetailComponent:

RetailerDetailComponent export class implements LoggedInCallback {retailer: retailer;

 public showError: boolean; constructor( private retailerService: RetailerService) { } ngOnInit(): void { this.retailerService .OnRetailerUpdated .subscribe(value => { this.showError = true; console.log('Event thingy worked') }); } 

But the console message is not displayed

Answer 1

The best way is to use a subscription with EventEmitter. Example below:

• You can determine the event emitter in your seller service:

public OnRetailerUpdated = new EventEmitter <boolean> ();

2. Then in your "updateRetailer" method add this line:

this.OnRetailerUpdated.next (true);

3. Subscribe to this event at your RetailerDetailComponent:

this.retailerService .OnRetailerUpdated .subscribe (value => {// Perform the appropriate action here});

 private subscription; ngOnInit() { this.subscription = this.retailerService.OnRetailerUpdated .subscribe(value => { // Perform the appropriate action here }); }; ngOnDestroy() { this.subscription.unsubscribe(); }; 

Answer 2

You have several options:

The first one is to create a retailer card inside your service that indicates which retailers are updated, and set the value while you call the updateRetailer method.

 public retailersUpdateStates: { [id: string]: Retailer } = {}; 

and condition checking method:

 public hasBeenUpdated(retailer: Retailer) { return !!this.retailersUpdateStates[retailer.id] } 

When calling the method:

 retailersUpdateStates[retailer.id] = true; 

And in your component:

 public get hasBeenUpdated() { return this.retailersService.hasBeenUpdated(this.retailer); } 

The second would be to add the hasBeendUpdated property to the Retailer model and update it accordingly. In the component template, you can simply:

 {{ retailer?.hasBeenUpdated }} 

The third should go with the router parameter, which is the retailer identifier that has been updated. (But this does not seem like a fantasy).

And there are several more methods, for example, ngrx for state management. With this “single source of truth”, it would be easy to share states with components or use rxjs subject to retail state management, as described in @faisal's answer.

Answer 3

Use for example. RetailerService for sharing shared variables between components.