How to disable the second mat-list-item in Angular material

user_10164223 0
Viewed 2182

TLDR The second mat-list-item should be disabled.

I want to disable second option from my side navigation so that the user should always click on first one and then once First page is saved should navigate to the second.

<!-- navigation.component.html -->

<!-- ... -->

    <mat-nav-list class="mat-list-item-focus">
      <a mat-list-item routerLinkActive="active" routerLink='/cost-share'>Cost Share</a>
      <a mat-list-item routerLinkActive="active" routerLink='/penalty'>Penalty</a>
    </mat-nav-list>

<!-- ... -->
angular-material angular html
1 Answers

A quick and easy way of doing this, which can be modified on some sort of success call if your submitting something on the first page is to put a variable of type boolean in a service. You can use the variable to add a disabled class and also check the var in the auth guard. Please see demo, hope this helps get ya going.

export class AppComponent {
  disabled = true;
  constructor(private exampleService: ExampleService) {
    this.exampleService.pageDisabled.subscribe(status => this.disabled = status);
  }
}

export class AuthGuard implements CanActivate {
  constructor(private router: Router, private exampleService: ExampleService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const isDisabled = this.exampleService.pageDisabled.getValue();
    return isDisabled ? false : true;
  }
}

export class ExampleService {
  pageDisabled: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
  constructor() { }
}

@Component({
  selector: 'page-one',
  template: `
        <div>
            <div>Click on button to enable and navigate to page-two.</div>
            <button (click)="onClick()">Save</button>
        </div>
    `
})
export class PageOneComponent {
  constructor(private router: Router, private exampleService: ExampleService) { }

  onClick() {
    this.exampleService.pageDisabled.next(false);
    this.router.navigate(['/page-two']);
  }
}

<header>
  <nav>
    <a routerLink='page-one'>Page One</a>
    <a [ngClass]="{'disabled': disabled }" routerLink='page-two'>Page Two</a>
  </nav>
</header>
<section>
  <router-outlet></router-outlet>
</section>
user_48125150
Related