Check if Class exists through the DOM using Angular

Question

I have a bunch of pages following the same layout but some of them have a "secondary" navigation bar at the top. When this navigation bar exists I have to push the main content down from the page using margin-top in the less.

My issue is I can't find a clean way of doing this just through the DOM.

sample.html

<!-- The secondary navigation below the header -->
<div class="navigation-row text-center">
    <div class="col-xs-offset-2 col-xs-8 text-center">
        <h4> Sample Page </h4>
    </div>
</div>

<!-- Main Content -->
<div class="row">
    ...

index.html (inherited template that every page uses)

<!-- Main Content -->
<div class="content container-fluid">
    <div ng-class="{'secondary-nav' : document.getElementsByClassName('navigation-row').length > 0}" ui-view="main"></div>
</div>

So basically in my main content section I am trying to check if the class navigation-row exists on the page (navigation-row is the class for the secondary navbar) and if it does then add the class secondary-navbar-padding to the div.

I have tried using angular.element which looks like

<div class="row" ng-class="angular.element($document).hasClass('navigation-row') ? 'secondary-navbar-padding' : ''">

but it didn't work. Is this even possible to do? Am I approaching this incorrectly or if there is a suggestion for a better cleaner way to do this I would be open to do that also.

Try use angular.element(element[0].querySelector('.className')) — Hadi
– Hadi, Commented May 9, 2017 at 14:57
I think you might need to call a function and do all this there since for ng-class, you won't have angular.element available in the HTML — tanmay
– tanmay, Commented May 9, 2017 at 14:59

Joe Beuckman · Accepted Answer · 2017-05-09 15:30:52Z

4

I think you are only checking if the document element itself has that class.

You can count the number of elements with that class like this:

document.getElementsByClassName('navigation-row').length

So you could use ng-class this way:

<div class="row" ng-class="{'secondary-navbar-padding' : document.getElementsByClassName('navigation-row').length > 0}">

edited May 9, 2017 at 15:30

answered May 9, 2017 at 14:57

Joe Beuckman

2,2962 gold badges26 silver badges66 bronze badges

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

3 Comments

user3684399 Over a year ago

So this seems to work if I type document.getElementsByClassName('navigation-row').length > 0 in the browser console it will give me true if the navbar is there and a false if the navbar isn't there. But for some reason whenever I put it in my ng-class: <div ng-class="document.getElementsByClassName('navigation-row').length > 0 ? 'row secondary-navbar' : 'row'"> It won't ever use the true portion of it. Whether or not I comment out the navigation-row portion. But in the console it reads correctly as true or false.

Joe Beuckman Over a year ago

I think what you have would work with parentheses around the inequality.

user3684399 Over a year ago

I think your solution works but I figured out why it isn't working for me. I guess I explained my problem incorrectly and I have a layout that is being inherited (index.html). I have updated my question. I guess the issue lies in it's checking the document.getElementsByClass name of the template (index.html) so by the time it is picked up by the sample.html it is automatically false and not setting the class.

Collectives™ on Stack Overflow

Check if Class exists through the DOM using Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related