What is Biding in Angular?

Binding is the concept by which the properties and functions in the model/controller are bound to the View. Remember that Angular is a client side MVC architecture.

In AngularJS the $scope was the model which contains the model properties and the controller had the function. Views are HTML files or other files like the MVC view files (.cshtml). Both the model properties and the controller functions are bound to the view using Binding.

In Angular the Component class contains the model properties and functions and the template .html files represent the View. The model properties and functions are bound to the view template file using Binding. 

Output property example in Angular 6

Output properties are outbound properties which flows from a child component to its parent component. These are events which originate from the child component and get handled in the parent component.

In this example we shall see on how to declare a @Output property in a child component and how to pass an event through the @output property to the parent component and handle the event in the parent component.

Let us start with the Input component example and extent it by adding a @Output property to it.

Output properties in Angular

Output properties are outbound properties which flows from a child component to its parent component. These are events which originate from the child component and get handled in the parent component.

Output properties are marked with the @Output decorator and returns an Angular EventEmitter.
Output properties are declared using the @Output decorator as follows.

Input property example in Angular 6

Input properties are inbound properties which flows into a component from a parent component. Input properties are setter properties marked with the @Input decorator.

In this example we shall see on how to declare a @Input property in a child component and how to pass value to it from the parent component. We will get the value of the @Input property and display it in the child components view template.

Input properties in Angular

As the name implies @Input properties are inbound properties which flows into a component from a parent component. Input properties are setter properties marked with the @Input decorator.

Input properties are declared using the @Input decorator as follows.

@Input() Message: string

Once the property is declared in a component, we can pass values to the component from the parent component along with the component’s selector tag as follows.



Here parentMsg is a property defined in the parent component whose value gets passed to the child component through the Message @Input property.