title: How to get checked value of checkbox on click a button from one component to other component in angular 6
body: <p>I have 2 components one sidebar and home component.I have some checkboxes and a button in sidebar component,when I click that button I need to display checked checkbox value on home component. Already I am getting the alert but how to get the values,I am not able to get it.Here is the code below</p>
  <h2>sidebarcomponent.html</h2>
  <pre><code>&lt;div class=&quot;header&quot; *ngIf=&quot;router.url !== '/' &amp;&amp; router.url !== '/login'&quot;&gt;    
              &lt;div class=&quot;citilist p-1&quot;&gt;List of Cities&lt;/div&gt;
              &lt;ul class=&quot;p-2&quot;&gt;
                  &lt;li  class=&quot;mb-3 p-1 border-bottom&quot; *ngFor=&quot;let city of list;let i = index&quot;&gt;&lt;span class=&quot;mr-2&quot;&gt;&lt;input type=&quot;checkbox&quot;&gt;&lt;/span&gt;&lt;span&gt;{{city.city}}&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class=&quot;float-right mr-1 submitbtn&quot;&gt;&lt;button (click)=&quot;downloadClicked.emit(null)&quot; class=&quot;btn btn-primary&quot; type=&quot;button&quot;&gt;Submit&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h2>sidebarcomponent.ts</h2>
  <pre><code>import { Component, OnInit,Output,EventEmitter} from '@angular/core';
  import { Router }  from &quot;@angular/router&quot;;
  import { CommonserviceService } from './../../utilities/services/commonservice.service';
  
  @Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.css']
  })
  export class SidebarComponent implements OnInit {
    @Output() 
    downloadClicked: EventEmitter&lt;any&gt; = new EventEmitter();
  
    list: any[] = [{&quot;city&quot;:&quot;MOSCOW&quot;},{&quot;city&quot;:&quot;TOKYO&quot;},{&quot;city&quot;:&quot;LONDON&quot;},{&quot;city&quot;:&quot;BRASILIA&quot;},{&quot;city&quot;:&quot;NEW DELHI&quot;},{&quot;city&quot;:&quot;KATHMANDU&quot;},{&quot;city&quot;:&quot;PARIS&quot;}];
  
    constructor(public router: Router,private commonserviceService: CommonserviceService){} 
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  <h2>homecomponent.html</h2>
  <pre><code>&lt;div class=&quot;row m-0&quot;&gt;
      &lt;div class=&quot;col-sm-3 p-0 border border-bottom-0 maindiv&quot;&gt;
          &lt;app-sidebar (downloadClicked)=&quot;generarPDF()&quot;&gt;&lt;/app-sidebar&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-sm-9 p-0&quot;&gt;&lt;div class=&quot;citilist p-1&quot;&gt;Output&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h2>homecomponent.ts</h2>
  <pre><code>import { Component, OnInit,ViewChild, ElementRef } from '@angular/core';
  import { CommonserviceService } from './../utilities/services/commonservice.service';
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
    getListData: any;
    constructor(private commonserviceService: CommonserviceService) { }
    @ViewChild('content', { 'static': true}) content:ElementRef;
    name:string;
  
    ngOnInit() {
       
    }
  
    generarPDF() {
    this.name=&quot;hello&quot;;
    alert(this.name);
  }
  }
  </code></pre>