12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
13 : 09 : 04 : 06
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

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

Unlock All Content for 40% Off
Become a member
to unlock all features

    Style HTML elements in Angular using the style property

    Juri StrumpflohnerJuri Strumpflohner
    5.2.0 - 7.2.2

    In this lesson we will take a look at how Angular makes use of the style property. This is a powerful concept that allows us to very easily add CSS styles onto HTML elements. These styles can even be easily made conditional.



    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




    We can use the style property to add, for instance, some background color to our div here. Let's add some yellow. Great. Then, let's cut this out for a second and create here a getBackgroundColor function. We obviously also have to declare it here on our class.

    As a first step, let's see if we return our "yellow" string again. Then, let's create some variable, some showStyle toggle, and set it to false. In our getBackgroundColor function, we can then say something like, if this.show style, then let's return our "yellow" string. Otherwise, we return simply an empty string.

    To see this in action, we can simply add here a click listener, and we toggle our showStyle variable. By then clicking on the div, we can toggle our style.

    Now, obviously, this works for any kind of style. For instance, let's change the color of our font, and let's set it to red. You can see how this gets applied.