Scribd
Upload
18 views

Components and Data Binding

angular training 2

Uploaded by

Jinu Regi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
18 views

Components and Data Binding

angular training 2

Uploaded by

Jinu Regi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like