Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 829 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Animate Adding and Removing Angular 2 Elements with ngIf

1:49 Angular 2 lesson by

A common use-case for an Angular 2 animation is to animate an element into the DOM. This is achieved with a combination of ngIf and the “void” state so that you have complete control over how the element appears and how it leaves.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

A common use-case for an Angular 2 animation is to animate an element into the DOM. This is achieved with a combination of ngIf and the “void” state so that you have complete control over how the element appears and how it leaves.

Avatar
Eric

Just an FYI, the plunk doesn't seem to be working at the moment.

You could also use the void state in combination with adding and removing elements with NGIF. Let's add a button with a click on toggle click. Let's call this toggle. This is going to flip this value, let's say is here, so on toggle click, this dot is here is equal to the flip of this is here.

We'll start with is here set to faults. In my DIV, I'll say NGIF is here. When I hit save, the black box is gone. I'll click toggle, go up here, I'll click toggle, it will go away. Toggle, it will appear. Toggle, it will go away. You'll notice the delay when it was leaving was because it was animating out to that void state.

Let's go ahead and set the void state again. I'm just going to copy and paste this style, but this time I'm going to set the transform of the void state to translate Y negative 100 percent. This is going to move that element up negative 100 percent, so that when I click toggle, it will slide down, and toggle, it will slide back up.

It's taking 100 percent of the height of this and moving it up. That's where the void state is. The void state is up above the browser. When I click toggle, it slides it down, and toggle, it slides it back up. It's going to and from this.

I don't have to define the positioning here or here, because this transform is just in relation to the default position, and these are already at the default position. You can just go ahead and toggle this. We'll go to stop. We'll go to go. Toggle it again, stop. Nothing happens. Toggle go, stop, toggle.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?