Collapsing navbar with angular7 & Bootstrap4

Question

I'm trying to make a navbar with the right collapsing animation when having the mobile screen size.

I've been following this tutorial : https://angularfirebase.com/lessons/bootstrap-4-collapsable-navbar-work-with-angular/#ui-top-nav-component-html and managed to make this work. However, as you can see in the example, you first have a block appearing then the text sliding. Of course, I would like to have the text and block slide at the same time like in the bootstrap documentation (Bootstrap navbar) - to see it you just have to reduce the window and press on the navbar button to see the menu collapsing smoothly.

Is it possible through the animations or other way ?

Answer 1

You can do it by angular animations or by pure css. It's enough to toggle class with the transition height on div with .navbar-collapse class.

I would say it's a pretty small thing so it doesn't really need angular solution but I might be wrong here. If you would like to read when to use css and when angular animations you can preview answers here.