Introduction:

Hello everyone! As we learned about many directives of AngularJS so today I will tell you about AngularJS ng-class directive. I is another strong directive which don’t need javascript to control it. It’s main function is to apply CSS in the code. As we learned earlier in my previous lectures that we shall need the link source called in the  script and place it in the head portion on HTML file.

So what we need for defining this AngularJS ng-class directive? We need to create the project and in the project we shall make an HTML file. Then I shall call the library of AngularJS to make the file work.

I shall define ng-app in the HTML tag to make it the owner of AngularJS ng-class code. If you will not define ng-app in it the code will not work at all. We need ng-model directive to bind it and in the end AngularJS ng-class directive to apply CSS.

Listen AngularJS ng-class directive works in run time. Before on going further detail there are few steps you to focus on.

a) Create new project

If you don’t know how to? Do visit my this lecture “AngularJS Development – Hello Word

b) Make a HTML file

It should be simple file, we don’t need an extensive code.

c) Need to add a style in the head portion

d) Add the directives

These are the things required.

 

Step 1) The AngularJS library Source:

Always keep in mind that you must need to add this source in the file otherwise the code wan’t work. The source is provided below.

Description:

So what do we have here? I wrote a source of AngularJS library and called it in the script. This is the source script which is to be placed in the head portion of the HTML file. This will link our file direct to the library of AngularJS.

 

Step 2) The HTML File:

What do we need now? We need a HTML file for AngularJS ng-class directive, because we know it is important for AngularJS as it works in it. The code is shown below.

Description:

So what do we have here? We have a simple HTML code in which I placed the source script only. As you can see in the body tag I placed a “paragraph” tag and three input tags.

The paragraph tag contains my simple text and the “input” tags which are checkboxes. The checkboxes will control the color, size and the shape of the text. Now I need to add the directives of AngularJS to make my code work.

 

Step 3) AngularJS ng-class Directive code:

Now I shall add all the directives required for this code. The new HTML code after adding the directives is shown below.

Description:

New we have the whole code of AngularJS ng-class directive. So what you need to understand here? You need to focus on few things.

a) I added the ng-app directive in to the HTML tag to make it the owner. You might think that I didn’t assigned the value to the ng-app, it is because I didn’t made any module or didn’t write the script. Don’t get confuse with it. It is required to attach it with the script.

b) I created the style and added it in the head tag. In the script I took three attributes of “font color”,” font size” and “font style”. This is the style I shall call in the body tag with the help of ng-class tag.

c) Now see carefully in the paragraph tag I called “ng-class” directive and called the classes present in the style tag and initialized them with the “names” of the directive “ng-model” for binding purpose.

d) I linked the classes with the name I assigned to ng-model. So the ng-model will bind then for us and AngularJS ng-class directive will call the style at run time.

Now I shall explain this with the help of images.

 

Step 4) The Image View:

The image view will help you know what I wanted to show you or in what way do your AngularJS ng-class directive code works.

a) Main display:

 

AngularJS ng-class

Description:

What do we have here now? As you can see the picture shows a text statement and three checkboxes.

The first checkbox defines color.

The second checkbox defines size.

The third checkbox defines font style.

At this time nothing is changed in the display because no event is performed yet. The performed events are shown in the pictures below.

b) First event performed:

In this picture only first event is performed. As you can see in the picture below.

AngularJS ng-class

Description:

Now why the text color is red? It is red because the “first event” is performed. As you can see the “first checkbox” is checked which made the “color” class to apply it’s property.

c) Second event performed:

In this picture only second event is performed. As you can see in the picture below.

AngularJS ng-class

Description:

Now why the text size is increased? It is large because the “second event” is performed. As you can see the “second checkbox” is checked which made the “size” class to apply it’s property.

d) Third event performed:

In this picture only third event is performed. As you can see in the picture below.

AngularJS ng-class

Description:

Now why the text font style is changed? It is italic because the “third event” is performed. As you can see the “third checkbox” is checked which made the “style” class to apply it’s property.

e) All events are performed:

In this picture all the event are performed. As you can see in the picture below.

AngularJS ng-class

Description:

You can see the color, size and the style all are changed because “all the three events” are called in it at the same time. As you can see all the boxes are checked.

This is how the AngularJS ng-class directive works. The ng-model directive bound the property assigned to it’s name.

 

 

Precautions:

Keep in mind this AngularJS ng-class directive is a strong directive which doesn’t need the javascript to handle itself. It only need the library source.

 

Conclusion:

So what do we have today? We learned how to use AngularJS ng-class directive. We learned how to use CSS style in our AngularJS file with the help of ng-class. We used the ng-model directive for binding function. The ng-pp directive is used to tell AngularJS which tag is your owner.