I have a variable that can be edited from parent and for child.
parent.html:
<div *ngIf="editEnabled">
<mat-icon (click)="disableEdit()">cancel</mat-icon>
</div>
<child [(editEnabled)]="editEnabled"></child>
parent.ts:
export class ParentComponent {
editEnabled: boolean;
disableEdit(){
this.editEnabled = false;
}
}
Child.html:
<div *ngIf="!editEnabled">
<mat-icon (click)="enableEdit()">settings</mat-icon>
</div>
child.ts
private _editEnabled: boolean;
@Input()
set editEnabled(value: boolean) {
this._editEnabled = value;
}
get editEnabled(): boolean {
return this._editEnabled;
}
enableEdit(){
this.editEnabled = true;
}
But I cant comunicate editEnabled between the two components.
Where is my mistake?
The Definition of an Input in Math The input is sometimes called the independent variable. Functions are often expressed in function notation. In function notation, the equation used earlier as an example of a function, y = x + 5 y = x + 5 , would be expressed as f(x) = x + 5 f ( x ) = x + 5 .
For a function, the input is called the independent variable , and the output is called the dependent variable . This is because the output depends on the input.
1. It is the variable whose values affect the output (response) of the system.
There is a name for the set of input values and another name for the set of output values for a function. The set of input values is called the domain of the function. And the set of output values is called the range of the function.
When defining a double-binded variable, you will need to define one @Input-decorator with the variable name:
@Input() editEnabled: boolean;
and one @Output-decorator with the variable name and Change
after it, because this one emits the changing-event of the variable:
@Output() editEnabledChange: EventEmitter<boolean> = new EventEmitter<boolean>();
Then when changing the variable inside the child component, invoke this.editEnabledChange.emit(true)
. Your double binding with [(...)]
is correct!
If you don't want to add the editEnabledChange
-Emitter every time you change the variable correct
you can write:
_correct: boolean;
@Input()
set correct(val: boolean) {
this.correctChange.emit(val);
this._correct = val;
}
get correct() {
return this._correct;
}
@Output()
correctChange: EventEmitter<boolean> = new EventEmitter<boolean>();
<app-pin [(correct)]="isPinCorrect"></app-pin>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With