From the course: Angular Essential Training (2019)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Structural directives: ngIf

Structural directives: ngIf - Angular Tutorial

From the course: Angular Essential Training (2019)

Start my 1-month free trial

Structural directives: ngIf

- [Instructor] Angular has two types of directives, structural and attribute. Let's take a look at structural directives first. A structural directive is designed to alter the DOM layout by adding or removing DOM elements. Let's start with the Angular directive ngIf. ngIf will conditionally render the DOM element that the directive is on. In the media-item.component.html file we have some markup to display the data from the media item object. The watched on property on a media item may be empty so we want the DOM to not contain the element that has the watched on in the case that the media item doesn't have a watched on value. The ngIf structural directive works for this, so we want to put the ngIf directive on the container element for the value. Structural directives are applied to normal DOM elements using an asterisk template syntax. So on the element we need to put asterisk ngIf and set that equal to a statement…

Contents