7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.6 The `NgClass` and `NgStyle` Directives

The NgClass and NgStyle directives are very similar to the class and style bindings, but they can set multiple classes or styles simultaneously. In this lesson we'll focus on these useful directives.

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.6 The `NgClass` and `NgStyle` Directives

Hi folks. In this lesson, we're going to take a look at the NgClass and NgStyle directives, which are similar in intent to the class and style bindings, except that with these directives, we aren't restricted to setting a single class name or a single style. We can set many at the same time. Like Angular 1.X, modern versions of Angular also include directives. And in fact components are just specialized directives. Directives function in the same way that they did before. They are used to alter the behavior or appearance of elements or components. Let's take a look at the NgClass directive first. It's on of Angular's built-in directives, of which there are many, and it's very commonly used. So, in the start component, let's say that we want to show a couple of different states for the name input and label, like an error state or a warning state depending on the values entered into the input. We won't add proper validation. We do that in the form section later in the course, we'll just simulate it for now. We use square brackets around the directive NgClass and the expression points to an object in the component class called states. The object doesn't exist yet, so let's add it to the component. The type of property is going to be an object, so let's initialize the property now in the Ng, on in-it life cycle method. So let's just hardcode the values for now. We've got two properties warning and error. Warning is set to true and error is set to false. So the property is an object, and each key in this object is a class name. If the value for that class name is true, the class name will be added to the element that the directive is applied to. So, let's add some SESS for these states to the forms.sess, SESS file. So, inside the label we can add this SESS. And then inside the input we can add some more. The ampersand at the end targets the parent of the current selector, which is where we've added the directive. So let's go back to the browser now. And we find that the label and the input now have the orange styling. And we can see that the parent row has the warning class. So let's go back and just set the error state to true as well. And we'll go back to the browser, and we'll see that the styling is now red, and the parent row has both the classes, warning and error. We won't be using the Ng style directive in the example app, so let's just revert things back. The NgStyle directive works in a very similar way to the NgClass directive, except that in the template we use NgStyle instead of NgClass. In the objects back in the component class, we use the names of style properties as keys instead of class names. So now we can see that the style property has set the color to red. We don't want to use NgStyle in the example app however, so let's just revert that back to NgClass. The NgClass and NgStyle directives are known as attribute directives because they are added to the elements as attributes. They are distinguished by square brackets. Other types of directives might use a different syntax. So in this lesson we learned how to use the NgClass and NgStyle directives, which are both very commonly used. The reason for using these directives instead of the Class or Style bindings is that with directives we can set multiple class names or styles at once. With the bindings that we looked at in the last lesson, we can only set a single class or style. Thanks for watching.

Back to the top