5 Angular Animations Examples - Learn BrowserAnimationsModule in Angular

Learn Angular animations functionality by 5 Angular animations examples. You can't solve all problems with CSS animations because you need to mix Javascript logic with CSS animations. In Angular we can do that with BrowserAnimationsModule. In this video we will look on different ways to use angular animations with trigger, transition, animate, states and much more. We will also talk about enter, leave, void and in states in Angular animations.
TIMESTAMPS
0:00 Angular animations vs Css Animations
1:07 Installing BrowserAnimationsModule & Basic Angular animations
6:55 States in Angular animations
11:57 Wild cards in Angular animations
13:01 Angular Animations callbacks
15:16 Void state in Angular animations
► CHECK MY COURSES - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
REFERENCES
► Source code - github.com/monsterlessonsacad...

[@jeffnikelson5824]

Im working with angular for 2 years now (self thaught) and this is the most accurate animations guide I have seen in this whole time
+1 subscriber

[@MonsterlessonsAcademy]

Awesome!

[@ugochukwuumerie6378]

Great content. Always wanted a comprehensive tutorial on Angular animation. Thanks

[@MonsterlessonsAcademy]

Great to hear!

[@lisaliza6428]

I just wanted to animate one of my learning projects. This video is so in time!
Thanks)

[@MonsterlessonsAcademy]

Great!

[@ovuokeaghwotu2389]

Finally, I learnt Angular animations with this video and immediately implemented it in my project. Thank you for sharing!

[@MonsterlessonsAcademy]

Great to hear!

[@BrookeBond_Tea]

Your accent is really good to understand to non native speakers

[@MonsterlessonsAcademy]

Thank you!

[@patrickbrown5141]

great video, very informative. thanks

[@MonsterlessonsAcademy]

Glad it was helpful!

[@deanhantzis9630]

Superb tutorial on Angular animations. Thanks

[@MonsterlessonsAcademy]

Glad you liked it

[@oumarba7505]

Thank you, your videos help me a lot 🙂

[@MonsterlessonsAcademy]

Happy to hear that!

[@Santhorus]

great explanations!

[@MonsterlessonsAcademy]

Thank you!

[@beeeeeee42333]

explanation with examples + tips n tricks , perfection

[@MonsterlessonsAcademy]

Thanks! 😃

[@madipta]

this sounds like a mob teaching angular,, turned out very good video,, LIKE

[@MonsterlessonsAcademy]

Thank you very much!

[@maximilyukhin5454]

Thanks a lot!

[@MonsterlessonsAcademy]

You're welcome!

[@markusmachel397]

WoooW.... I didnt know that you could do this

[@MonsterlessonsAcademy]

Glad you learned something new!

[@hiteshsuthar1097]

Thanks

[@MonsterlessonsAcademy]

You are welcome!

[@user-hd8dm5ur3i]

Great! Could you create second part to describe params for animations and maybe somwthing else?

[@MonsterlessonsAcademy]

Thank you for the idea. I will add it to the list of videos.

[@tonyross2947]

Great video and great explanations. At 17:37, your fade-in didn't work - the element simply appeared. Fade-out worked fine. If you look at the code at 17:22, the void => * transition should be an ease-in, shouldn't it (line 1, but the line numbers are confusing).

[@MonsterlessonsAcademy]

Thank you!

[@pashabiceps95]

What is the point of V2. The element is not removed from the Dom, so the animation can be done through css

[@aporti5019]

Bro good video 🔥🔥

[@MonsterlessonsAcademy]

Thanks 💯

[@henrik3098]

thanks bro

[@MonsterlessonsAcademy]

Welcome

[@kuldeepbhatt8475]

Just Brilliant. I have a suggestion if you can make video about how to insert google maps or any maps for angular.

[@MonsterlessonsAcademy]

Thanks for the idea!

[@robertkylethomas173]

If you did a follow up with route animations that would be awesome please mate

[@MonsterlessonsAcademy]

I will add it to the list of future videos

[@tocw86]

Hey
I think that last example you have little bug ;-)
shouldn't it be like this:
` transition('void => *', [style({ opacity: 0 }), animate('1s ease-in')]), //enter`
`transition('* => void', [animate('1s ease-out'), style({ opacity: 0 })]), //leave`
Am i right ?

[@MonsterlessonsAcademy]

Yeap, looks correct

[@BannisterNicholas]

Curious, if this is anyway more performant if you just put a class on it? In Angular1 the isShown value would trigger the class to fade in, no extra code needed. just the boolean, the css and the ng-class on the target. the callback called from the watcher of the isShown.

[@MonsterlessonsAcademy]

Then it is just css animation triggered with a class change

[@j.k24]

if a user menu is beeing created and destroyed, should i make a decision to use angular animations? or rewrite the menu to just display none and use css visibility for animate the opacity?

[@MonsterlessonsAcademy]

css is always better

[@almirh]

Can this Animation be reusable like shared component? Great vid! Thx!

[@MonsterlessonsAcademy]

Of course. If it is just const property you can export transition from anywhere

[@Gyver4000]

hello, thanks for your tutorial , it is very interesting,
Question : is thre a relation between isShown(boolean) and FadeIn / Fadeout Please ?

[@MonsterlessonsAcademy]

Yes it is based on isShown property

[@Gyver4000]

@@MonsterlessonsAcademy thanks you

[@mayuripandey4402]

Can you provide crash course onMobx franework and Ant Design ? just like typescript course ?

[@MonsterlessonsAcademy]

Thanks for the idea!

[@josuesuarez205]

The second option is not accessible for screen readers, they will still able to read the div content if you just hide it using opacity

[@LukeAvedon]

OK first 30 seconds and my mind was already blown. I thought Angular Animations used the Web Animatons API, therefore as performant as CSS Animations? if not more so. Ack! am I all confused?
(Love your paid interview prep course by the way)

[@MonsterlessonsAcademy]

Now they are not. They are JS animations.

[@val-do]

what is your text editor ?

[@MonsterlessonsAcademy]

It's vim. here is my video about it ua-cam.com/video/YrLiugDhCuk/v-deo.html

[@mrborisak]

what is the IDE you're using?

[@MonsterlessonsAcademy]

It's Vim. Here is my video about that
ua-cam.com/video/YrLiugDhCuk/v-deo.html

[@poh9044]

How to fix :leave animation not working when the component is being destroyed? The most relevant answer was from StackOverflow and the answer said to use hostbindings, but that bleeds out to the whole component which is not ideal for a modal transition.
Updated: I fixed it using settimeout plus ngIf, but ideally it should automatically do that onDestroy

[@MonsterlessonsAcademy]

I didn't have such problem so I can't help

[@alexflatiz8120]

thanks a lot, but you are Russian, right? Почему на русском не преподаете?)

[@MonsterlessonsAcademy]

No I'm not. Because I don't want to.