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**
Still @Shashank Vivek is most generic way to do cross component communication. If what you need is simply what you have discribe : 
if my checkbox is true, then initialize childComponent with my model as parameter, then you can do something like this :

Component :

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  mapLegends: Array<{
    checked: boolean,
    name: string
  }>;

  constructor() {
    this.mapLegends = [
        {
          checked: false,
          name: 'Check 1'
        },
        {
          checked: false,
          name: 'Check 2'
        }
    ];
  }

  onCheckboxChange(index: number) {
    console.log(index);
    console.log(this.mapLegends[index]);
  }
}

```

html : 

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

 <div class="col-md-6" *ngFor="let mapLegend of mapLegends; let i = index">
   <hello *ngIf="mapLegend.checked" [name]="mapLegend.name"></hello>
 </div>

```

[Online version](https://stackblitz.com/edit/angular-ptjyzb?file=app%2Fapp.component.html)

**UPDATE 1**

On `Component.ts` in following code you can do any traitment you want :

```
//This callback will be call on any change from checkbox. Up to you to do what ever you want.
  onCheckboxChange(index: number) {
    if(this.mapLegends[index]) {
      // Do what ever you want
      console.log(this.mapLegends[index]);
    }
  }

```

or in `component.html` :

```
 <div class="col-md-6" *ngFor="let mapLegend of mapLegends; let i = index">
<!-- this section will be display only if checkbox is checked. -->
   <div *ngIf="mapLegend.checked">
      hello {{ mapLegend.name }} i am happy to see you.
   </div>
 </div>

```