Angular
Data Binding, Directives
Angular CLI provides various features and one of them is to create the new
file using just a single line of command. By using a command, we can
generate various kind of files like Component, Module, Pipe and many more
are listed below:
Command:
ng generate <file_type> <file_name>
Angular CLI commands for creating various types of files:
• ng generate class
• ng generate component
• ng generate module
• ng generate service
• ng generate pipe
• ng generate application
• ng generate library
• ng generate directive
• ng generate enum
• ng generate interface
• ng generate guard
• ng generate appShell
• ng generate universal
Data Binding in Angular :
• Data binding is one of the important core concepts which is used to do the
communication between the component and DOM.
• In other words, we can say that the Data binding is a way to add/push
elements into HTML DOM or pop the different elements based on the
instructions given by the Component.
• There are mainly three types of data binding supported in order to achieve
the data bindings in Angular.
• One-way Binding (Interpolation, Attribute, Property, Class, Style)
• Event Binding
• Two-way Binding
Interpolation :
Interpolation in Angular is used to show the property value from component to
the template or used to execute the expressions.
[Link]
myMessage: string = "Hello World";
[Link]
<p>{{ myMessage }}</p>
<p>Total : {{ 25 + 50 + 75 + 100 }}</p>
Property Binding :
Property binding is generally used to show or update the value of the variables in component
and vice versa. We can also call it one-way data binding thus it is not used to update the two-
way binding mechanism, and value will be reflected at the component level.
[Link]
myMessage: string = "Hello World";
[Link]
<h1>{{ myMessage }}</h1>
Whenever we change the value of the myMessage variable, at that time it will be reflected in
the template but not vice versa.
Event binding :
• User activities are a common thing in a web application to do some actions,
at that time click or mouse event will be used to fulfill the goal of an activity.
When the user clicks on any element, at that time it generates the event and
into the event, we will perform the various operations to achieve something,
for that we can use Event binding in Angular.
• For event binding, the targeted event will be on the left side and the event
name will on the right side. The event name is surrounded by the
punctuations like (), [] or preceded by the prefix like (on-, bind-).
Let’s understand event binding by using a simple example, where we will
use click event on a button.
[Link]
<button (click)="clickEvent()">
Click me to generate an event
</button>
Here in this template file, we have used the click event and it’s surrounded
by the () brackets.
[Link] :
import{ Component } from '@angular/core’;
@Component({
selector: 'my-app’,
templateUrl: './[Link]’,
styleUrls: ['./[Link]’]
})
Export class AppComponent {
clickEvent() {
[Link]("Button Clicked");
}
}
In the component file, we have created one method for handling click event, whenever
the user clicks on the button, at that time our clickEvent () will be triggered.
Two-way data binding :
• Two-way binding is one of the strongest binding mechanisms, where two
different bindings are merged i.e. input and output bindings.
• It means that Event binding works with the two different binding
mechanisms at a time and generates the output based on the event which
was triggered. For two-way data binding, we will use the punctuation [( )]
in order to bind the two-way data.
• It can be happen using the directive called ngModel which listen to the
input for any changes and return the output.
• We will understand more by implementing the simple example, where we
will type the text into the input and at the same time, we will get the value
of the same input value.
[Link] :
Full Name : <input type="text" [(ngModel)]="fullName">
Your Name is : {{ fullName }}
[Link]
import{ Component } from '@angular/core’;
@Component({
selector: 'my-app’,
templateUrl: './[Link]’,
styleUrls: ['./[Link]’]
})
Export class AppComponent {
fullName: string = ‘ ‘;
}
Directive in Angular :
The directive in Angular basically a class with the (@) decorator and duty of
the directive is to modify the JavaScript classes, in other words, we can say
that it provides metadata to the class. Generally, @Decorator changes the
DOM whenever any kind of actions happen and it also appears within the
element tag. The component is also a directive with the template attached to it,
and it has template-oriented features.
The directive in Angular can be classified as follows.
1. Component Directive
2. Structural Directive
3. Attribute Directive
Component Directive :
A component is completely a form of Component Directive, and it is a
simple directive with their own templates.
Structural Directive :
The structural directive is used to manipulate the DOM parts by letting us
add or modify DOM level elements. For example, we are adding records
every time when we submit the form. To generate a new directive, we can
use the following command.
ng generate directive mydirective
And the generated directive file can look like this.
// [Link]
import{ Directive } from '@angular/core’;
@Directive({
selector:'[appMydirective]’
})
Export class MydirectiveDirective {
constructor() { }
}
Attribute Directive :
Attribute directive is used to change the behavior or the appearance of
different elements, and these elements act as an attribute for the DOM
elements. This is the same as custom or other directive but the difference is
that we are changing the behavior of elements dynamically. Let’s see the
simple directive example and create new directive named
[Link] and source code can look like this.
import{ Directive, ElementRef, Input, HostListener } from '@angular/core';
@Directive({
selector: '[appAttdirdemo]'
})
Export class AttdirdemoDirective {
@Input() appAttdirdemo: string;
constructor(privateelref: ElementRef) { }
@HostListener('mouseover') onMouseOver() {
[Link]([Link]);
}
@HostListener('mouseleave') onMouseLeave() {
[Link]('15px');
}
changefontsize(size) {
[Link] = [Link];
}
}
In this example, we are going to change the font size of a string using our
custom directive, please find below code where I have used directive. This
is a Attribute Directive .
<h3 [appAttdirdemo]="'12px'">
This is a Attribute Directive
</h3>
