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?

CodePudding user response：

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>