How to switch between md-tabs and select a specific one dynamically after Submit?

Question

I'am using in an index page md-tab-group where I do have two tabs and each tab has its own component - signin.component and register.component:

<md-tab-group>
   <md-tab label="signin"></md-tab>
   <md-tab label="register"></md-tab>
<md-tab-group>

By loading the page, the signin tab is activated/selected by default. But when a user switch to register-tab and submits the register form, which is working fine, then I would like to switch to the signin tab and make it selected. Means that the user can login after registration - which makes sense.

The Issue is that I can't manage to move and select/activate the signin tab after registration. the register tab keeps selected, which would confuse the users.

The <md-tab-group> is being directly embedded in signin.component.html and the register form is being loaded via router when clicking the register tab:

<md-tab-group #tabGroup>
     <md-tab label="signin">
         <form>
            <input....>
         </form>
     </md-tab>
     <md-tab label="regsiter">
         <router-outlet name="register"></router-outlet>
     </md-tab>
</md-tab-grou>

I tried couple of ideas but unfortunately none of them gave me the expected result.

Any Hint or Idea please?

Raed Khalaf · Accepted Answer · 2017-08-09T14:10:10.207

at first you need to create a service called SwitchTabService to achive communication between components.

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class SwitchTabService{
   public onRegisterFinish = new EventEmitter();
}

add that service to the app.module.ts providers

...
providers: [
   ...
   SwitchTabService
   ...
]
...

you can use the two-way data-binding as follows:
signIn.component.html file

<md-tab-group [(selectedIndex)]='currentSelectedIndex'>
   <md-tab label="signin"></md-tab>
   <md-tab label="register"></md-tab>
<md-tab-group>

and inside the signIn.component.ts file

import {Component, OnInit} from '@angular/core';
import { SwitchTabService } from '??';    

@Component({
  ...
})
export class SignInComponent implements OnInit{
  currentSelectedIndex;
  signInIndex = 0; // assuming the index of signIn tab is 0 or the first

  constructor(private switchTabService: SwitchTabService) {}      

  ngOnInit() {
     this.switchTabService.onRegisterFinish.subscribe( () => {
        this.onRegisterFinished();
     });
  }      

  onRegisterFinished() {
     this.currentSelectedIndex = this.signInIndex;
     // this will change the selected tab to signIn tab.
  }
}

in the register.component

import {Component, EventEmitter} from '@angular/core';
import { SwitchTabService } from '??';    

@Component({
  ...
})
export class RegisterComponent{

  constructor( private switchTabService: SwitchTabService) {}       

   onSubmitForm() {
     // you submit Logic
     this.switchTabService.onRegisterFinish.emit();
   }
}

Doesn't help... this is one of the options I did try before. The point is that I have to add `currentSelectedIndex` Property in `register.component.ts` as the register form is in: `register.component.html` but the: `mg-tab-group` is being embedded in `signin.component.html` which is controlled by: `signin.component.ts`. Use case: I have to change the selectedIndex in `signin.component.ts` from: `register.component.ts` — k.vincent, Aug 09 '17 at 13:24
Great. The Service option did the Fix. working fine. Just one thing should be changed: instead `this.currentSelectedIndex = signInIndex;` it should be: `this.currentSelectedIndex = this.signInIndex;` — k.vincent, Aug 09 '17 at 13:55

score 0 · Answer 2 · answered Aug 09 '17 at 12:15

0

md-tab-group has selectedIndex property. Something like this should work:

<md-tab-group [selectedIndex]="myPosition" #tabGroup>

answered Aug 09 '17 at 12:15

Robin Dijkhof

18,665
11
65
116

How to switch between md-tabs and select a specific one dynamically after Submit?

2 Answers2