Angular when I try to change variable "size" to "mensaje" @Input, it doesnt Work with "mensaje"

type here


Hi, I try to share data from Parent to Child and Child to Parent, with variable in template PARENT "mensaje", the template receive this input and show in the input text Child, but when I type other words in the input text child and click to send to Parent it doesnt work in the father, but if I change this variable in template father "mensaje" to "size" it does work. I dont understand why? This example is similar from https://stackblitz.com/run?file=src/app/app.component.ts

PARENT
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: \['./app.component.scss'\]
})
export class AppComponent {
title = 'Hola Mundo Angular¡';
fontSizePx = "";
mensajePadre=""; //size
}


PARENT

<app-sizer [(mensaje)]="mensajePadre"></app-sizer>
<input id="font-size" [(ngModel)]="mensajePadre"/>


CHILD

export class SizerComponent implements OnInit {

@Input() mensaje: string;
@Output() sizeChange = new EventEmitter<string>();

constructor() { }

ngOnInit(): void {
}

enviarPadre(){
//this.size = Math.min(40, Math.max(8, +this.size ));
this.sizeChange.emit(this.mensaje);
}
}


CHILD

<input type="text" [(ngModel)]="mensaje" name="pixel" #pixel>
<button type="button" (click)="enviarPadre()">Enviar a Padre</button>

Continue reading...