CODEWITHSUNDEEP
angularangular-material2
Gustavo
Gustavo

Reputation: 310

How do I make a dropdown list within a tab? Angular5 with Material2

So I've got this code which it is basically a navbar with tabs.

 <mat-tab-group>
 <mat-tab>
    <ng-template mat-tab-label>
        main page 
    </ng-template>
    main page content
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
        <button mat-button [matMenuTriggerFor]="menu" style="color:black;" (click)="$event.stopPropagation()">Options</button>
        <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="changeTab(0)">A</button>
            <button mat-menu-item (click)="changeTab(1)">B</button>
            <button mat-menu-item (click)="changeTab(2)">C</button>
       </mat-menu>
    </ng-template>
      <app-events></app-events>
 </mat-tab>
 <mat-tab>
    <ng-template mat-tab-label>
        D
    </ng-template>
    <app-apply></app-apply>
 </mat-tab>
 <mat-tab >
    <ng-template mat-tab-label>
        E
    </ng-template>
    <app-faq></app-faq>
  </mat-tab>
</mat-tab-group>

One of my option tabs I wanted to be a drop down list tab, but with material2 if it is selected immediately changes to that tab view (Which I dont want), instead I want to just display menu options and then I wanted to condition the menu items to show the respective option component.

Here is an example. All Letters would have its on individual content page when selected, also main page. Is there a way to do this loading everything at ones with the mat-tab-group? All content is are static websites, that's why I want to load it ones, instead of creating routing.

enter image description here

Upvotes: 3

Views: 7307

Answers (2)

AlokeT
AlokeT

Reputation: 1196

Hi here I create an online demo

Please check this is it solve your problem?

if it is then this is how it works:

(click)="$event.stopPropagation()"

This creates a hook to go through the child event, not the parent event which activates the menu event from the code, not the tab event.

Also, paste the full code here:

<mat-tab-group>
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 5">
        <ng-template mat-tab-label>
         <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">
          <mat-icon aria-label="Example icon-button with a heart icon">settings</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
          <button mat-menu-item>Item 1</button>
          <button mat-menu-item>Item 2</button>
        </mat-menu>
        </ng-template>
        No content  
      </mat-tab>
</mat-tab-group>

EDIT:

<mat-tab-group [selectedIndex]="selectedTab">
  <mat-tab label="Main Page">Main Page Content</mat-tab>
  <mat-tab label="Tab 5" disabled>
        <ng-template mat-tab-label>
         <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">
          <mat-icon color="warn" aria-label="Example icon-button with a heart icon">more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="changeTab(2)">A</button>
          <button mat-menu-item (click)="changeTab(3)">B</button>
           <button mat-menu-item (click)="changeTab(4)">C</button>
        </mat-menu>
        </ng-template>
        No content  
      </mat-tab>
      <mat-tab label="A">A Content</mat-tab>
      <mat-tab label="B">B Content</mat-tab>
      <mat-tab label="C">C Content</mat-tab>
      <mat-tab label="D">D Content</mat-tab>
      <mat-tab label="E">E Content</mat-tab>
</mat-tab-group>

Component:

selectedTab = 0;
  changeTab(tabIndex: number) {
    this.selectedTab = tabIndex;
  }

Upvotes: 4

Zze
Zze

Reputation: 18805

This is how I would approach an issue like this. I apologize about the slightly rushed example. Here is a working stackblitz: https://stackblitz.com/edit/angular-xpfy1s

First I created an object which denotes the menu structure:

public menu: any = [{
      group: [
        {
          label: 'Parent1'
        },
        {
          label: 'Parent2' ,
          children: [
            {label: 'Item1'},
            {label: 'Item2'}
          ]
        }
      ]
  }];

And then I use this in the template:

<div *ngFor="let menuItem of menu">
  <div *ngFor="let option of menuItem.group">
    <button *ngIf="!option.children"><a href="#">{{option.label}}</a></button>

    <button *ngIf="option.children" (click)="option.expanded = !option.expanded">{{option.label}}</button>
    <ul *ngIf="option.expanded">
      <li *ngFor="let child of option.children"><a href="#">{{child.label}}</a></li>
    </ul>
  </div>
</div>

Now you can see that the first button, knows that it does not have any children and therefor creates a button which contains an <a>. This would be where you trigger your tab change.

The second button, which does have children, does not render an <a> tag within the button and instead toggles the visibility of the list instead.

Upvotes: 3

Related Questions