FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.7 The `*ngIf` Directive

Keeping with the directive theme, in this lesson we'll look at the incredibly useful *ngIf directive. This controls whether or not an element exists in the DOM.

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.7 The `*ngIf` Directive

Hi, folks. In this lesson we're going to take a look at a structural directive. Attribute directives, like the ones we looked at in the last lesson, the NG class or NG style directives, are applied to elements like attributes. And they change the appearance or function of the element that they are applied to. Structural directives, on the other hand, are used to create new DOM structures based on some inputs. The structural directive that we're going to look at today is ngIf. The ngIf directive is used to control whether or not an element exists in the DOM. At the moment in the example application, we are showing or hiding one of the subcomponents using the hidden attribute bindings. It's quite common instead of showing or hiding an element with hidden to instead use ngIf to make them either exist or not. Let's update the app to use ngIf instead. Let's open up the home component. And let's get rid of the hidden binding. And we can also get rid of the aria one, because when the ngIf directive is false, the element simply won't exist. So it won't be hidden, and we wont need to use aria-hidden. And let's replace those with ngIf instead. So the syntax for a structural directive uses star followed by the name of the structural directive, which in this case is ngIf. So it's *ngIf. If we forget the star, crazy things will happen, and it's quite hard to debug so you really need to get into the habit of using the star with ngIf. So we're gonna use a couple of different properties for these ones that just make more sense. I think instead of having three and having a separate one for each of these sub-components, we can just have two different states. Either the game will be started or the game will be ended. So the start screen we want to show if the game has not started and the game has not ended. With the game component, we want to show that if the game has started, And with the end component, we want to show that if the game has ended. So now we need to update the component class to match the new values that we want to reference from the template, these gameStarted and gameEnded properties And we can set both of these to false initially, and now in the startGame method, we need to set the appropriate properties. So we've got this startGame method. We are probably gonna want an end game method as well, which sets the gameEnded property to true. So let's just add that while we're here. And let's just go back to the browser now. So on the screen, we can see that nothing has changed from the last three lessons, but let's just look at the DOM of the page. So we can see that instead of the app-game and app-end components existing but being hidden, we can see that they simply don't exist in the DOM at all now. We've got these two comments here, which come from the ngIf, and that just choses what the binding property value currently is. A useful benefit of using ngIf is that we don't have to set the aria attributes, and that makes the template simpler. It also means that we can go from three properties in the class to just two, so the class is also simpler. So in this lesson, we looked at the ngIf directive, and saw that we can use it to control whether a particular element exists in the DOM of the page or not. We saw that the syntax of this directive uses the star character instead of square brackets. We also learned that we can use a property, from the class, in the expression for this directive, like we did in this example. But don't forget that we could also use a method which returns true or false, to specify whether the elements should be present or not. Thanks for watching.

Back to the top