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.


    Style HTML elements in Angular using the style property

    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 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




    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 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.