0

I am using Angular4 to create an application in which i need to navigate between tabs using a button click event inside the tabs.Primeng Datatable click event navigate to another tab.

tabsSample.html

<md-tab-group class="custom-tab helper-top-margin" (selectedIndexChange)="selectedIndexChange($event)" [selectedIndex]="selectedIndex">
    <md-tab>
        <tab1></tab1>
    </md-tab>
    <md-tab>
        <span>
            <p-tabView orientation="left" class="custom-vertical-tab">
                <p-tabPanel header="Tab 2" [selected]="true">
                    <tab2></tab2>
                </p-tabPanel>
                <p-tabPanel header="Tab 3">
                    <tab3></tab3>
                </p-tabPanel> 
            </p-tabView>
        </span>
    </md-tab>
</md-tab-group>

Component

@Component({
    selector: 'tabs-sample',
    templateUrl: './tabsSample.html',
})
export class TabsSample {
    selectedIndex: number = 0;

}

tab1.html

<p-dataTable [value]="cars" selectionMode="single" [responsive]="true" class="fixed-datatable-width small-text">
    <p-column header="">
        <ng-template let-car="rowData" pTemplate="body">
            <a (click)="clickMe(car)" md-suffix class="helper-search-icon datatable-primary-icon">
                <md-icon>search</md-icon>
            </a>
        </ng-template>
    </p-column>
</p-dataTable>

@Component({
  selector: 'tab1',
  templateUrl: './tab1.html',
})
export class Tab1 {
  cars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    }

  clickMe(event: any){
    this.selectedIndex=event;
  }

}
Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
Vignesh
  • 2,378
  • 3
  • 25
  • 48
  • Possible duplicate of [**this**](http://stackoverflow.com/questions/42539272/goto-a-particular-tab-using-code-onclick-of-button-in-another-tab-angular2-mater/42561544#42561544) – Aravind May 05 '17 at 07:04
  • I am using selector to load sub tabs.So from sub tab if i click i need to navigate from one tab to another from main tab – Vignesh May 05 '17 at 07:07
  • I didnt get your point. elaborate.. – Aravind May 05 '17 at 07:28
  • when the user click's on a row in the primeng datatable, i need to navigate them to a material tab and sub tab p-tabview based on the row selected. the material tab is a independent component and the primeng table also a component which is loaded in the first material tab. – Vignesh May 05 '17 at 07:36
  • update your post with screen shot of your expectation – Aravind May 05 '17 at 07:37

0 Answers0