Angular Directive to adjust your component height as per window inner height

Sometimes, we need to handle the component height as per the different screen sizes and we want the components to be seen at one glance. There are so many ways to achieve this goal. Here, in this blog, I want to share one more convenient way to achieve the same with the help of the mighty Angular Directive ;).

Let’s create one directive by typing:— ng generate directive <directive-name>

ng generate directive shared/directive/auto-full-height

Now let’s add some ingredients(Code) in our directives to make it tasty(Useful).

Here in the calculated height, you can make the adjustment that you want .i.e, to decrease or increase extra space, or else you can directly use the window height.

Don’t forget to export your directive to where you have created it. And import it in the module where you want to use it.

Now we’re good to go with this directive. We can use it in any component or div or section. Ex: —

So, the good thing about using a directive is that it is very simple to use and a convenient way to direct your component(DOM).