Angular 2 Angular2 Input() output() Simple example of Input Properties

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

Parent element html

<child-component [isSelected]="inputPropValue"></child-component>

Parent element ts

export class AppComponent {
     inputPropValue: true
}

Child component ts:

export class ChildComponent {
    @Input() inputPropValue = false;
}

Child component html:

<div [class.simpleCssClass]="inputPropValue"></div>

This code will send the inputPropValue from the parent component to the child and it will have the value we have set in the parent component when it arrives there - false in our case. We can then use that value in the child component to, for example add a class to an element.



Got any Angular 2 Question?