Deactivate the chosen tab by clicking the Mat-Tab button

I was trying to implement a way to disable the selected mat-tab and its elements when a button is clicked,

//HTML

 <mat-tab-group #tabGroup>
      <mat-tab *ngFor="let subject of subjects" [label]="subject.name">
        {{ subject.name }}
            <mat-selection-list>
              <mat-list-option *ngFor="let ans of datas">
                 {{ans}}
              </mat-list-option>
            </mat-selection-list>
      </mat-tab>
    </mat-tab-group>

    <button (click)="buttonClick()"></button>

//typescript

@ViewChild('tabGroup',{static:false}) tabGroup: MatTabGroup;

buttonClick(){
this.tabGroup._tabs[this.tabGroup.selectedIndex].disabled = true;
}

Attempted to use the attribute [disabled] in ,

However, this disabled all tabs instead of just the selected one and did not disable the controls.

Any suggestions on how I can achieve my goal?

angulartypescriptangular-materialmat-tab

Answer №1

When working with this.tabGroup._tabs, it is important to either convert the list into an array or access the _results property inside the Query list.

this.tabGroup._tabs.toArray()[0].disabled = true;

Alternatively,

this.tabGroup._tab['_results'][0].disabled = true;

Check out this example

Answer №2

To make use of the default property mat-tab isActive

<mat-tab-group>
  <mat-tab #tab [disabled]='!tab.isActive' *ngFor="let mytab of tabs" [label]="mytab.name">
    {{ mytab.name }}
  </mat-tab>
</mat-tab-group>

For more information, visit: https://material.angular.io/components/tabs/api

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

Converting Blob to File in Electron: A step-by-step guide

Is there a way to convert a Blob into a File object in ElectronJS? I attempted the following: return new File([blob], fileName, {lastModified: new Date().getTime(), type: blob.type}); However, it appears that ElectronJs handles the File object differently ...

javascripttypescriptfileelectron

The JSON creation response is not meeting the expected criteria

Hello, I'm currently working on generating JSON data and need assistance with the following code snippet: generateArray(array) { var map = {}; for(var i = 0; i < array.length; i++){ var obj = array[i]; var items = obj.items; ...

javascriptangulartypescript

Transforming ActivatedRoute.queryParams into a Promise

Instead of subscribing to route.queryParams as an Observable, I want it to be a Promise so that I can use async/await for function calls in ngOnInit. However, my attempt at this is not working as expected. The code below does not produce any output: constr ...

angularpromiseobservable

Is there a way to trigger a function upon the loading of a template in Angular 2?

I'm a newcomer to angular2 and I need to trigger a function when a template loads or initializes. I have experience with achieving this in angular1.x, but I'm struggling to figure out how to do it in angular-2. Here's how I approached it in ...

javascriptangularjsangular

Exploring the Scope of a Directive within an HTML Element's Event Handler

I devised a custom Directive for utilizing an element as a 'dropzone' with native HTML Drag & Drop functionality. Custom Directive Source Code import { Directive, ElementRef, OnInit, Output, EventEmitter, ViewChild } from '@angular/co ...

angularclosuresangular6

Is there a method in TypeScript to make an enum more dynamic by parameterizing it?

I've defined this enum in our codebase. enum EventDesc { EVENT1 = 'event 1', EVENT2 = 'event 2', EVENT3 = 'event 3' } The backend has EVENT1, EVENT2, EVENT3 as event types. On the UI, we display event 1, event 2, a ...

javascriptreactjstypescriptreact-i18next

Discovering if "back" and "forward" navigation are accessible using Angular's Location service

As I work on my Progressive Web App, I am incorporating back and forward navigation buttons specifically for standalone mode. To make this happen, I have integrated the Location service in my component and added the following code: public onForward() { ...

angularangular-router

ag-grid Server Side pagination function to enable independent setting of last row

Currently, I am utilizing ag-grid, Angular 7, and implementing a server-side datasource with pagination. In my API setup, I initiate two requests: the first request provides the total number of items in the table, while the second fetches the data for the ...

javascriptangularag-grid

Fetching all data from a SQLite database in a Listview using React Native

I have been utilizing the library found at https://github.com/andpor/react-native-sqlite-storage in my react native project. To retrieve a single row from the database, I use the following code: db.transaction((tx) => { tx.executeSql('SEL ...

javascriptreactjstypescriptreact-native

Tips for linking the search button to the corresponding input field in Angular

I'm working on a form that dynamically generates input fields using a for loop. Each input field has a corresponding search button. When a search button is clicked, it triggers a method to execute on all input fields. How can I make sure that the sear ...

htmlangular

"Exploring the power of Angular 16 coupled with Firebase 9 for seamless file

Recently, I've been facing some challenges with my Angular 16 app that uses Firebase 9 and angular/fire 7. Specifically, I've been struggling to implement a simple file upload feature to Firebase storage. Despite spending the last couple of days ...

angulartypescriptfirebaseangularfire2

The specified type '{ songs: any; }' cannot be assigned to the type 'IntrinsicAttributes' in NEXTJS/Typescript

I am currently working on a straightforward script. Below is the index.tsx file for my Next.js application: import type { NextPage } from 'next' import SongsList from '../components/SongsList/SongsList' import { GetStaticProps } from & ...

javascripttypescriptnext.js

What is the process for eliminating moment locales from an Angular build?

When I build my Angular 5 application with the command: ng build --prod --sm I noticed that the main.js file contains a lot of excess space occupied by moment. It seems all the locales are being loaded when I include: import * as moment from 'momen ...

angularangular2-moment

It is not necessary to specify a generic type on a Typescript class

When working with Typescript and default compiler options, there are strict rules in place regarding null values and uninitialized class attributes in constructors. However, with generics, it is possible to define a generic type for a class and create a ne ...

typescriptclassgenerics

Implementing Dual Submit Buttons in Node.js using Express Framework

Struggling with implementing a like and dislike function in my node js app. Currently, I can only do one at a time. Below is the HTML code snippet: <form method="post" name="ratings"> <input type="submit" name="vote" value="like"> < ...

javascriptnode.jsexpresstypescript

The mat-select component in Angular Material is failing to update/refresh when a new value is

Attempting to design an Angular Form for editing a record. When the user navigates to this edit form from the records list page, I aim to populate the fetched record from the API into the form elements while it loads. Utilizing the patchValue method within ...

angularangular-material

Here is a guide on showcasing information obtained from ASP.NET API in Angular version 13

My goal is to fetch motorcycle data from a web API and showcase it in my Angular project. ASP.NET Framework Web API 4.7 Angular CLI: 13.3.7 Angular: 13.3.11 On the Web API end: Controller: [EnableCors(origins: "*", headers: "*", ...

c#angulartypescriptasp.net-web-api

Impact of using ngIf in ngAfterViewInit

During the ngAfterViewInit lifecycle hook, I am triggering an event and capturing it in another component using ComponentRef. Everything functions smoothly until I incorporate ngIf in the parent component. What impact does ngIf have on Angular's life ...

angularvisibilityangular-ng-ifangular-lifecycle-hooks

The Mat-Timepicker is not visible after building in --prod mode

I have implemented mat-timepicker v5.1.5 successfully on my local environment. However, after building the app for production and deploying it on Tomcat server, the timepicker fails to display. No errors are shown during the build --prod command or in the ...

angularnpmproduction

Updating the parameters when clicking on each pagination button: A guide

Does anyone have advice on implementing pagination? I am currently working on loading a datatable with a few records initially. Once the page is loaded, I want to be able to click on pagination buttons like next or any pagination buttons to display a new s ...

javascriptangulartypescriptdatatablesangular-datatables