0

I want to share the data from dashboard component to navbar component with the shared service as given below.

shareddata.service.ts

export class SharedData {
private sensorDet = new BehaviorSubject('');
  currentsensorDet = this.sensorDet.asObservable();
  
 constructor() { }
 sensorinfo(selectsensor:string) {
     console.log(selectsensor);

    this.sensorDet.next(selectsensor);
  }

dashboard.component.ts


constructor(private shareddata:SharedData) {}
ngOnInit(){

this.shareddata.currentsensorDet.subscribe(selectsensor => 
  {  this.sensorval = selectsensor;
    console.log(this.sensorval);
    this.dataChanged(JSON.parse(selectsensor));
}

});
}

navbar.component.ts

import { SharedData } from './../../shareddata.service';

addselectsensor(sensevar){
    this.shareddata.sensorinfo(JSON.stringify(sensevar));



  }

the above dashboard data I will use in html file of navbar as

navbar.component.html

 <li class="nav-item dropdown" ngbDropdown >
        <a class="nav-link dropdown-toggle" id="notificationDropdown" ngbDropdownToggle>
    
          <i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp; Chennai

 </a>
 <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" style="height: 150px; overflow: auto;" ngbDropdownMenu aria-labelledby="notificationDropdown">
 
  <ul class="list-group"  id="hvb"*ngFor ="let sensor of sensors;let i =index" (ngModelChange)="addselectsensor(selectsensor)">
    <div class="custom-control custom-switch" >

    <li class="list-group-item borderless" style="padding: 5px;" > 

    <div class="row no-gutters">
      <div class="col-sm-4" >
        {{sensor.name}} 
        </div>
        <div class="col-sm-7"></div>
        <div class="col-sm-1" >
          <input type="checkbox"  class="custom-control-input" id="customSwitches{{i}}" (click)="addselectsensor(sensor)">
<label class="custom-control-label" for="customSwitches{{i}}">    </label>
        </div>
          
  
    </div>
    
  </li>
  </div>
  </ul>    
</div>
      </li>

for checkbox selection I have used the onchange function in dashboard component file and I have to use this in navbar component .

dashboard.component.ts

 dataChanged (selectsensor) {
    console.log(selectsensor);

    var existsflag = -1;
    
        for(var ind=0;ind<this.sensorsarray.length;ind++){
    
           if(this.sensorsarray[ind].name == selectsensor.name){

//some code///

My requirement is from the dashboard component I have to share the data to navbar (for selection of checkboxes i.e toggling of checkboxes)with the shareddata service.

The above code I have used but not working for me Can anyone help me regarding this.

Haritha
  • 77
  • 2
  • 10
  • Please add a [Stackblitz](https://stackblitz.com/) – Get Off My Lawn Feb 10 '21 at 16:36
  • It is not possible to run in Stackblitz, why because the code will run with the help of some backend. Can you help me for the requirement – Haritha Feb 11 '21 at 09:25
  • Your code looks like it should work. So without a stackblitz I don't think I or anyone will be able to help you. If it's data you need from a backend fake it on stackblitz using an observer and a timeout. – Get Off My Lawn Feb 11 '21 at 14:08

0 Answers0