ngClass style not being applied

Question

I have a component with a TS file that has this section in it:

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.scss']
})

I then have a div in my HTML file that uses ngClass like this:

[ngClass]="{'open': visible}"

where "visible" is a boolean in my TS file that is set (or unset) when clicking a button. I can see the "open" class being applied and removed correctly when I click on the button. However, the additional styles that go with that class are not being added.

Everything seems to be as it should, but the extra styles aren't being added. I can see the original stuff in Chrome developer tools, and I see the class being added, but the styles don't change.

Any ideas?

Apparently, I had the extra class in the wrong spot in the SASS file. I had it like this:

$bg-primary: #007bff;

.nav-menu-fixed {
    position: fixed;
    top: 57px;
    left: 5px;
    width: 200px;
    border-radius: 10px;
    padding: 5px;
    visibility: hidden; 
    opacity: 0;
    transition: visibility 500ms, opacity 500ms;
    background-color: $bg-primary;

    .open {
        visibility: visible;
        opacity: 1;
    }

    .divider {
        height: 2px;
        width: 90%;
        background-color: silver;
        margin: 0 auto;
    }

    .item {
        padding: 10px;
        border-radius: 10px;

        &:hover {
            background-color: lighten(lightgray, 10%);
            color: black;
        }
    }
}

I thought the "open" class would override the other stuff, which it does, but only if I put it outside of the ".nav-menu-fixed".

So now it's working perfectly fine in Chrome. It also works in Firebox, but the position doesn't look the same as in Chrome (nor do the font sizes for that matter). And in Edge (IE), it doesn't work at all. I don't even think the menu component (or at least the part with the items to click) is even being rendered, as I don't see it at all in the source.

where is the extra styles and how are they used in your template? — Pengyy, Mar 23 '18 at 02:13
Are the styles there when you add the `open` class manually? — acdcjunior, Mar 23 '18 at 02:24
can you provide some code? as the it is working perfectly in https://stackblitz.com/edit/angular-pfxblb — Plochie, Mar 23 '18 at 03:46
I edited my original post to explain the solution, which I discovered by testing with your sample code Paresh, thanks. Now if only all the browsers would operate as well as Chrome. — Starfleet Security, Mar 23 '18 at 23:03

ngClass style not being applied

0 Answers0