Understanding Built In
 Angular Directives - Part 1
Tags: angular, directives, beginners, tutorial
Published: 2021-12-20 07:51:45

**T**oday 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>
```
 will only display the text like below 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kk9zclvxmpj8q3jn1q8.PNG)
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
    1. ngClass
    2. ngStyle
    3. ngModel
- Structural Directive
    1. ngIf
    2. ngFor
    3. 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](https://dev.to/anubhab5/creating-angular-component-129e)

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xe0soyxxf4lkhhyovm2.PNG)
In the file showed with arrow in the above image lets put the below CSS code - 
```
.success {
  color: green;
}

.error {
  color: red;
}
```
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>

```
Run the application and once you navigate to localhost:4200 you will see the below output -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldhqox6z9chxiryelbxq.PNG)

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>
```
But you should not be writing like below code -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs97p9h7090l1xaskkus.PNG)
If you just use a pair of double quotes and write the class name inside it like below -
```
<div [ngClass]="success">Server One</div>
```
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 variable
`serverOneStatus` and initialize it with the value **up**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbb9j8tz6tymdu1k3c4l.PNG)
**Step2**
Now, lets open the component html file and type in the below code -
```
<div [ngClass]="{ success: serverOneStatus === 'up' }">Server One</div>
```
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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/463b1gy8beo17lgudmv8.PNG)
So, here in the above code we are checking if the variable `serverOneStatus` has a value of <u>up</u> (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>
```
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>
```
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_