I am working on an angular web app. I require to control my angular tabs based on actiions performed in the contents of those tabs. For instance I have the following tabs: Item Information, Variations, Pricing , Inventory, etc and these tabs contain forms loaded by angular components. I want to automatically switch to Variations tab when Item Information form submits successfully. Also, user should not be able to switch to variations tab before saving item information.
<mat-tab-group class=" navbar-default panel-piluku nav nav-justified nav-wizard nav-progression" >
<mat-tab class="outbound_link" role="button" title="Item Info" label="Item Info">
<add-product-information></add-product-information>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Variations" label="Variations">
<add-product-variation></add-product-variation>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Pricing" label="Pricing">
<add-product-pricing></add-product-pricing>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Inventory" label="Inventory">
<add-product-stock></add-product-stock>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Images" label="Images">
<add-product-images></add-product-images>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Locations" label="Locations">
<add-product-locations></add-product-locations>
</mat-tab>
</mat-tab-group>
constructor(private route: ActivatedRoute, private productsService: ProductsService, private router: Router, public dialog: MatDialog, private suppliersService: SuppliersService) { }
submitProduct = function(){
this.product["sku"] = this.sku;
this.product["alternate_sku"] = this.alternate_sku;
this.product["product_name"] = this.product_name;
this.product["product_description"] = this.product_description;
this.product["category"] = this.category_id;
this.product["price_per_unit"] = this.price_per_unit;
this.product["reorder_level"] = this.reorder_level;
this.product["discontinued"] = this.discontinued;
this.product["cost"] = this.cost;
this.product["default_price"] = this.default_price;
this.product["best_price"] = this.best_price;
this.product["medium_price"] = this.medium_price;
this.product["brand"] = this.brand;
this.product["upc"] = this.upc;
this.productsService.addProduct(this.product).subscribe((data)=>{
````Here the tab should switch```````
});
<form action="submitProduct()" id="item_form" class="form-horizontal" method="post" accept-charset="utf-8">
<input type="hidden" name="ecommerce_product_id" value="" />
...
...
...
<div class="form-actions">
<input type="submit" name="submitf" value="Save" id="submitf"
(click)="submitProduct()" class="submit_button floating-button btn btn-lg btn-primary" />
</div>
</div>
</div>
</form>
One can control the tab selected using the selectIndex
input to the mat-tab-group
. To Change the tabSelected , set it to the tab index you need and the tab changes to the set index.
To do that i would simply define a service and use behavior subjects . My service definition :
my-tab.service.ts
:
@Injectable()
export class MyTabService{
tabSubject : BehaviorSubject<number> = new BehaviorSubject<number>(0);
constructor(){}
setTabSelected(tabIndex : number){
this.tabSubject.next(tabIndex);
}
getTabSelected() {
this.tabSubject.asObservable();
}
}
Now Subscribe to getTabSelected()
in your tabs component and you'll get the tabIndex
in the subscription response .
Considering your tabs component to be my-tab.component.ts
,
@Component({...})
export class MyTabComponent {
selectdIndex : number = 0;
constructor(private _myTabService : MyTabService){}
ngOnInit(){
this.-myTabService.getTabSelected().subscribe((tabIndex : number) =>{
this.selectedIndex = tabIndex;
})
...
}
...
}
Use the selectedIndex in your template :
<mat-tab-group class=" navbar-default panel-piluku nav nav-justified nav-wizard nav-progression" [selectedIndex]='selectedIndex'>
<mat-tab class="outbound_link" role="button" title="Item Info" label="Item Info">
<add-product-information></add-product-information>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Variations" label="Variations">
<add-product-variation></add-product-variation>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Pricing" label="Pricing">
<add-product-pricing></add-product-pricing>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Inventory" label="Inventory">
<add-product-stock></add-product-stock>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Images" label="Images">
<add-product-images></add-product-images>
</mat-tab>
<mat-tab class="outbound_link" role="button" title="Locations" label="Locations">
<add-product-locations></add-product-locations>
</mat-tab>
</mat-tab-group>
For more information on inputs and events in mat tab group refer : Mat Tab
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.