task#04 titleClicked @Output

Create a (titleClicked) @Output

1. Add a titleClicked event to your component
2. Add the EventBinding for Title <h3>
3. React to the titleClicked Event with a console.log in the app component.

The illustration show the relation about input and output between parent and child

Result

Compile and start the application with

ng serve

Open your browser

• Open your browser with the address http://localhost:4200/
• Open the developer Tools and navigate to the console tab
• Click on the title this is an auction list (from variable) and watch the console output

Hints

auction-list.component.ts

Add the following code. Do not forget importing @Output and EventEmitter!

@Output() titleClicked = new EventEmitter<string>();

onTitleClicked(event: MouseEvent): void {
     this.titleClicked.emit('Title clicked');
}

auction-list.component.html

<h3 (click)="onTitleClicked($event)">{{headerTitle}}</h3>

auction-list.component.scss

h3 {
  cursor: pointer;
}
 

app.component.ts

public onAuctionListTitleClicked(event: any): void {
    console.log(event);
}

app.component.html

<app-auction-list (titleClicked)="onAuctionListTitleClicked($event)"  ...></app-auction-list>