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.3 Attribute Bindings

In this lesson we'll see how to bind a property of a component class to the attribute of an element. This is similar conceptually to property binding, but you can use it to target HTML attributes rather than DOM properties.

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.3 Attribute Bindings

Hi folks. In this lesson, we're going to see what we need to do when we want to bind to an HTML element attribute rather than a property. Usually we'll use property bindings much more often than attribute bindings, and property bindings should generally be preferred. But in some cases, we have no choice but to bind to an attribute. The most common use case for setting attributes, is when we're using area attributes. Because these are implemented only in HTML and not by the DOM at all, so there are no corresponding area properties, only area attributes. In our example app, at the moment, the game and end components are both hidden. As well as setting the hidden property, we can also set the area hidden attributes. The syntax for attribute bindings is actually very similar to the syntax that we use for property bindings. But let's try to see what happens if we set the area hidden attributes using a property binding. So we've used the same square bracket syntax here, let's go back to the browser and see what happens. So we can see now that our app doesn't even render. Let's take a look in the console. And we can see we've got a big, scary error message here. And it's so big we can't even see all of it. But at the top it tells us that we have template parse errors. And it can't bind to area hidden, since area hidden isn't a known property. That's not happening because we're setting the attributes on a component. We'd get exactly the same message if we tried to set an attribute using a property binding, on a regular HTML element. So to turn this into an attribute binding, we just need to prefix the name of the attribute with A-T-T-R. That tells angular that it's actually an attribute we want to bind to and not a property. Let's go back to the browser once again. And we can see that our page is rendered as before. Let's just open up the console. So we can see that the app game and the app end component still exist, but they're hidden. And we can see that they both have the area hidden attribute set to true, perfect. We should also probably set the same action attribute and hidden property on the start component for when we want to hide that a bit later on. And let's just add the corresponding property in the home components class. This time we'll set it to false. Otherwise we'll see very little on the page at all. So in this lesson we looked at attribute bindings. We saw that they are really similar to property bindings and work in a very similar way. And that they also use the square brackets around the binding targets. But to tell Angular that it's an attribute and not a property, we prefix the name of the attribute with A-T-T-R. Thanks for watching.

Back to the top