Input

@Component({
    selector: 'app-root',
    template: `<app-greeter [name]="name"></app-greeter>`
})
export class AppComponent{
    name = "Hemant";
}

Decorator @Input used to receive passed data from component

@Component({
    selector: 'app-greeter',
    template: `Hello! {{ name }}`
})
export class GreeterComponent{
    @Input() name: string;
}

We can bind input to an expression or string

// bind variable in parent scope
<app-greeter [name]="name"></app-greeter>

// bind a raw string
<app-greeter [name]="Hemant Singh"></app-greeter>

We can rename input property name

@Component({
    selector: 'app-greeter',
    template: `Hello! {{ firstName }}`
})
export class GreeterComponent{
    @Input('name') firstName: string;
}