unable to change an attribute value of one component from another component in angular

Question

I created two components in my build. I wanted to change attribute value of html element component from another component.

Two components:

1. Test123Component (only with HTML button element)
2. AppComponent (from this component I wanted to change above defined component's button attribute)

Test123Component.ts file

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'
}

test123.component.html

<button value="{{buttonValue}}"></button>

AppComponent.ts file

import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '12';
  changedText='yoyo';
 }

app.component.html

<app-test123 [buttonValue]=changedText></app-test123>

I wanted to change buttonValue property defined in Test123Component from AppComponent so that "hello" becomes "yoyo" Later on I will add some event say on another button's click event to change this value

I am getting below error :

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 <app-test123 [buttonValue]=changedText></app-test123>
               ~~~~~~~~~~~~~~~~~~~~~~~~~

  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.

is there any way to achieve this functionality?

Answer 1

The common component communication in Angular is Input and Output .

Try to change Test123Component.ts file, like this:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-test123',
  templateUrl: './test123.component.html',
  styleUrls: ['./test123.component.css']
})
export class Test123Component {

  @Input() buttonValue = 'hello';
}

consider adding output to the trigger event when you want to change the value dynamically. import { Component, OnInit, Input, Output } from '@angular/core';

@Component({
  selector: 'app-test123',
  templateUrl: './test123.component.html',
  styleUrls: ['./test123.component.css']
})
export class Test123Component {

  @Input() buttonValue = 'hello';
  @Output() changedText = new EventEmitter<void>();

 changeText() {
    this.changedText.emit();
  }

}

test123.component.html:

<button (click)="changeText()">{{buttonValue}}</button>

AppComponent.ts file:

import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '12';
  changedText='yoyo';
 changeText(): void {
  this.changedText = "new value";
 }
}

app.component.html:

<app-test123 [buttonValue]="changedText" (changedText)="changeText()"></app-test123>