title: How to listen for button click in another component
body: <p>I have two components in my angular app , one is a navbar component and one is a display component.In the navbar component there is a search button that searches for the entered name and displays the details in the display component.So how can i check in the display component whether the search button is clicked in the navbar component and then fetch the name from the search bar in the navbar component and then display the details in the display component.I mean i just want when the search button i clicked the details are displayed int the display component.Since they are two different component i'm not able to get how do i add and click event listener in display component for the search button.How can this be done?</p>
  
  <p>Here is the navbar component :</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="navbar-collapse collapse " id="navbarTogglerDemo01"&gt;
          &lt;ul id="nav-mobile" class="nav navbar-nav mr-auto"&gt;
              &lt;li &gt;&lt;h5 class="myId"&gt;&lt;/h5&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;ul class="nav navbar-nav ml-auto" &gt;
      &lt;li class="nav-item" *ngIf="isLoggedIn"&gt;
      &lt;form class="form-inline my-2 my-lg-0"&gt;
          &lt;input class="form-control mr-sm-2 ticketHold" type="search" placeholder="Search for a ticket" aria-label="Search"&gt;
          &lt;button class="btn btn-outline-success my-2 my-sm-0 ticketGet" (click)="search()"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>navbar.component.ts</p>
  
  <pre><code>import { Component, OnInit ,OnDestroy ,forwardRef,
   ChangeDetectorRef} from '@angular/core';
  import {UserLogs} from '../../model/UserLog';
  import { AuthService } from '../../services/auth.service';
  import { FlashMessagesService } from 'angular2-flash-messages';
  import { Router } from '@angular/router';
  import { ViewEncapsulation } from '@angular/core';
  import { ISubscription } from 'rxjs/Subscription';
  @Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
  })
  export class NavbarComponent implements OnInit , OnDestroy {
    isLoggedIn:boolean;
    isRegister:boolean;
    private subscription: ISubscription;
    constructor(private authService :AuthService,
      private router : Router,
      private flashMsg : FlashMessagesService,private changeDetectorRef:ChangeDetectorRef) { }
  
    ngOnInit() {
      this.subscription= this.authService.getAuth().subscribe(auth =&gt;{
         if(auth)
        {
          console.log('logged in '+localStorage.getItem("token"));
          this.isLoggedIn=true;
          // if(localStorage.getItem("token")=="user")
          // {
          //   this.router.navigate(['/chat']);
          // }
          // else if(localStorage.getItem("token")=="consultant"){
          //   this.router.navigate(['/consultant']);
          // }
        }
        else{
          this.isLoggedIn=false;
          console.log('Logged out hhdfd');
          // this.router.navigate(['/']);
        }
        if (!this.changeDetectorRef['destroyed']) {
          this.changeDetectorRef.detectChanges();
      } 
      })
    }
    logOut()
    {
      localStorage.setItem("token","login");
      this.authService.logout(); 
      window.location.href="/";
      if (!this.changeDetectorRef['destroyed']) {
        this.changeDetectorRef.detectChanges();
    }
    }
    search()
    {
    }
    ngOnDestroy() {
      this.changeDetectorRef.detach();
      this.subscription.unsubscribe();
    }
    }
  </code></pre>
  
  <p>Th</p>