How to enable Material tab from another tab

Question

My tabs definition

this.tabLinks = [
      { label: 'NEW', link: 'crud' },
      { label: 'SEARCH', link: 'search' },
      {
        label: 'MEDIA',
        link: 'media',
        disabled: true,
      },
    ];

Tabs HTML

<nav mat-tab-nav-bar>
        <a
          mat-tab-link
          *ngFor="let tabLink of tabLinks; let i = index"
          [routerLink]="tabLink.link"
          routerLinkActive
          #rla="routerLinkActive"
          [active]="rla.isActive"
          [disabled]="tabLink.disabled"
        >
          {{ tabLink.label }}
        </a>
      </nav>

Initially my Media Tab is disabled. How can enable my Media Tab from inside New tab ?

Answer 1

If you are using a state management system like NGRX or NGXS, then I would keep the manage the enabled state of the tab there and provide an Action to allow changing the state.

Then somewhere in another tab you can fire that Action into the store to enable the state.

If you are not using NGRX, NGXS or any of the other tools for managing state, then you can create a service that contains the state of the tab or tabs, and share that service between the component displaying the tabs, and the component you want to enable the tab.

@Injectable({providedIn: 'root'})
export class TabLinks {

  private initialState = [
    { label: 'NEW', link: 'crud' },
    { label: 'SEARCH', link: 'search' },
    {
      label: 'MEDIA',
      link: 'media',
      disabled: true,
    }];

   private subject = new BehavourSubject(initialState);

   tabLinks$ = this.subject.asObservable();

   enableMediaTab() {
     this.subject.next(
       [...this.subject.value.map(x => x.link === "media" ? {...x, disabled: false} : x] 
     );
   }

}

Now you can inject this in your Tabs page. Use the async pipe to unwrap the observable.

    <a
      mat-tab-link
      *ngFor="let tabLink of tabService.tabLinks$ | async; let i = index"
      [routerLink]="tabLink.link"
      routerLinkActive
      #rla="routerLinkActive"
      [active]="rla.isActive"
      [disabled]="tabLink.disabled"
    >