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

    Style HTML elements in Angular using the style property

    Juri StrumpflohnerJuri Strumpflohner

    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.

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

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

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

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

    Discuss

    Discuss