Understanding Built In Angular Directives - Part 1
source link: https://dev.to/anubhab5/understanding-built-in-angular-directives-part-1-oln
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Understanding Built In Angular Directives - Part 1
Today we will learn the built in directives Angular provides.
Before diving in we need to understand what is a directive
.
As per Angular' s definition -
Directives are classes that add additional behavior to elements in your Angular applications
So now lets break it into simpler words to understand. A normal HTML element/ tag like ul li
is used to show some text in bullet form. Eg.
<ul>
<li>83</li>
<li>32</li>
<li>66</li>
</ul>
Enter fullscreen mode
Exit fullscreen mode
will only display the text like below
It don't have any extra ability like adding CSS class or styles on the basis of a condition, show/ hide items on the basis of certain condition etc.
To give the normal HTML element an extra power the Angular introduced the concept of Directive. It is a class that does all the trick/ magic internally/ behind the scene.
So lets dive in to understand the various directives available in Angular.
There are broadly three different types of directives -
- Component Directive - (Will talk about it at the very end)
Attribute Directive
- ngClass
- ngStyle
- ngModel
Structural Directive
- ngFor
- ngSwitch
Attribute Directives
Directives that changes the behavior of HTML element's attributes on which it has been used. Behavior includes CSS style CSS class etc.
ngClass
This directive adds or removes CSS class on the element it has been added to on the basis of a condition.
Lets see in practice.
Lets create a project and create a component attributeDirectiveDemo
. If you are not familiar about angular component or how to create one, I would suggest you to go through the below link -
Creating_Angular_Component
There are different syntax of using ngClass directive
a. Directly passing class name to the ngClass directive[ngClass]="'<class name>'"
Step1 Add CSS classes to the css file
In the file showed with arrow in the above image lets put the below CSS code -
.success {
color: green;
}
.error {
color: red;
}
Enter fullscreen mode
Exit fullscreen mode
These are two simple CSS classes named success
and error
. When success class is used it will color the text green. While the error class will color the text with red.
Step2 Use the directive in the template/ HTML file
Now lets open the html file and paste the below code -
<div [ngClass]="'success'">Server One</div>
<div [ngClass]="'error'">Server Two</div>
Enter fullscreen mode
Exit fullscreen mode
Run the application and once you navigate to localhost:4200 you will see the below output -
Now lets understand the code we wrote in html file.
All the attribute directives are written inside a []
Square Bracket. The directive name is placed inside the square bracket. Then the equal =
operator comes followed by the class name. The class name success
/ error
is enclosed in double quotes "
and single quote '
.
Here the order of quotes is not important. You can also use
<div [ngClass]='"success"'>Server One</div>
Enter fullscreen mode
Exit fullscreen mode
But you should not be writing like below code -
If you just use a pair of double quotes and write the class name inside it like below -
<div [ngClass]="success">Server One</div>
Enter fullscreen mode
Exit fullscreen mode
Then Angular will think success as a variable/ property present in the component ts file and will throw error and not work as expected.
b. Applying a CSS class on the basis of a condition
[ngClass]="{ <class_name>: <condition> }"
Step1
Now, lets open the component typescript file and add a variableserverOneStatus
and initialize it with the value up.
Step2
Now, lets open the component html file and type in the below code -
<div [ngClass]="{ success: serverOneStatus === 'up' }">Server One</div>
Enter fullscreen mode
Exit fullscreen mode
Now once you open the application in browser you will see the below output. The text is becoming green so the success class is getting correctly applied.
So, here in the above code we are checking if the variable serverOneStatus
has a value of up (Remember we initialized the variable serverOneStatus in the TS file with the value up) i.e. the condition evaluates to true then the corresponding CSS class success
will be applied else the CSS class wont be applied.
c. Applying Multiple Condition
We can also pass multiple condition to ngClass directive[ngClass]="{
<Class_1>: <Condition_1>,
<Class_2>: <Condition_2>
}"
So, here we are adding one more class along with the condition separated by a ,
. Depending on which condition evaluates to true the corresponding class will be applied. If both the condition results to true then both the class will be applied.
Lets see how it can be implemented in our code -
<div
[ngClass]="{
success: serverOneStatus === 'up',
error: serverOneStatus === 'down'
}"
>
Server One
</div>
Enter fullscreen mode
Exit fullscreen mode
So here we added an extra class and an extra condition error: serverOneStatus === 'down'
Now lets understand the whole stuff - if the variable serverOneStatus
has a value up
then the success class will be appended and if the variable holds a value down
then the error class will be appended to the element on which ngClass is used, here in this case div
.
d. Passing Ternary operator to ngClass
We can also pass condition by using ternary operator.[ngClass]="<codition> ? <'Class_Name1'> : <'Class_Name2'>"
So, now lets open the component html file and add the below code -
<div [ngClass]="serverOneStatus == 'up' ? 'success' : 'error'">Server One</div>
Enter fullscreen mode
Exit fullscreen mode
Here we are passing a ternary operator. We are checking a condition if the condition serverOneStatus == 'up'
evaluates to true then the success class will be appended else error.
Now if you see in browser you will see the text is colored green.
That's all in this part.
In this section we learnt the basic concept of directives, different built-in directives available in Angular and ngClass in detail.
Will cover the remaining directives in the upcoming posts.
Stay Tuned...
If you liked the post do like and comment.
Cheers!!!
Happy Coding
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK