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
*/

@Output() changeValue = new EventEmitter();

//passing properties to child elements
<app-slider [title]="'This is a title'"> </app-slider>

//inside the component slider i add just before the constructor :
.
.
@input() title: string;
constructor(){
}


//after this we can use these new property inside the .html file of the component
<div id='slider' class='slider-big'>
  <h1> {{title}}</h1>

</div>