CODEWITHSUNDEEP
angularangular2-components
Mix Austria
Mix Austria

Reputation: 935

Updating a parent component when child component variable is changed

For example I have a variable called totalQuantity that came from a service.

I have a child component that initializes that variable ONLY if a user has logged in.

This is the child component.

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

import { CartService } from '../cart';

@Component({
    selector: 'landing',
    templateUrl: './landing.component.html'
})

export class LandingComponent implements OnInit{
    @Output() homeChanged = new EventEmitter;

    constructor(private _cartService: CartService){}

    ngOnInit(){
        this._cartService.getCartItems(localStorage.getItem('currentUserId'))
            .subscribe((cart) => {
                this.homeChanged.emit(this._cartService.totalQuantity);
                console.log(this._cartService.totalQuantity);
            },
            err => console.log(err));
    }
}

As you can see, I have an @Output variable called homeChanged and will emit the totalQuantity when the child component initializes. I need to display it in my parent component IF ONLY the user is logged in because that's the only time Cart on navbar will show.

This is my parent component.

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

import { loginStatusChanged } from './auth.guard';
import { CartService } from './cart';
import { UserService } from './user';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app works!';

  loginStatus: boolean;

  constructor(private _cartService: CartService, private _userService: UserService, private _router: Router){}

  onLogout(){
    this._userService.logout();
    loginStatusChanged.next(false);
    this._router.navigate(['/login']);
  }

  ngOnInit(){
    this.onLogout();
    loginStatusChanged.subscribe(status => this.loginStatus = status);
  }
}

Parent component HTML where I will put the totalQuantity

<ul class="navigation">
  <li class="logo"><img src="assets/images/nav_logo.png"></li>
  <li><a routerLink="/home" routerLinkActive="active">Home</a></li>
  <li><a routerLink="/mainproducts" routerLinkActive="active">Products</a></li>
  <li *ngIf="loginStatus"><a href="http://localhost:3000">Designer</a></li>
  <li *ngIf="loginStatus"><a routerLink="/cart" routerLinkActive="active">Cart({{totalQuantity}})</a></li>
  <li *ngIf="!loginStatus"><a routerLink="/login" routerLinkActive="active">Login</a></li>
  <li *ngIf="loginStatus" class="dropdown"><a (click)="onLogout()">Logout</a></li>

</ul>

<router-outlet></router-outlet>

Can anyone help me on displaying the totalQuantity on my navbar beside the cart?

Upvotes: 1

Views: 2847

Answers (2)

AVJT82
AVJT82

Reputation: 73377

You can use Subjects, like so:

In your parent:

public static returned: Subject<any> = new Subject();

and in your parent constructor you subscribe to changes in child, like so:

  AppComponent.returned.subscribe(res => {
     console.log('change happened!');
     console.log(res) // you have your passed value here
  });

And in your childcomponent, where you need parent updated add this, and as parameter what you want, here we just pass a string.

AppComponent.returned.next('test'); // pass whatever you need

EDIT: Output only works in case your child component is NOT behind a different route. So in your case you cannot use Output.

Upvotes: 4

Yashveer Singh
Yashveer Singh

Reputation: 1987

here is how you can update parent component from child .

        @Component({
          selector: 'child-selector',
          template: 'child.component.html'
        })
        export class ChildComponent {  
          @output() notify: EventEmitter<string> = new EventEmitter<string>();

          onClick() {
            this.notify.emit('Click from nested component');
          }
        }




        /* parent.conponent.html */
        <div>  
          <h1>I'm a container component</h1>
          <child-selector (notify)='onNotify($event)></child-selector>
        </div>  




        @Component({
          selector: 'parent-selector',
          template: 'parent.component.html',
          directives: [ChildComponent]
        })
        export class ParentComponent {  
          onNotify(message:string):void {
            alert(message);
          }
        }

Upvotes: 0

Related Questions