Tips on reordering Angular material tabs on the fly

I am working with a group of 7 tabs using Angular material:

<mat-tab-group #tabGroup [selectedIndex]="selectedIndex">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
    <mat-tab label="Tab 3">Content 3</mat-tab>
    <mat-tab label="Tab 4">Content 4</mat-tab>
    <mat-tab label="Tab 5">Content 5</mat-tab>
    <mat-tab label="Tab 6">Content 6</mat-tab>
    <mat-tab label="Tab 7">Content 7</mat-tab>
</mat-tab-group>

My goal is to arrange the tabs in a specific order based on certain conditions.

In one scenario, I want tab7, tab5, tab6, tab1, tab2 ,tab3, tab4.

While I understand that the selectedIndex property lets me control the active tab, I am looking for a way to set the order of the tabs upon loading.

Due to extensive data communication between the parent and tabs, I cannot use *ngFor. Is there a solution available without using *ngFor?

Does Angular Material provide a feature that allows for custom tab arrangement like this?

angulartypescripttabsangular-material2

Answer №1

One option is to save all the tabs in an array and then use OnInit to organize the array based on your desired criteria.

Another approach is to do this upon any event like onload.

Then, you can iterate through them by utilizing the *ngFor directive.

Answer №2

It's possible to achieve this functionality, but whether it fits your specific needs is uncertain. The MatTab component includes a position property that could be used for this purpose. However, since it is not an @Input, you would need to utilize @ViewChild in order to access all tabs (or consider using template references in the HTML if feasible). This approach may seem somewhat cumbersome, but it should get the job done. Here is some pseudo-code to illustrate:

<mat-tab-group #tabGroup [selectedIndex]="selectedIndex">
    <mat-tab #tab1 label="Tab 1">Content 1</mat-tab>
    <mat-tab #tab2 label="Tab 2">Content 1</mat-tab>
    ...
</mat-tab-group>

----

@ViewChild('tab1') tab1;
@ViewChild('tab2') tab2;
...

changeTabOrder() {
    this.tab1.position = 2;
    this.tab2.position = 1;
    ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to enable typescript to build in watch mode with eslint integrated?

Can this be achieved without relying on webpack or other bundlers? Alternatively, is the only solution to have two separate consoles - one for building and another for linting? ...

typescripteslinttypescript-eslint

Filtering an array of objects based on a specific condition in TypeScript

I am trying to filter the array object data where the count of Failed is greater than 0. Unfortunately, the code below is not working as expected. ngOnInit() { this.employeeService.getProducts().subscribe((data:any) => { console.log(data); this. ...

angulartypescriptlinq

Angular 5 with Typescript encountered a failure in webpack due to the absence of the property "data" on the Response

I am encountering an issue during webpack compilation. It compiles successfully if I remove .data, but then the page crashes with calls from template->component (which in turn calls a service). Here is the error I am facing: ERROR in src/app/compone ...

javascriptangulartypescriptobservableangular-httpclient

How to eliminate parameters from the URL in Ionic 2 with Angular 2

Basically, in my application, when a user receives an email notification with a hyperlink to open a specific record based on an ID number, the URL looks like this: https://myappserver.com/?aid=12343551 So, after the user opens the record, I'm wonder ...

angularionic-frameworkangular-ui-router

Display a slideshow of images using the text and <img> tags found within a string in an Angular application

Currently, I am developing a blog system in Angular that involves utilizing a text editor component (ngx-text-editor) for inserting images and text. These images and text are then saved to the database. However, I am facing an issue when attempting to disp ...

angularslider

Angular and KeyCloack - Automatically redirect to specific route if user's role does not have access permissions

I am currently working on implementing a mechanism to redirect unauthorized roles when attempting to access restricted routes using the keycloack-angular library: npm install keycloak-angular keycloak-js Custom Guard Implementation export class AuthGuar ...

angularkeycloak

Discovering the generic parameter in the return type using TypeScript

I am struggling with a specific issue export type AppThunk<ReturnType> = ThunkAction< ReturnType, RootState, unknown, Action<string> >; After implementing the above code snippet export const loadCourse = (id: string): AppThunk ...

reactjstypescriptredux

Creating a unique custom view in React Big Calendar with TypeScript

I'm struggling to create a custom view with the React Big Calendar library. Each time I try to incorporate a calendar component like Timegrid into my custom Week component, I run into an error that says react_devtools_backend.js:2560 Warning: React.cr ...

javascriptreactjstypescriptreact-big-calendar

Connecting ADFS to your Angular 2 project

I need to integrate ADFS with an Angular 2 Project. Despite it being an older technology, we specifically require ADFS for this project. After researching, I came across a similar question on Stack Overflow discussing On-Prem ADFS and suggesting the use o ...

angularoauthsamladfsadal

Set every attribute inside a Typescript interface as non-mandatory

I have defined an interface within my software: interface Asset { id: string; internal_id: string; usage: number; } This interface is a component of another interface named Post: interface Post { asset: Asset; } In addition, there is an interfa ...

typescript

The NgRx Effect causing an endless cycle of HTTP requests

I am currently experiencing the following effect: initCompaniesAndSetCompanyEffect$: Observable<Action> = createEffect( (): Observable<Action> => this.actions$.pipe( ofType<changeCompanyActions.InitCompaniesAction>( ...

angulartypescriptngrx-effects

Navigate directly to the dashboard page in Angular 5 using RxJS without needing to load the main page first

Utilizing Firebase as the API in my application for authentication, database management, and storage. Implemented a main page (localhost:4200) that loads when the user is not logged in, and a dashboard (localhost:4200/dashboard) for authenticated users. ...

angularhttp-redirectroutesrxjsobservable

Unable to transfer object from Angular service to controller

I am currently utilizing a service to make a $http.get request for my object and then transfer it to my controller. Although the custom service (getService) successfully retrieves the data object and saves it in the responseObj.Announcement variable when ...

javascriptangularjstypescript

What is the necessity of Node Js for Angular and how does Angular Cli play a pivotal role?

As a newcomer to the world of Angular technology, I stumbled upon this intriguing query. What is the role of Node.js in Angular? After all, isn't Node.js primarily a backend technology? ...

node.jsangular

Errors in Visual Studio regarding typescript are often not found by tsc and eslint, causing frustration for developers

Today, after restarting my computer and launching visual studio code, I encountered an unfamiliar error that I've never seen before: https://i.sstatic.net/z1vw5.png I haven't made any changes to my project's code (confirmed by running git ...

typescriptvisual-studio-codeeslint

Encountering an issue while attempting to make an in-app purchase with Ionic 3 and Cordova - receiving the error message "Sorry, the item you are trying to

In the process of developing my app with IONIC 3 and Angular 4, I have integrated the following Ionic plugin for in-app purchases: https://ionicframework.com/docs/native/in-app-purchase/ Once the plugin was installed, I included the "play_store_key" in t ...

angularcordovaionic-frameworkin-app-purchase

Angular2: Utilizing multiple slots for transcluded content and passing them to child components as parameters

My current setup includes an article component prefixed with b-... <b-article> Inside this component, I am using custom elements: b-title b-photo b-summary Here is an example of how I am using these elements: <b-article-item> <b-ti ...

angularangularjs-ng-transclude

The module 'pouchdb' appears to be missing, functioning correctly on Mac but encountering issues on Windows

I have taken over a project built with Ionic that was originally developed on a Mac by my colleague. I am now trying to run the project on my clean Windows 10 PC with Ionic, Cordova, and Python installed. However, I am encountering an error that my colleag ...

javascriptangularionic-frameworkionic3

Safari experiencing issues with video player controls not functioning properly

Within my application, there is a div element that contains a video. Clicking on the div triggers an event that navigates to another page. Expectation I expect to be able to play the video and use its controls without triggering the navigation event. Ac ...

angularsafarihtml5-video

What are some ways to incorporate advanced/nested type variables when using arrow functions?

Is there a way to use "advanced/nested" type variables, similar to how T is utilized in this function declaration, when working with arrow functions? function wrapInObject<T>(key: string) { return (x: T) => ({ [key]: x }); } I attempted to ach ...

typescript