Modifying the variable value in one component by retrieving it from another component

Question

Modifying the variable value in one component by retrieving it from another component

In my Angular app, I have a FAQ component located in the app.component.html file, positioned next to the Router Outlet as shown below:

<div class="site-container">
  <router-outlet></router-outlet>
  <app-callback></app-callback>
  <app-faq></app-faq>
</div>

One of the routes leads to .../question which displays a question component. When a question is answered within this component (by clicking a button), I want to update a variable in the FAQ component.

answerQuestion(id: string) {
    // Answer question coding...
    faq.faqDisplay = false;
  }

This code snippet modifies the value of a declared variable in the FAQ component to false.

export class FaqComponent implements OnInit {
  faqDisplay = true;
}

Initially, I considered using @Input() or @Output(), but due to these components being situated side by side rather than being directly related as parent and child, I faced challenges implementing this approach.

While there are resources on passing data between parent and child components, solutions for communication between side-by-side components seem scarce. Is there a method to achieve this type of communication, or perhaps an alternative solution?

angular typescript

Answer 1

Answer №1

If you're looking for the most effective way to achieve this, consider utilizing rxjs. Start by creating an Injectable and include a Subject as shown below:

@Injectable()
export class YourService {

    public $faqHasChanged = new Subject<void>();

}

When responding to a question in a component, trigger an event like so:

@Component
export class YourSenderComponent {

    constructor(
        private service: YourService,
    ) {}

    answerQuestion(id: string) {
        // Add your code to answer the question...
        faq.faqDisplay = false;
        this.service.$faqHasChanged.next();
    }

}

In the component where you want to be notified of changes in the FAQ section, follow this approach:

@Component
export class YourReceiverComponent implements OnInit {

    faqDisplay = true;

    constructor(
        private service: YourService,
    ) {}

    public ngOnInit() {
        this.service.$faqHasChanged.subscribe(() => {
            this.faqDisplay = false;
        });
    }

}

This method allows you to receive updates in any part of your application and customize the interface accordingly.

For more insights on rxjs, visit this link to enhance your implementation further.

Answer 2

If you're looking for the most effective way to achieve this, consider utilizing rxjs. Start by creating an Injectable and include a Subject as shown below:

@Injectable()
export class YourService {

    public $faqHasChanged = new Subject<void>();

}

When responding to a question in a component, trigger an event like so:

@Component
export class YourSenderComponent {

    constructor(
        private service: YourService,
    ) {}

    answerQuestion(id: string) {
        // Add your code to answer the question...
        faq.faqDisplay = false;
        this.service.$faqHasChanged.next();
    }

}

In the component where you want to be notified of changes in the FAQ section, follow this approach:

@Component
export class YourReceiverComponent implements OnInit {

    faqDisplay = true;

    constructor(
        private service: YourService,
    ) {}

    public ngOnInit() {
        this.service.$faqHasChanged.subscribe(() => {
            this.faqDisplay = false;
        });
    }

}

This method allows you to receive updates in any part of your application and customize the interface accordingly.

For more insights on rxjs, visit this link to enhance your implementation further.

Answer 3

Answer №2

When it comes to communication between sibling components in Angular, there are various approaches that can be taken.

One common method is to use a shared service that acts as a bridge between the components, along with utilizing rxjs to establish a stream using a Subject:

export class CommunicationService{
  private messageStream = new Subject<boolean>(); // source
  messageStream$ = this.messageStream.asObservable(); // stream
}

@Component
export class Sibling1{

    constructor(
        private communicationService: CommunicationService,
    ) {}

    answerQuestion(id: string) {
        // Code for answering question...
        faq.faqDisplay = false;
        this.communicationService.messageStream.next(faq.faqDisplay);
    }

}

@Component
export class Sibling2{

messageDisplayed: boolean;

    constructor(
        private communicationService: CommunicationService,
    ) {}

      public ngOnInit() {
        this.communicationService.messageStream$.subscribe((value) => {
            this.messageDisplayed = value;
        });
    }
}

Answer 4

When it comes to communication between sibling components in Angular, there are various approaches that can be taken.

One common method is to use a shared service that acts as a bridge between the components, along with utilizing rxjs to establish a stream using a Subject:

export class CommunicationService{
  private messageStream = new Subject<boolean>(); // source
  messageStream$ = this.messageStream.asObservable(); // stream
}

@Component
export class Sibling1{

    constructor(
        private communicationService: CommunicationService,
    ) {}

    answerQuestion(id: string) {
        // Code for answering question...
        faq.faqDisplay = false;
        this.communicationService.messageStream.next(faq.faqDisplay);
    }

}

@Component
export class Sibling2{

messageDisplayed: boolean;

    constructor(
        private communicationService: CommunicationService,
    ) {}

      public ngOnInit() {
        this.communicationService.messageStream$.subscribe((value) => {
            this.messageDisplayed = value;
        });
    }
}

Modifying the variable value in one component by retrieving it from another component

Answer №1

Answer №2

Similar questions

Failure to Generate stats.json File When Building Angular 6 with --stats-json Flag

Prevent swiping beyond the final slide in a react-slick carousel

Issues have been encountered with the Angular Bootstrap accordion animation not functioning properly when closing in a production

The json.stringify method is inserting additional backslashes into the response sent by res.send()

What could be causing the malfunction when using TypeScript's generic T with any?

Angular 5 introduces a bespoke directive that allows for element repetition within the framework

Switching between different types of generic functions in typescript

TypeScript class that utilizes internal functions to implement another class

Best practices for handling HTTP requests in Angular 5

Creating a universal loader for all components in Angular 2: A step-by-step guide

Using Node.js and TypeScript to define custom data types has become a common practice among developers

Unable to locate module '...' or its associated type declarations. Issue encountered in NextJS with TypeScript integration

Extract the string values of a specific property from an array of objects using Typescript

Encountering a 401 Error while Sending a POST Request in Angular 2

Error: Axios encountered an issue with resolving the address for the openapi.debank.com endpoint

Issue with Typescript express application utilizing express-openid-connect wherein cookies are not being retained, resulting in an infinite loop of redirects

Making a tooltip in Angular programmatically

The attribute 'pixiOverlay' is not found in the property

What is the process for extracting dates in JavaScript?

How can I call a global function in Angular 8?