Usando Angular 12.

Quiero crear un componente de botón reutilizable. Quiero obtener el texto dentro de las etiquetas donde alojo mi componente y luego obtenerlo como una entrada dentro de mi componente.

Dentro de mi home.component.html:

 <app-ui-text-button color="#fe7f2d">Press Me!</app-ui-text-button>

¡Quiero obtener Presioname! texto y enviarlo como entrada a mi componente.

Mi componente:

 @Component({ selector: 'app-ui-text-button', styles: [` .button { padding: 12px 8px; border-radius: 5px; cursor: pointer; } .button:hover { filter: brightness(1.2); } `], template: ` <div class="button" [style.backgroundColor]="color" (click)="onClick($event)">{{ text }}</div> ` } ) export class AppUiTextButtonComponent { // Inputs @Input() text = 'sdfs'; @Input() color = '#619b8a'; // @Input() childContent: ElementRef<any> = new ElementRef(any); // Outputs @Output() clicked = new EventEmitter<any>(); onClick(event: Event) { this.clicked.emit(event); } }

Entonces quiero tomar el texto e insertarlo como variable dinámica dentro de mi div.

Yo he tratado

 @Input() childContent: ElementRef<any> = new ElementRef(any); @Input() text = '';

sin exito. También traté de buscar en línea, pero no obtuve respuestas claras.

Gracias de antemano.