Angular - Change the container height based on the route

Question

I have a container where I load my grids based on the route. For example,

admin.component.html

    <div class="admin-right-panel">              
      <div class="grid-style">
         <router-outlet></router-outlet>
      </div>
    </div>

In the router-outlet, I will load my grid pages/components based on the route Here is the CSS for above HTML

admin.component.scss

    .admin-right-panel {
        height: 60vh;
    }

So, there is an ask for me, where I need to increase this height when I load a specific page into the container.

Let's say I have components A, B, C and when I load B then I need the height to be 80vh, but keep as 60vh in the case of A, B.

Each component has it's own HTML, SCSS, TS files. Is there a way I can implement this logic? Please suggest.

score 0 · Answer 1 · answered Nov 25 '21 at 08:25

You can conditionally add class using ngClass and subscribing to Router events to check what is the path of the URL.

import {Router, NavigationEnd, ActivatedRoute} from '@angular/core';

...
path!: string;

constructor(private router: Router, private route: ActivatedRoute) {
   this.router.events.pipe(filter((event) => event instanceOf NavigationEnd).subscribe((data) => { 
       this.path = this.route.snapshot.path;
   })
}

Using path, set the component's class.

<div [ngClass]="{ 'extraHeight': path === '<YourPath>' }"> ... </div>

score 0 · Answer 2 · answered Nov 25 '21 at 08:37

Pre-requisite: Create a new class in stylesheet with the required view height in your edge case. Then, you should be able to do any of the following:

You can use ngClass directive to toggle a class name via a typescript variable.
You can also use [class.largeView]="condition_in_typescript" to add a class largeView to your list of classes. It will only get added when condition is true.
You can wrap two layouts in ngTemplate with a *ngIf and toggle according to path variable in typescript.
You can use HostBinding in a directive to bind multiple classes in your element.

Angular - Change the container height based on the route

2 Answers2