如何将一个组件中的变量用于 angular 中的另一个组件

Question

In angular application I have to use one variable which is defined in function of one component to another component

dashboard.component.ts

export class DashboardComponent implements OnInit {
public nnum: string;
  public ncount: number = 0;

// some code

  addNotification(msg) {
    //const nl = document.querySelector("#notify");
    const nlnum = document.querySelector("#notificount");
    var el = document.createElement("li");
    if (msg.event == "New Signal") {
      if (wifiarray.indexOf(msg.mac) !== -1) {
        console.log("Already exists");
      } else {
        lcount = lcount + 1;
        this.ncount = lcount;

nav.component.ts

import { Component, OnInit } from '@angular/core';
import { NotifyService } from '../../notify.service';


export class NavbarComponent implements OnInit {


}

nav.component.html

      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" ngbDropdownToggle>
          
          <i class="fa fa-bell">
 
</i>

<span class="badge badge-pill badge-danger badge-up" >{{ncount}}</span>

        </a>
</li>

and I have the notify service notify.service

import { Injectable } from "@angular/core";
export interface Message {
 
}

Now I want to use the ncount value from dashboard component to navbar component to to view the value.

I have tried but not working can anyone help me regarding this.

Answer 1

Angular provides Input and Output decorators to pass data to and from parent and child components. Please find the reference link .

If DashboardComponent is the child component of NavComponent , and you want to pass some variable data to its parent component, you'll have to use Output decorator in combination with EventEmitter , declared inside the class of DashboardComponent . You'll declare something like this:

@Output() myCount = new EventEmitter<number>();

Now wherever the value of your variable change, emit the same through this output decorator. Something like this:

this.ncount = lcount; //from your sample code
this.myCount.emit(ncount);

Now in the parent component where DashboardComponent is declared, you'll have to declare this output emitter property, something like this:

<dashboard (myCount)="countChange($event)"></dashboard>

You will receive the updated ncount value in the countChange event like this. (Note that you should have to declare countChange inside NavComponent.ts ):

public countChange(newCount: number)
{
  console.log(newCount);
}