Components interactions

Angular components are the basic block codes for client web applications. They are the User Interface (UI) elements that communicate and operate on a web browser. There are several ways to pass data between components (parent, children and siblings). 

Angular components interactions:

• Input data binding "@Input()"
• EventEmitter "@Output()"
• ViewChild "@ViewChild()"
• Injectable service
• Lifecycle Hooks and A local variable

I am going to create a parent and a child components using Angular CLI tool. I'll use the decorator @Input() and data binding for Parent to communicate with it's child component. 

Results:

When I run the application, this output is displayed: 

Parent component:

Child component:

1- The @input is used for the properties to assign a value.

For example: @Input("parent") parentName:string

2- Using the property in the selector of the child component.

For example: <app-child [parent]="parent"></app-child>

This code adds the parent component in the app component, which it is the root component, and the parent component, adds the child component in its template. It is a simple process using data binding and decorator @Input.

Sample code

I'll write about the decorator @output and EventEmitter with an example next time. bye