FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.5 Class and Style Bindings

The class and style bindings are commonly used to manage a single class name or inline style on an element. They use a similar syntax to property bindings, making them intuitive and easy to use. We'll see how to use both types in this lesson.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


4.5 Class and Style Bindings

Hi folks. In this lesson, we are going to look at the style and class bindings. We can use these bindings to add and remove class names, or inline styles on elements. These are like specialized property bindings for working exclusively with class and style properties. And Angular provides these, because these are such common requirements. Let's take a look at class bindings first. In the template for the start component, there's a custom check box. It doesn't currently work, but we can fix it up with some help from the class binding. So we have this span here for our custom check box. And what we want to do is link the checked property to a value in the component class. So we still use square bracket syntax for the class binding, and as I said, that's because the class binding is a specialized property binding. So this time we prefixed the class name that we would like to add with the word class. So the binding becomes class.checked, because we want to add a class called checked, and we link that to a property in our component called Aces High. So whenever this property evaluates to true, this element will get the checked class. And when the property evaluates to false, the class will be removed. And we're also going to want to bind to the click event. So let's add that, at this point, as well. So let's open up the component class now. So we don't have either an aces high property, or a toggle aces method. So we're gonna need to add both of those. So all the toggle aces method does is flip the value of the aces high property. So if this property starts out as true, calling this method will set it to false. But if the property is already false, calling the method will set the property to true. So we haven't initialized the aces high property, and so its value will initially be undefined, which evaluates to false, so aces will not be high by default. So let's go back to the browser now. And we should find that we should be able to click the check box, and it will add the checked class. And it looks like it's working, let's just take a look at the elements. So we can see it currently has the checked class, and that class gets removed. But it doesn't affect any other classes that the element might have, it already has this check box class, and that remains whether or not the checked class is present. So the class binding is useful for adding or removing a single class name. There is also another form that the binding can take, instead of toggling a single class, we can overwrite the whole class property. So this time it breaks everything, because it starts out with a class name undefined, and that is not what we want. So I just wanted to point out that this is available, but it works in a slightly different way. So if you really want to set one class, then using the class.class name format is a safer option. We can still only add a single class if we use just class by itself. It just overrides other classes. So you'll find that this version is the most common. The style binding works in a very similar way to the class binding. Let's say we wanted to set the color of one of the labels in the start component as an end line style. So, we still use square brackets for the style binding. And this time we use style., and then the name of the style that we want to set, which is this case is color. Liz had a method here called get color. And in this case, the method that we've just bound to will need to return the value that gets used as the color. So this binding can only set a single style property at a time, just like the class binding. One point to note is that when setting style properties that are usually hyphenated, is that we can use either a hyphen or camelcase. So, if we wanted to set the background color instead of the color, we could do either this. Or we could do this. There's no difference, it's really down to personal preference. So we don't actually want to do that for the label, I just wanted to show you the format of the binding. As you can see, it's very similar to other property bindings that we've used. But let's get rid of that. So in this lesson we looked at the class and style bindings. We saw that either of them can only set a single class name or a single inline style. But that the syntax used by the binding is almost identical to a regular property binding. We just specify either class.className or style.styleProperty. Thanks for watching.

Back to the top