task#03 headerTitle @Input

Create a headerTitle @Input

1. Add a headerTitle: string input to your AuctionList component
2. Create a h3 element that shows the headerTitle
3. Try to set the value static or via a variable in the AppComponent

Result

Compile and start the application with

ng serve

Open project in browser

• Open your browser with the address http://localhost:4200/

Hints

In the auction-list.component.ts class file within the class add (do not forget to import @Input)

@Input() headerTitle: string;

In the auction-list.component.html add

<h3>{{headerTitle}}</h3>

in the app.component html file try:

<app-auction-list headerTitle="this is an auction list (static)"></app-auction-list>

or

<app-auction-list [headerTitle]="auctionListTitle"></app-auction-list>

For a try with a variable, please add this variable first to the file app.component.ts. The code sample is using a .scss file. If you have chosen css at ng new project, please use .css.

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title: String = 'app works!';
  auctionListTitle = 'this is an auction list (from variable)';

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

Content of the file auction-list.component.html

<p>auction-list works!</p>
<h3>{{headerTitle}}</h3>
<app-mouse-event-display></app-mouse-event-display>