title: How to transfer value from one component to another using input/output in Angular 8
body: <p>I am working on my Angular 8 project and I want to transfer value from one component to another when the user clicks on the button.</p>
  
  <p>I have used the service method to transfer the value from one component to another when the user clicks on the button. It is working fine but I think this method is not good for transferring.</p>
  
  <p>This is my <strong>Service: myservice.service.ts:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class MyserviceService {
    value1: Boolean = true;
    value2: Boolean = false;
  
    private messageSource1 = new BehaviorSubject(this.value1);
    private messageSource2 = new BehaviorSubject(this.value2);
    currentMessage1 = this.messageSource1.asObservable();
    currentMessage2 = this.messageSource2.asObservable();
  
    constructor() { }
  
    changevalue(chvalue1: boolean, chvalue2: boolean) {
      // return this.value1 = false;
      this.messageSource1.next(chvalue1);
      this.messageSource2.next(chvalue2);
    }
  
  }
  </code></pre>
  
  <p>In this service, I have added the <code>changevalue</code> function which is used by the other components.</p>
  
  <p>This is my <strong>headcomp.component.html</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row header"&gt;
      &lt;div class="col-md-8 no_padding"&gt;
          &lt;div class="logo"&gt;
              &lt;img src="./assets/images/logo.png" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-4 no_padding" style="margin-top: 4px;"&gt;
          &lt;div class="logo"&gt;
              &lt;nav&gt;
                  &lt;a routerLink="/loginpage" (click)="myclick2()" *ngIf="svalue1" class="mya2"&gt;Login&lt;/a&gt;
                  &lt;a routerLink="/registerpage" (click)="myclick2()" *ngIf="svalue1" class="mya2"&gt;Register&lt;/a&gt;
                  &lt;a [routerLink]="[{outlets: {dashboard: ['frontpage']}}]" (click)="myclick()" *ngIf="svalue1" class="mya2"&gt;Other Page&lt;/a&gt;
                  &lt;a (click)="myclick2()" *ngIf="svalue2" class="mya2"&gt;Logout&lt;/a&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my header component in which I have added the buttons on which the click function works.</p>
  
  <p>This is my <strong>headcomp.component.ts</strong>:</p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  import { MyserviceService } from '../../Service/myservice.service';
  
  @Component({
    selector: 'app-headcomp',
    templateUrl: './headcomp.component.html',
    styleUrls: ['./headcomp.component.css']
  })
  export class HeadcompComponent implements OnInit {
  
    svalue1: any;
    svalue2: any;
    constructor(public myapi: MyserviceService) { }
  
    ngOnInit() {
      this.myapi.currentMessage1.subscribe(svalue1 =&gt; this.svalue1 = svalue1);
      this.myapi.currentMessage2.subscribe(svalue2 =&gt; this.svalue2 = svalue2);
      console.log('currentMessage1', this.svalue1, this.svalue2 );
    }
  
    myclick() {
      this.myapi.changevalue(false, true);
      console.log('Event Clicked1', this.svalue1, this.svalue2 );
    }
  
    myclick2() {
      this.myapi.changevalue(true, false);
      console.log('Event Clicked2', this.svalue1, this.svalue2 );
    }
  
  }
  </code></pre>
  
  <p>This is my <strong>app.component.ts</strong>:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { MyserviceService } from './Service/myservice.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    // @Input() message: boolean;
    constructor(public myapi: MyserviceService) {
      // this.myapi.currentMessage1.subscribe(rsvalue1 =&gt; this.rsvalue1 = rsvalue1);
      // this.myapi.currentMessage2.subscribe(rsvalue2 =&gt; this.rsvalue2 = rsvalue2);
    }
    title = 'Batchproject1';
    rsvalue1: any;
    rsvalue2: any;
  
    ngOnInit() {
      this.myapi.currentMessage1.subscribe(rsvalue1 =&gt; this.rsvalue1 = rsvalue1);
      this.myapi.currentMessage2.subscribe(rsvalue2 =&gt; this.rsvalue2 = rsvalue2);
      console.log('App Component', this.rsvalue1, this.rsvalue2 );
    }
  
  }
  </code></pre>
  
  <p>This is my <strong>app.component.html:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;div class="main_wrapper"&gt;
     &lt;div class="container no_padding"&gt;
       &lt;app-headcomp&gt;&lt;/app-headcomp&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>In this Html, I have added the header component selector.</p>
  
  <p>In this, I am transferring the value from one component to another when the user clicks on the button in the header component using the service. But I think, this is not an efficient way.</p>
  
  <p>Can anyone suggest me how to make it efficient or transfer the value using input/output in Angular 8?</p>
  
  <p>Any help is much appreciated.</p>