Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Conditionally add a single CSS class to a DOM element in Angular

    5.2.0 - 7.2.2

    Angular allows you to add a single CSS class to HTML elements within your component and bind them to a condition. Based on the result of the condition the class gets applied or not.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    In this example, we have a component with a div inside here. We apply here a rounded border CSS class, which we define here in the styles property. Now, very often in real world applications, you need to add those classes conditionally based on some application state.

    In Angular, we can do that by wrapping the whole part here in square brackets. Then we add a point here, and we basically translate our CSS class like this. Then we make the equals sign, and we add the condition. That's a true.

    If you save, you can see the border still gets applied. If you switch it to false, it doesn't get applied anymore. Also, you can also bind this to some variable, which is defined in your JavaScript part of your component.

    Let's set it to false to demonstrate this. If you set it to true, it gets activated again. To make this even a bit more dynamic, we could use here a p tag. Let's add a checkbox. Let's throw in a label. We need an input type of type checkbox. Add the border. Add the label here.

    Now, we basically establish a two-way binding with our isBorder variable. Now, if we toggle this, the border gets toggled, and we can switch it back on and off.