title: unable to change an attribute value of one component from another component in angular
body: <p>I created two components in my build. I wanted to change attribute value of html element component from another component.</p>
  <p>Two components:</p>
  <ol>
  <li>Test123Component (only with HTML button element)</li>
  <li>AppComponent (from this component I wanted to change above defined component's button attribute)</li>
  </ol>
  <p><strong>Test123Component .ts file</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-test123',
    templateUrl: './test123.component.html',
    styleUrls: ['./test123.component.css']
  })
  export class Test123Component implements OnInit {
  
    constructor() { }
  
    ngOnInit(): void {
    }
    buttonValue='hello'
  }
  </code></pre>
  <p><strong>test123.component.html</strong></p>
  <pre><code>&lt;button value=&quot;{{buttonValue}}&quot;&gt;&lt;/button&gt;
  </code></pre>
  <p><strong>AppComponent .ts file</strong></p>
  <pre><code>import { Component} from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
     title = '12';
    changedText='yoyo';
   }
  </code></pre>
  <p><strong>app.component.html</strong></p>
  <pre><code>&lt;app-test123 [buttonValue]=changedText&gt;&lt;/app-test123&gt;
  </code></pre>
  <p><em>I wanted to change <code>buttonValue</code> property defined in <code>Test123Component</code> from <code>AppComponent</code> so that &quot;hello&quot; becomes &quot;yoyo&quot; Later on I will add some event say on another button's click event to change this value</em></p>
  <p>I am getting below <strong>error</strong>:</p>
  <pre><code>Error: src/app/app.component.html:2:14 - error NG8002: Can't bind to 'buttonValue' since it isn't a known property of 'app-test123'.
  1. If 'app-test123' is an Angular component and it has 'buttonValue' input, then verify that it is part of this module.
  2. If 'app-test123' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
  
  2 &lt;app-test123 [buttonValue]=changedText&gt;&lt;/app-test123&gt;
                 ~~~~~~~~~~~~~~~~~~~~~~~~~
  
    src/app/app.component.ts:5:16
      5   templateUrl: './app.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component AppComponent.
  
  
  Error: src/app/app.component.ts:18:25 - error TS2339: Property 'setValue' does not exist on type 'Test123Component'.
  
  18     this.childComponent.setValue(this.changedText);
                             ~~~~~~~~
  
  
  
  
  ✖ Failed to compile.
  </code></pre>
  <p>is there any way to achieve this functionality?</p>