Dynamically Show or Hide Content in Angular Using Query Parameters and Route Conditions

In modern web applications, it’s common to need dynamic content based on the current route or query parameters. In this post, I’ll show you how to conditionally display elements in your Angular application using query parameters and route conditions. We’ll walk through a practical example where a search bar is shown on the home page but hidden on the profile page.

Step 1: Define Routes

In app-routing.module.ts, define your routes:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', component: ProfileComponent },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 2: Create Components

Next, create HomeComponent and ProfileComponent.

HomeComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

ProfileComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Dynamically Showing and Hiding Content

We want to show a search bar on the home page but hide it on the profile page. To achieve this, we’ll use Angular’s ActivatedRoute and Router services to detect route changes and conditionally display the search bar.

Step 3: Update Navbar Component

Update your NavbarComponent to react to route changes.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  showSearchBar: boolean = true;

  constructor(private router: Router) { }

  ngOnInit(): void {
    this.router.events.subscribe(() => {
      this.showSearchBar = this.router.url !== '/profile';
    });
  }
}

Step 4: Update Navbar Template

Update the template for the NavbarComponent to conditionally display the search bar.

<nav>
  <!-- other nav elements -->
  <div *ngIf="showSearchBar">
    <input type="text" placeholder="Search...">
  </div>
</nav>

Explanation

1. Routes Definition: We define routes for the home and profile pages.
2. Components: Basic components for HomeComponent and ProfileComponent are created.
3. Navbar Component:

• The NavbarComponent uses Angular's Router service to subscribe to route changes.
• It checks the current URL to determine whether to show or hide the search bar.
• If the URL is /profile, showSearchBar is set to false, hiding the search bar. Otherwise, it is set to true.