FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.2 Property Bindings

In this lesson we'll see how to bind a property of a component class to a property of an element or component. You can use this type of binding to control the value of many common properties like the element image source, href, classes, and more.

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.2 Property Bindings

Hi folks, in this lesson we're going to take a look at how we can bind to the properties of HTML elements in our templates. Property bindings are similar to simple interpolation in that they represent a one way transfer of data. Property bindings can only set an element or component's properties, we can't use them to read data from an element. So let's see some property binding in action. A common use case is disabling or enabling a button based on the value of some property in the component class. In the start component, we do have a button. So let's add a property binding for the button's disabled property. We use square brackets around the name of the property that we want to bind to. And in this case we can specify a property of the component, and that is called disable button. The component doesn't currently have this property, so let's go and add it. So we specify it as a public property. Remember that if you want to use a property of your component class in the template, it must be public. And we set the type to be Boolean. So let's just go back to the browser quickly. So because the property doesn't evaluate to true, the button is not yet disabled. But now in the ngOnInit, let's just set that to true. And let's go back to the browser now. And we can see that because the property does evaluate to true, the button is now disabled. If the value in the component changes at all, that change will be reflected in the UI. So we've used a settimeout here, which will change the value of the disable button property to false after one second. So now after one second the button becomes enabled again. We aren't restricted to Boolean values either, we combined two string values and use a more complex expression in the template. So let's delete that settimeout that we just added. And let's change the property to be a string value instead of a Boolean. And now we'll need to update where we set the value in the ngOnInit, which is just giving me a LIM warning. So now we can test for the value of the string in the template. So now we're saying, if the value of the disable button is equal to the string yes, then the button should be disabled. So if we go back to the browser at this point, we find that the button is disabled. So this works just as well but just as with interpolation, it's best to keep the logic in the component class where it can be tested instead of in the template here. In this case it's not too bad, but when we start to get lots of and or or conditions, it can become very hard to read. Let's put it back to how it was cuz I think that was actually preferable. Another common use for a property binding is binding to an element's hidden property, which is used to show or hide the component. We can use this with elements and we can also use it with other components as well. So let's say that we want to hide the game and end components to begin with. We can add a property binding for these in the home component. And now we just need to add the properties to the home component class. So by default in type script, a property that doesn't have an access modifier, like this one, title, will automatically be public. But I prefer to explicitly state whether properties are public or private. And I just think it makes the class more readable, especially when you've got lots of properties. And some of them are public and some of them are private or there might be a few protected ones in there as well. If you've just got some random ones here that don't have any access modifier at all, then it just makes it less readable, personally I find that. You might not think the same, but I'm just gonna add the public keyword before this existing types of property. And now we can add a couple more properties for the property bindings that we've just added in the template. So let's save that and now let's go back to the browser. And we find that the entire game and end components have been completely hidden. Even though they're not actually html elements, we can still use the hidden property binding with them. And just to reiterate, we use square brackets around the property that we would like to bind to. In this case, that's the hidden property that's on the left-hand side of the expression. And on the right-hand side of the expression, following the equals sign, is the property that we are binding to. So one point to note is that the square bracket syntax that we've used in this lesson is only for element properties, not element attributes. Attributes and properties are conceptually similar, and sometimes elements can have both a property and an attribute with the same name. And whose values are kept in sync automatically by the browser. The difference between them is that HTML defines attributes while the dom defines properties. Angular has a separate syntax for attribute binding which we look at in another lesson. So in this lesson we've learned about property binding, which allows us to bind properties of our components or the elements within our components to properties in our classes. We saw that we use square brackets around the property that we want to bind to, followed by an expression within double quotes. Which Angular will evaluate and update the binding with the appropriate value. Thanks for watching.

Back to the top