How to change the values of Boolean in between two components in angular 4

Question

I am trying to hide some Content in in the UI using *ngif of angular4 its not working properly. can anybody help me on this. its value is not changing in the other component.

Navbar Template:

<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
  <ul class="navbar-nav ml-auto mt-2 mt-md-0">
    <li class="nav-item active">
      <a class="nav-link" href="#">Dashboard</a>
    </li>
    <div *ngIf="saveSpinner==true" class="dropdown notificatio-dropdown">
      <li>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false"><span class="noti-icon ml-2"></span>Sample Data</a>
      </li>
    </div>
  </ul>
</div>

Navbar Component: Here saveSpinner is set to false.

    import {Component} from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']

})
export class NavbarComponent implements OnInit {
   saveSpinner= false
  ngOnInit() {
  }
}

Dashboard template:

<app-navabar></app-navabar>

Dashboard Component: Here i am trying to change the value of saveSpinner to true. Its Not Changing. Here is the Code.

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

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

Can anybody help me how to change the value of saveSpinner in the DashboardComponent.

Answer 1

You can use EventEmitter something like

Create a common service

export class EmitterService {
       public spinEmitter:EventEmitter<bool>=new EventEmitter(); 

    }

Then in Dashboard Component inject service dependency and call change name method to emit the change

 constructor(private emitter :EmitterService) {}
 this.emitter.spinEmitter.emit(true);

And at the end in Navbar Component subscribe to changes

this.emitter.spinEmitter.subscribe(val=>{this.saveSpinner=val})

Answer 2

you can use the @Input approach of Angular :

Navbar Component :

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']

})
export class NavbarComponent implements OnInit {
  @Input saveSpinner : boolean= false
  ngOnInit() {
  }
}

in the App component(parent component) :

<app-navabar [saveSpinner]="saveSpinner"></app-navabar>

the value of saveSpinner of the app component will be passed to the saveSpinner of the navbar component. in this case (saveSpinner = true) the navbar will be shown.

Hope it helps :)

Answer 3

Before to give you a simple explanation of component communication, I strongly recommend you to go and read the documentation with all the details. It will help you to see the big picture.

But to recap how Angular components can possibly communicate together, here are the two main methods:

@Input and @Output

This is the simplest way you can communicate between components and pass data from top to bottom (Parent => Child).

@Input in your child component receives a data from the parent and @Output send the data from parent to the child. As others pointed out the @Input is a simple class variable and @Output usually is EventEmitter.

ViewChild()

This is another way to access the child data. I personally prefer the first method, because it explicitly defines what's going, but yet, this is another method to use it in some use cases.

You can get more information https://angular.io/guide/component-interaction

Tip

An important trick here is, you should always communicate from parent to child and if ever you find yourself that you need to control the flow of the parent by child component, it means you do something really really wrong and you need to rethink about your architecture.