Components and Data Binding

What is a Component

● Components are the most basic building block of an UI in an Angular application. An

Angular application is a tree of Angular components.
● Component belongs to @angular/core package.
● Component decorator allows you to mark a class as an Angular component and
provide additional metadata that determines how the component should be
processed, instantiated and used at run-time
● A component must belong to an NgModule in order for it to be usable by another
component or application. To specify that a component is a member of an NgModule,
you should list it in the declarations field of that NgModule
 Metadata Properties

● selector - css selector that identifies this component in a template

● styleUrls - list of urls to stylesheets to be applied to this component's view
● styles - inline-defined styles to be applied to this component's view
● template - inline-defined template for the view
● templateUrl - url to an external file containing a template for the view
● providers - list of providers available to this component and its children
 How to Create Component

You can use angular-cli to create a component

ng g component component-name

create component without template(will not generate html file)

ng g component component-name -it
Data Binding
 Data Binding

Interpolation: Whenever you need to communicate properties (variables, objects,

arrays, etc..) from the component class to the template, you can use interpolation.
The format for defining interpolation in a template is: {{ propertyName }}

Property Binding: Property binding in Angular 5 is one-way, in that communication

goes from the component class to the template.
The format for defining Property Binding in a template is: [value]="propertyName"
We can also use interpolation for property binding.

Then why we need property binding feature separately?

 Data Binding

Two-way Binding: It is a derived binding that uses both property binding and the two-way
binding under the hood. This binding is used to display a value and also to update the value when
a new value is entered in the UI. ngModel is a built-in directive that supports two-way binding.
The following snippet shows how it is used:
<input type="text" [(ngModel)]="name" />

Event Binding: We can use event binding to capture a variety of user-initiated events to
initiate logic in our component class.
<button (click)="onSave()">Save</button>
 Component Interaction

Input(): Inputs allow you to pass data down to a child component. It works by using
the Input() decorator to allow data to be passed via the template.
● Create a property in parent component
● Bind the property in css selector of the child component
● Declare a property in child component followed by @Input
Do not forget to import Input from @angular/core

Output(): allow you to emit data upwards to a parent component. It uses output()
decorator for the purpose.
Thank You