Sending information from a component inside a router-outlet to a higher-level "Parent" component in Angular 2

Question

Sending information from a component inside a router-outlet to a higher-level "Parent" component in Angular 2

Is there a way to transfer data from a component embedded within a router-outlet tag in a "parent" component's HTML template back to the parent component?

typescript angular

Answer 1

Answer №1

To start off, it is essential to set up a main Component at the top level. Within this parent component, make sure to include a service wherever it is needed.

The structure of the service should resemble the following:

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

@Injectable()
export class HeaderService {
 private headerSource: BehaviorSubject<boolean> = new BehaviorSubject(false);
 header = this.headerSource.asObservable();

 changeMode(mode) {
     this.headerSource.next(mode);
 }
}

Next, in your parent component:

import {Component, OnInit} from "@angular/core";
import { Subscription } from 'rxjs/Subscription';
import { HeaderService } from "../HeaderService";
@Component({
  selector: "App",
  template: `<navbar *ngIf="userMode"></navbar>
         <router-outlet></router-outlet>
        `
})

export class AppComponent  {
   userMode: boolean = false;
   subscription: Subscription;


 constructor(private headerService: HeaderService) { 
   this.subscription = this.headerService.header
        .subscribe(mode => this.userMode = mode);

 } 
}

Now, you can adjust the mode from a child component within the router-outlet using the following code snippet:

import { Component} from '@angular/core';
import { HeaderService } from "../HeaderService";

 @Component({
    selector: "child",
    templateUrl: "app/components/home.html"
 })
 export class HomeComponent{
   constructor(private headerService: HeaderService) {
      this.headerService.changeMode(true);
   })
 }

I trust that these instructions will prove beneficial for your situation. Best of luck!

Answer 2

To start off, it is essential to set up a main Component at the top level. Within this parent component, make sure to include a service wherever it is needed.

The structure of the service should resemble the following:

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

@Injectable()
export class HeaderService {
 private headerSource: BehaviorSubject<boolean> = new BehaviorSubject(false);
 header = this.headerSource.asObservable();

 changeMode(mode) {
     this.headerSource.next(mode);
 }
}

Next, in your parent component:

import {Component, OnInit} from "@angular/core";
import { Subscription } from 'rxjs/Subscription';
import { HeaderService } from "../HeaderService";
@Component({
  selector: "App",
  template: `<navbar *ngIf="userMode"></navbar>
         <router-outlet></router-outlet>
        `
})

export class AppComponent  {
   userMode: boolean = false;
   subscription: Subscription;


 constructor(private headerService: HeaderService) { 
   this.subscription = this.headerService.header
        .subscribe(mode => this.userMode = mode);

 } 
}

Now, you can adjust the mode from a child component within the router-outlet using the following code snippet:

import { Component} from '@angular/core';
import { HeaderService } from "../HeaderService";

 @Component({
    selector: "child",
    templateUrl: "app/components/home.html"
 })
 export class HomeComponent{
   constructor(private headerService: HeaderService) {
      this.headerService.changeMode(true);
   })
 }

I trust that these instructions will prove beneficial for your situation. Best of luck!

Sending information from a component inside a router-outlet to a higher-level "Parent" component in Angular 2

Answer №1

Similar questions

Continuous HTTP Stream Observable that only transfers data without emitting any other items

When trying to create a new project using `ng new project`, the path specified was not

The element is not defined in the Document Object Model

Struggling with integrating Axios with Vue3

Angular8 Material Grid displaying headers and tiles, experiencing slight resizing issue with mat-grid-tile content

Navigating the intricacies of debugging sub-domains in Angular projects using Visual Studio Code (VS

Create a CRUD interface in Angular 5 using automated generation techniques

Tips for effectively passing navigation as props in React Navigation with Expo

Deactivate the button while the form is being submitted

Angular 7 and Spring 5 are being hindered by CORS restrictions

Confidently set up a proxy that is recursively nested and strongly typed

Angular loop using an HTTP GET request is producing garbled information

Guide to customizing the appearance of a component's host element on-the-fly

Developing a Universal Type in Typescript

I encountered an error while trying to deploy my next.js project on Vercel - it seems that the module 'react-icons/Fa' cannot be found, along with

Passing data between two Angular directives using EventEmitter

Incorporating Copyleaks SDK into Angular: A Seamless Integration

The issue of Rxjs Subject in Angular2 running twice persists even after unsubscribing

Ensure all fields in an interface are nullable when using TypeScript

Utilizing stored procedures to send JSON data to Angular application