input and output for the same variable : <p>I have a variable that can be edited from parent and for child.</p>

<p>parent.html:</p>

<pre><code> &lt;div *ngIf="editEnabled"&gt;
  &lt;mat-icon (click)="disableEdit()"&gt;cancel&lt;/mat-icon&gt;
&lt;/div&gt;

&lt;child [(editEnabled)]="editEnabled"&gt;&lt;/child&gt;
</code></pre>

<p>parent.ts:</p>

<pre><code>export class ParentComponent {

   editEnabled: boolean;

   disableEdit(){
     this.editEnabled = false;
   }
}
</code></pre>

<p>Child.html:</p>

<pre><code> &lt;div *ngIf="!editEnabled"&gt;
  &lt;mat-icon (click)="enableEdit()"&gt;settings&lt;/mat-icon&gt;
&lt;/div&gt;
</code></pre>

<p>child.ts</p>

<pre><code>private _editEnabled: boolean;

@Input()
 set editEnabled(value: boolean) {
  this._editEnabled = value;

}
get editEnabled(): boolean {
 return this._editEnabled;
}

enableEdit(){
     this.editEnabled = true;
}
</code></pre>

<p>But I cant comunicate editEnabled between the two components. </p>

<p>Where is my mistake?</p>
