How to apply css in angular js using ng-class

Question

I am new to angular js. I want to apply css styles from external css file. i have defined .container class in css file i want to call it in angular js file using ng-class. But it is not working y. style.css

.container
{
width:900px;
height:600px;
border:1px solid;
margin:auto 0;
position:absolute;
background:red;
}

index.html

    <!DOCTYPE html>
    <html>
    <head>
    <script src="js/Angular.js"></script>
    <link rel="stylesheet" href="css/style.css"  />
    </head> 
    <body>
    <div ng-app="" ng-class="container" >

    </div>
    </body>
    </html>

ng-class is used to set the classes dynamically in an angular way i.e., ng-class={{container}} . In the above case you can try like this class="ngClass: container" — newstackoverflowuser5555
– newstackoverflowuser5555, Commented Jun 5, 2015 at 7:23
Why not set it in html class="container"? Is there a particular reason why you need to use ng-class? — Sylvan D Ash
– Sylvan D Ash, Commented Jun 5, 2015 at 7:43

Yangguang · Accepted Answer · 2015-06-05 07:18:44Z

2

you can use:

ng-class="{'container'：true}"

see ngClass

answered Jun 5, 2015 at 7:18

Yangguang

1,7859 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zee · Accepted Answer · 2015-06-05 07:25:55Z

1

To apply a class like that, you can simply use class:

<div ng-app="" class="container" >
               ^^^^^

From the docs:

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

If you still want to use ng-class:

<div ng-app="" ng-class="{'container':true}" >

An example fiddle.

edited Jun 5, 2015 at 7:25

answered Jun 5, 2015 at 7:18

Zee

8,4805 gold badges39 silver badges59 bronze badges

2 Comments

bharath Over a year ago

i know to do it in that way. i want to use ng-class

Zee Over a year ago

@bharath ng-class is used to apply classes dynamically based on conditions. It is not required in your case.

Guinn · Accepted Answer · 2015-06-05 07:20:33Z

0

This is no ng-class, but a regular class. the ng-class directive is to do more than just assigning a class, but for example assign the class through a condition. If you simply do like this:

<div ng-app="" class="container">

is sufficient.

answered Jun 5, 2015 at 7:20

Guinn

1,39514 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to apply css in angular js using ng-class

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related