The navigation bar changes its functionality depending on the page

Question

The navigation bar changes its functionality depending on the page

My Angular application features a main app component that includes a navbar linking to other components using the routerLink directive. The structure is simple:

<nav>
    <button [routerLink]="['/foo']>
        Foo
    </button>
    <button id="button_to_change" [routerLink]="['/bar']>
        Button I want to customize
    </button>
</nav>
<div [@routeAnimation]='prepRouteState(routerOutlet)'>
    <router-outlet #routerOutlet="outlet"></router-outlet>
</div>

In a specific component (for example, the foo component in the mentioned scenario), I want to modify the behavior of the second button bar only within that component. Is it possible to achieve this programmatically through TypeScript code? Can I change the destination of the bar button for that particular component?

Appreciate any guidance on this matter

angular typescript

Answer 1

Answer №1

For greater flexibility, opt for (click)="barClicked()" over [routerLink]="['/bar'] when handling dynamic actions.

Answer 2

For greater flexibility, opt for (click)="barClicked()" over [routerLink]="['/bar'] when handling dynamic actions.

Answer 3

Answer №2

To determine which component is being loaded and control the visibility of buttons accordingly, you can subscribe to router events in your application and implement the logic for showing or hiding each button.

For example, in your navbar component:

class Navbar {
  showButton: boolean = false;
  
  constructor(private router: Router) {
    router.events.subscribe((event) => {
      console.log(event instanceof NavigationEnd);
      
      if (event instanceof NavigationStart) {
        if (event.url === "yourcomponentroute") {
          this.showButton = true;
        }
      }
    });
  }
}

Your navbar HTML template should look like this:

<nav>
    <button [routerLink]="['/foo']">
        Foo
    </button>
    
    <button *ngIf="!showButton" id="button_to_change" [routerLink]="['/bar']">
        Button for other components
    </button>
    
    <button *ngIf="showButton" id="button_to_change" [routerLink]="['/bar']">
        Button for foo component
    </button>
</nav>

Answer 4

To determine which component is being loaded and control the visibility of buttons accordingly, you can subscribe to router events in your application and implement the logic for showing or hiding each button.

For example, in your navbar component:

class Navbar {
  showButton: boolean = false;
  
  constructor(private router: Router) {
    router.events.subscribe((event) => {
      console.log(event instanceof NavigationEnd);
      
      if (event instanceof NavigationStart) {
        if (event.url === "yourcomponentroute") {
          this.showButton = true;
        }
      }
    });
  }
}

Your navbar HTML template should look like this:

<nav>
    <button [routerLink]="['/foo']">
        Foo
    </button>
    
    <button *ngIf="!showButton" id="button_to_change" [routerLink]="['/bar']">
        Button for other components
    </button>
    
    <button *ngIf="showButton" id="button_to_change" [routerLink]="['/bar']">
        Button for foo component
    </button>
</nav>

Answer 5

Answer №3

Here's another method using *ngIf with a getter and a service to manage the current page:

Define your service:

@Injectable()
export class PageService {
    currentPage: string;
}

Implement in your navigation component:

<nav>
    <button [routerLink]="['/home']>
        Home
    </button>
    <button *ngIf="currentPage=='page1' [routerLink]="['/page1']>
        Page 1
    </button>
    <button *ngIf="currentPage=='page2' [routerLink]="['/page2']>
        Page 2
    </button>
</nav>

export class NavigationComponent {
   get currentPage() {
       return this.pageService.currentPage;
   }
   constructor(private pageService: PageService) {}
}

Adjust your specific component:

export class Page1Component implements onInit {
   set currentPage(value) {
        this.pageService.currentPage = value;
   }
   constructor(private pageService: PageService) {}
   ngOnInit(){
       currentPage = "page1";
   }
}

Answer 6

Here's another method using *ngIf with a getter and a service to manage the current page:

Define your service:

@Injectable()
export class PageService {
    currentPage: string;
}

Implement in your navigation component:

<nav>
    <button [routerLink]="['/home']>
        Home
    </button>
    <button *ngIf="currentPage=='page1' [routerLink]="['/page1']>
        Page 1
    </button>
    <button *ngIf="currentPage=='page2' [routerLink]="['/page2']>
        Page 2
    </button>
</nav>

export class NavigationComponent {
   get currentPage() {
       return this.pageService.currentPage;
   }
   constructor(private pageService: PageService) {}
}

Adjust your specific component:

export class Page1Component implements onInit {
   set currentPage(value) {
        this.pageService.currentPage = value;
   }
   constructor(private pageService: PageService) {}
   ngOnInit(){
       currentPage = "page1";
   }
}

The navigation bar changes its functionality depending on the page

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

Error when sending Angular 4 GET request with multiple Headers results in a 400 bad request code

Upgrading to Angular 6 causes Linter to become significantly more stringent

Utilize the gsap ScrollTrigger in conjunction with React's useRef() and Typescript, encountering issues with type mism

The absence of the 'profileStore' property is noticed in the '{}' type, which is necessary in the 'Readonly<AppProps>' type according to TypeScript error code ts(2741)

Encountering an error message in Angular stating "Spotify is not defined" while utilizing "@types/spotify-web-playback-sdk"

How can Angular 6 automatically detect changes in angular2-cli app files and run build files on the browser simultaneously?

Encountering error TS2307 while using gulp-typescript with requirejs and configuring multiple path aliases and packages

Use the date-fns max function to identify the latest date in an array of date strings

React-aria | Encountering a typescript error with input fields/textfields

Using Vanilla JavaScript library in Angular 6 - A Comprehensive Guide

The tslint exclusion is not functioning properly for tsoa endpoints

In Angular 10, the custom CSS URL is loading after the standard styles.css file

Angular's async pipe will not refresh the view until the user interacts with it

Is there a comparable feature in Typescript similar to Java/.NET Reflection? Alternatively, how can I retrieve a list of classes that inherit from a specific abstract class?

Typescript constructor that accepts an object as an argument instead of traditional parameters

Setting the location of the global nprmrc file on a Windows operating system

When TypeScript tsc is unresponsive, there is no output or feedback provided

Modifying an Angular Component Template following an API Response

The connection to Firebase is being refused when attempting to use the http.post method in Ionic