feat: implement custom two-way binding for rectangle size in rect component

Author: aimxnaim

06-cmp-deep-dive/custom-2w-binding-starting-project/src/app/app.component.html

@@ -8,4 +8,4 @@
     <input type="number" step="1.0" [(ngModel)]="rectSize.height" />
   </p>
 </div>
-<app-rect />
+<app-rect [(size)]="rectSize"/>

06-cmp-deep-dive/custom-2w-binding-starting-project/src/app/rect/rect.component.html

@@ -1,6 +1,6 @@
 <div
   id="rect"
-  [style.width]="'200px'"
-  [style.height]="'100px'"
+  [style.width]="size.width + 'px'"
+  [style.height]="size.height + 'px'"
   (click)="onReset()"
 ></div>

06-cmp-deep-dive/custom-2w-binding-starting-project/src/app/rect/rect.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'app-rect',
@@ -8,9 +8,11 @@ import { Component } from '@angular/core';
   styleUrl: './rect.component.css',
 })
 export class RectComponent {
-  // Todo: Implement custom two-way binding
+
+  @Input({required: true}) size!: { width: string, height: string };
+  @Output() sizeChange = new EventEmitter<{ width: string, height: string }>();
 
   onReset() {
-    // ...
+    this.sizeChange.emit({ width: '200', height: '100' });
   }
 }