Angularjs add class to body in html

Question

Hi I am developing web application in angularjs SPA application which has English and Arabic languages. For RTL and LTR properties I am trying to add class to body html element in app.js as below.

 $scope.changeLanguage = function (lang) {
        $scope.lang = lang == 'de_AR' ? 'de_AR' : 'de_EN';
        var myEl = angular.element(document.querySelector('#body'));
        myEl.addClass('rtl');
}

Using above code I am not able to add class. I can see below code in html(browser).

<body ng-controller="RoslpAppController" class="ng-scope">

May I know what is the correct way to add css classes using Angularjs?

you can use ng-class for this

Paulo Galdo Sandoval
– Paulo Galdo Sandoval

2017-09-21 04:16:23 +00:00
Commented Sep 21, 2017 at 4:16 — Paulo Galdo Sandoval
– Paulo Galdo Sandoval, Commented Sep 21, 2017 at 4:16
You can refer weblog.west-wind.com/posts/2015/may/23/…

Vivz
– Vivz

2017-09-21 05:18:51 +00:00
Commented Sep 21, 2017 at 5:18 — Vivz
– Vivz, Commented Sep 21, 2017 at 5:18

Mohan Ram · Accepted Answer · 2017-09-21 05:11:32Z

3

Below is for ternary check in ng class

<div ng-class="(lang === 'de_AR') ? 'rtl' : 'ltr'"></div>

This is for multiple cases in ng class for one condition

<div ng-class="{'de_AR':'rtl', 'de_EN':'ltr'}[lang]"></div>

Code inside controller

$scope.changeLanguage = function (lang) {
        $scope.lang = lang == 'de_AR' ? 'de_AR' : 'de_EN';
        var myEl = angular.element(document.querySelector('#body'));
        myEl.addClass('rtl');
}

answered Sep 21, 2017 at 5:11

Mohan Ram

8,47125 gold badges86 silver badges132 bronze badges

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

2 Comments

Niranjan Godbole Over a year ago

Thanks i have added this ng-class="(lang === 'de_AR') ? 'rtl' : 'ltr'" and html i can see <body ng-controller="RoslpAppController" ng-class="(lang === 'de_AR') ? 'rtl' : 'ltr'" class="ng-scope rtl">. Is this is correct?

Mohan Ram Over a year ago

Yes correct. ng-scope is default class added by angular

Sajeetharan · Accepted Answer · 2017-09-21 04:16:41Z

3

You are looking for ngClass directive . if you have a scope variable $scope.rtl that drives what part of your content is displayed, you can use ng-class to add dynamic classes:

 <body ng-controller="MainCtrl" ng-class="{'rtl'}">

DEMO

answered Sep 21, 2017 at 4:16

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

Niranjan Godbole Over a year ago

Thanks Sajeetharan. How can i switch the classes? If the language is arabic then rtl and if the language is english the ltr. How can i do this?

Sajeetharan Over a year ago

add a ternary operator to check stackoverflow.com/questions/15397252/…

Niranjan Godbole Over a year ago

I have added ng-class="{{dir}}" and from controller $scope.dir=ltr i have done. Is this is the correct way i am following?

yesIcan · Accepted Answer · 2017-09-21 16:21:14Z

1

you can use ng-class

<body ng-controller="RoslpAppController" ng-class="{'class1':lang == 'de_AR', 'class2': lang == 'de_EN'} ng-scope">

edited Sep 21, 2017 at 16:21

answered Sep 21, 2017 at 5:14

yesIcan

1,7113 gold badges12 silver badges19 bronze badges

1 Comment

Niranjan Godbole Over a year ago

Thank you. I have added ng-class="{lang == 'de_AR':rtl,lang == 'de_EN': ltr}" and i got Syntax Error: Token '==' is unexpected, expecting [:] at column 7 of the expression [{lang == 'de_AR':rtl,lang == 'de_EN': ltr}] starting at [== 'de_AR':rtl,lang == 'de_EN': ltr}]. May i know what will be the correct syntex?

Michiel · Accepted Answer · 2020-12-30 13:42:02Z

0

Your code does not work because

angular.element(document.querySelector('#body'));

looks for an element with the id 'body' if you want to acces the body, use:

angular.element(document.querySelector('body'));

answered Dec 30, 2020 at 13:42

Michiel

4,2803 gold badges32 silver badges44 bronze badges

Collectives™ on Stack Overflow

Angularjs add class to body in html

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related