CODEWITHSUNDEEP
javascriptangularangular-materialangular-material2
stiGVicious
stiGVicious

Reputation: 320

Select active md-tab md-tab-group inside md-dialog

I have to open an md-dialog which contains an md-tab-group with two tabs. The md-dialog can be opened from two buttons which supposed to open the corresponding tab. The template from where the md-dialog is opened:

<button md-button class="" (click)="openDialog(1)">open tab 1</button>
<button md-button class="" (click)="openDialog(2)">open tab 2</button>

The component.ts:

    openDialog(type) {

      var data: any = {};
      data.type = type;

      let dialogRef = this.dialog.open(TwoTabDialog, {height: 'auto', width: '529px', data: data});
      dialogRef.afterClosed().subscribe(result => {});    
   }

And the dialog template:

<md-tab-group  class="follow-dialog">
<md-tab  label="tab 1" id="followers-tab" md-active="data.type == 1">                            
    tab 1 content
</md-tab>
<md-tab  label="tab 2" id="following-tab" md-active="data.type == 2">                            
    tab 2 content
</md-tab>

The problem is that tab 1 is opened all the times.

Upvotes: 4

Views: 556

Answers (2)

FAISAL
FAISAL

Reputation: 34701

You need to use the [selectedIndex] attribute of <md-tab-group>. Assuming that data.type represents a tabIndex, you can do the following: 

<md-tab-group class="follow-dialog" [selectedIndex]="data?.type-1">
    <md-tab label="tab 1" id="followers-tab">
        tab 1 content
    </md-tab>
    <md-tab label="tab 2" id="following-tab">
        tab 2 content
    </md-tab>
</md-tab-group>

Remove the md-active expression, you don't need that. Remember that the index of tabs starts at 0, thats why subtracting 1 in this expression: [selectedIndex]="data?.type-1"

Link to Plunker Demo

Upvotes: 4

Faly
Faly

Reputation: 13356

Try this:

openDialog(tab: number) {
    let dialogRef = this.dialog.open(TwoTabDialog);
    this.dialogRef.componentInstance.activeTab = tab - 1;
    dialogRef.afterClosed().subscribe(result => {});    
}

<md-tab-group  [selectedIndex]="activeTab">
    <md-tab  label="tab 1" id="followers-tab">                            
        tab 1 content
    </md-tab>
    <md-tab  label="tab 2" id="following-tab">                            
        tab 2 content
    </md-tab>
</md-tab-group>

Upvotes: 0

Related Questions