Can't Access Parent Component variable in Child Component - Angular 4

Question

I have a variable named LoginResponse which stores the response I get from the server after I login. I redirect the app to dashboard on successful login. I wish to access LoginResponse in my Dashboard.component.ts

LOGIN FUNCTION IN APP COMP-

    onLogin(form: NgForm) {
    console.log(form);
    this.serverService.Login(JSON.stringify(form.value))
      .subscribe(
        (response) => { 
        form.reset();
        this.LoginResponse = response.json().data;
        jQuery(this.modalcloser.nativeElement).modal('hide'); 
        this.router.navigate(['/dashboard']);
        console.log(this.LoginResponse);
        },
        (error) => {console.log(error.json()),
     jQuery(this.modalcloser.nativeElement).modal('hide'); 
     jQuery(this.errormodal.nativeElement).modal('show'); 
         this.errormsg = (error.json().error);
    }
   );
  }

DASHBOARD COMP-

    import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor(private router: Router) { }

  @Input() LoginResponse: {token: string, teamname: string, member1name: string, member2name: string, member3name: string };

  ngOnInit() {
    console.log(this.LoginResponse);
  }

  // logOut() {
  //    this.router.navigate(['/']);
  // }

}

APP DIRECTORY-

not the directory , how you have passed the value in html. paste the code of parent component — Sajeetharan
– Sajeetharan, Commented Sep 19, 2017 at 19:01
LoginResponse isn't displayed anywhere in parent component html. I only wish to display it in Dashboard component — Ayush Singh
– Ayush Singh, Commented Sep 19, 2017 at 19:03
you need to use dashboardcomponent inside the html of parentcomponent and pass as input, otherwise it wont work — Sajeetharan
– Sajeetharan, Commented Sep 19, 2017 at 19:05

Sajeetharan · Accepted Answer · 2017-09-19 19:17:43Z

1

With the above implementation of event-emitter, your parent component should have

<app-dashboard [LoginResponse]="LoginResponse"></app-dashboard>

2nd way: You can share variables across components using a service that keeps the state and all child component subscribe to the state and parent.

@Injectable()
export class sharedService {
 LoginResponse:any;
 constructor() {
}
 Initialize() {
    this.LoginResponse = assign value here;
}

 get() {
    return this.LoginResponse;
 }
}

Then in DASHBOARD.ts

import { sharedService } from '/services/sharedService.service';
 constructor( private sharedSer : sharedService ) {

    }

Update(){
  this.LoginResponse = this.sharedSer.get();
}

edited Sep 19, 2017 at 19:17

answered Sep 19, 2017 at 19:13

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ayush Singh Over a year ago

can you demonstrate how can i do that? that will be a great help!

Sajeetharan Over a year ago

the above one should help

Hui Shi · Accepted Answer · 2017-09-19 19:16:36Z

0

In your app.component.html, inject dashboard component like below:

 <app-dashboard [LoginResponse]="LoginResponse"></app-dashboard>

answered Sep 19, 2017 at 19:16

Hui Shi

613 bronze badges

Collectives™ on Stack Overflow

Can't Access Parent Component variable in Child Component - Angular 4

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related