Question: i want to checkbox tick in one component and show data in different component when checkbox checked.

component 1

```
<div class="col-md-6" *ngFor="let mapLegend of mapLegends">
            <label class="checkbox">
            <input type="checkbox"
            name="mapLegend"
            value="{{mapLegend.name}}"                            
            [(ngModel)]="mapLegend.checked"/>
            <span class="checkbox__input"></span>
            <span class="checkbox__label"> {{mapLegend.name}}</span>
            </label>
 </div>

```

component 2
want data if mapLegend.checked

Answer: 
There are several ways to do it. From your requirement, I consider that you want to `observe` the changes made in either of the components. So I'll suggest you to go for `subject`.

Create a `subject` in a service. Now, subscribe to the `variable` in the components where you want to listen to any changes that has been.

```
export class SomeService{
    public mySubject = new Subject();
    choice: []<any>;

    insertCheckBoxValue(val){
        this.choice.push(val);
        this.mySubject.next('the value you want to transmit to all Subscribers'); // Let's say: Yoda
    }
}

export class Component1{
    constructor(private svc: SomeService){}

    this.svc.mySubject().subscribe( val => console.log(val)) // this will listen to the changes of Comp2 : Yoda

    checkBoxClicked(someVal){
        this.svc.insertCheckBoxValue(someVal);
    }

}

export class Component2{
    constructor(private svc: SomeService){}

    this.svc.mySubject().subscribe( val => console.log(val)) // this will listen to the changes of Comp1 : Yoda

    checkBoxClicked(someVal){
        this.svc.insertCheckBoxValue(someVal);
    }

}

```

> 
> If you want to share the data, then create a variable in `SomeService` file and get its value whenever `.next()` is fired. You can actually share a common value from `.next(your_value)` and then subscribing it in another component.
> 
> 
> 

[Here is the demo as you asked](https://angular-8p2pth.stackblitz.io) & [Here is the code](https://stackblitz.com/edit/angular-8p2pth?file=app%2Fsib1.component.ts)

**Tweak the above code to suit your requirement and increase efficiency. It has to be improved to match your specific needs**
You could use a shared service and send a notification from any component injecting the service.

Consider the following :

**checkbox.service.ts**

```
import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class CheckboxService {
  // initial value false (not checked)
  public checkbox = new BehaviorSubject<boolean>(false);
  checkboxObservable = this.checkbox.asObservable();

  changeCheckboxState (value: boolean): void {
    this.checkbox.next(value);
  }
}

```

And then in your components:

**reciver.component.ts**

To get the checkbox state you do:

```
constructor(private cs: CheckboxService) {
    this.cs.checkboxObservable
       .subscribe((checkboxState) => {
              // getting the value
              console.log(checkboxState);
          });
    }

```

**sender.component.ts**

To set a new state for the checkbox you simply use:

```
changeCheckboxState(){
this.cs.changeCheckboxState(this.mapLegendCheckbox);
}

```

**Note** 
don't forget to add the service in the provides arrays and the component in the declarations array of the **same module** so you don't get any errors.