Angular: Modify parent component's field using route

Question

Angular: Modify parent component's field using route

Hello everyone!

I'm seeking assistance. In my Angular 10 application, I have a component called A.

Within this component, there is a <router-outlet> and routes defined in the routes.ts file.

My goal is to modify a variable (field) inside component A by clicking a button from another component named B, which is a route within the <router-outlet>. How can I achieve this?

Let's consider the following scenario:

A.component.html

<B [changeFieldOfA]="func"></B>

A.component.ts

export class A {
    foo: string = "";
    func() {
        this.foo = "bar";
    }
}

By passing a function that updates the field in component A to component B, everything works as intended.

However, how can we handle a situation like this?:

A.component.html

<router-outlet></router-outlet>

routes.ts

{path: "b", component: B}

In this case, I aim to invoke the func(), which belongs to A and modifies its field, within B. Unfortunately, using Input() is no longer feasible due to the routing constraints. Is there an alternative approach?

angular typescript angular10

Answer 1

Answer №1

Check out the demo illustrating how to utilize a service for communication between components.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ShareService  {   
  constructor() { } 

  private paramSource = new BehaviorSubject("");
  sharedData = this.paramSource.asObservable();

  setParam(param: string) { 
    this.paramSource.next(param);
  }    
}

To set data in the service:

this.shareService.setParam('Sending parameter');

To retrieve data from the service:

this.shareService.sharedData.subscribe(data => { 
  this.your_variable = data;
})

Make sure to include the service in your component's constructor as shown below:

constructor(private shareService: ShareService){}

Answer 2

Check out the demo illustrating how to utilize a service for communication between components.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ShareService  {   
  constructor() { } 

  private paramSource = new BehaviorSubject("");
  sharedData = this.paramSource.asObservable();

  setParam(param: string) { 
    this.paramSource.next(param);
  }    
}

To set data in the service:

this.shareService.setParam('Sending parameter');

To retrieve data from the service:

this.shareService.sharedData.subscribe(data => { 
  this.your_variable = data;
})

Make sure to include the service in your component's constructor as shown below:

constructor(private shareService: ShareService){}

Angular: Modify parent component's field using route

Answer №1

Similar questions

Adjust the component suppliers based on the @input

Flipping the order of arguments in curried functions with fp-ts

Angular4 is throwing an error stating that the center element in the HTML is an undefined function

Supabase encounters various errors during operation

Managing API responses using Redux and Typescript

Consequences of eliminating Angular component wrapper tags from the DOM

Access your account using Google authentication within an Angular framework

Avoid Angular 6 router from taking precedence over routes set in Express Server

Error: A variable is potentially 'undefined' (ts2532), even though I have just assigned a value to it

Identify potential interference with Sentry.captureMessage(...) or Sentry.captureException(...) functions within a JavaScript application, such as being obstructed by an ad-blocking extension

Error occurs when Protractor end-to-end tests encounter a problem with browser.executeAsyncScript

Having trouble debugging localhost because the cookie for a specific domain is not being written

Angular is throwing an error stating that the type '{ }[]' cannot be assigned to the type '[{ }]'

Is there a way to establish a boundary for the forEach function in TypeScript?

The parameter 'To' cannot be assigned the argument of type '{pathname: string; shipment: TShipment;}'

Angular is patiently waiting for the initial function to activate

Using setBounds in ng2-ui/map: A step-by-step guide

Utilize node-pre-gyp to execute the installation with the option to fallback to building and specify the static

Exploring the implementation of Generic types within a function's body

Chunks loaded incorrectly due to laziness