Goto another tab from a particular tab on Click event using Angular4 (Primeng datatable)

2.7k views Asked by At

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;
  }

}
0

There are 0 answers