Data flow

via dynamic attributes (props)

📦 <img [src]="avatar">

• usually parent to child
• without the bracket it would be a static string
• force attribute binding (instead of a prop):
  <button [attr.aria-label]="ariaLabel">...</button>

via events

🍌 <button (click)="onSave()">Save</button>

• native events and custom events follow the same format
• usually child to parent
• <h2 (click)="onClick"> - must be a proper fn call ⛔ (not just the name of the function)
• <h2 (click)="onClick($event)"> - MouseEvent argument

💡 For stop propagation use the $event, but for a prevent default returning false is enough:

<a href="#" (click)="onYearToggleClick(item.year); false">...</a>

two-way

📦🍌 (banana in a box) <input [(ngModel)]="name">

• [(size)] === [size] + (sizeChange)
• one can manually implement this in a component with @Input size and @Output sizeChange (EventEmitter)
• for the example to work don't forget to add FormsModule in your app.module.ts