angular @Input()

/* @Input()
- @Input is used in the child component to indicate that the 
  component can receive its value from the parent component
*/

// Parent component
@Component({
    template: `<app-item-detail [item]='currentItem'></app-item-detail>`
})
                
export class AppComponent {
    currentItem = 'Television';
}

/* Parent Component Notes
- `<app-item-detail [item]='currentItem'></app-item-detail>`
- `<app-item-detail><app-item-detail> is the child selector
- [item] is the target. It has to be the same as the @Input in the child class
- currentItem is the source property from the parent
*/ 

// Child Component
import { Component, Input } from '@angular/core';

@Component({
    template: `
                <p>Today's Item: {{ item }}
              `
})

export class ItemDetailComponent {
    @Input() item: string; //decorate the property with @Input()
    @Input('alias name') item: string;
    // the type of the @input can be of any type
}

/* Child Component Notes
- `@Input item: string` indicates that the child component
   will take the value from the parent component
*/