This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

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

    Juri StrumpflohnerJuri Strumpflohner

    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.

    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    00:01 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.

    00:19 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.

    00:35 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.

    00:52 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.

    01:18 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.

    Discuss

    Discuss