Tips on how to retrieve the name of the currently selected mat expansion panel using Typescript

Utilizing mat-expansion panel, I have successfully bound the panel title dynamically. Whenever a user clicks on a mat-list item, I need to retrieve the corresponding panel name and display it in another div. Can someone assist me in capturing the active/selected mat-expansion-panel name in TypeScript?

<mat-accordion>
    <mat-expansion-panel *ngFor="let templateList of LeftpaneTableDetails first as isFirst" [expanded]="isFirst">
        <mat-expansion-panel-header>
            <mat-panel-title>
                {{templateList.strTemplateName}}
            </mat-panel-title>
            <mat-panel-description>
            </mat-panel-description>
        </mat-expansion-panel-header>
        <mat-list>
            <mat-list-item class="cursor-pointer table-name-list" *ngFor="let table of templateList.tableList" [attr.data-message-tableId]="table.intTableId" (click)="populateTableDetails($event, table.intTableId, table.strTableLabelName, templateList.strTemplateName)">{{table.strTableLabelName}}</mat-list-item>
        </mat-list>
    </mat-expansion-panel>
</mat-accordion>
typescriptangular-materialangular7

Answer №1

To grab a reference to the MatAccordion directive in your component.ts file, utilize @ViewChild. Then extract the expanded MatExpansionPanelHeader by following the example below.

@ViewChild(MatAccordion) accordion: MatAccordion; 

...

getExpandedPanelHeader(): MatExpansionPanelHeader {
    return this.accordion._headers.find(h => h._isExpanded());
}

MODIFY

If you simply want to showcase the name (title) of the expanded mat-expansion-panel within a div, you can implement an afterExpand event handler. Whenever a mat-expansion-panel expands, you can save its title in the component class (e.g., in selectedTitle) and then display that value inside your div.

Check out this StackBlitz for more details.

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

specifying a specific type in a declaration

In this scenario, my goal is to distinguish between different types when declaring a new type: type Schedule = { flag_active : boolean, } type Channel = { flag_archived : boolean } type CreateChangeLog = { from : null, to : Schedule | Channel } ty ...

typescript

Tips for pulling out specific keys from a typed object using an index signature

TL;DR Query: How do I create a type converter in TypeScript that extracts the defined keys from objects typed with index signatures? I am looking to develop a type "converter" in TypeScript that takes a type A as input and outputs a new type B with keys ...

typescripttype-conversionindex-signature

Finding out when the entire subscription loop has ended in an Angular 2+ application can be accomplished through various detection techniques

Currently, I am utilizing Angular 13 with TypeScript. Within my Service class, there is a method that carries out a get request to a REST API: getProduct(productId): Observable<Product> { const productUrl = `http://localhost/api/products/${produc ...

angulartypescriptasynchronoussubscribe

RxJS - Only emit if another source does not emit within a specified time frame

Imagine having two observables. Whenever the first one emits, there should be a 2-second pause to check if the other observable emits something within that timeframe. If it does, then no emission should occur. However, if it doesn't emit anything, the ...

javascripttypescriptrxjs

Is there a way to trigger a request to the backend when the user closes or refreshes the browser?

My Objective: I am working on a lobby feature that updates automatically when a player leaves. Using backend requests and sockets, the lobby is updated to display the current list of players after someone exits. The Challenge: I am faced with the issue ...

angulartypescriptweb-applicationsonbeforeunloadondestroy

What is the process for modifying object information using string input in typescript?

How can I update an object's value in TypeScript based on a string input related to the object key? const objData = { // random value A: 11, B: 13, C: 53, innerObj: { AStatus: true, BStatus: false, CStatus: true, }, }; type Item ...

typescripttypescript-genericsprisma

Is it possible for Angular's `HttpClient` to use complex property types in the `.get()` generics aside from just `string` or `number`?

After spending an entire day researching the topic, I've hit a dead end. All my efforts have only led me to discover one thing—omission. None of the information I've come across mentions whether you can utilize non-simple types (such as string ...

angularreactjstypescripthttpclient

Understanding the Purpose of the Pipe Function in Angular 2 and Typescript Observables

Recently, I encountered a situation where I needed to accept an Observer parameter in a function written in Typescript. I struggled to find a solution, reminding me of working with a delegate parameter in C#. The specific scenario involved adding a bookend ...

angulartypescriptangular2-observables

Tips for integrating Appbar and BottomNavigation in React Native Paper

The BottomNavigation is a great choice for mobile navigation, but for the web version, I have a different preference inspired by Instagram: https://i.sstatic.net/9XTlb.png Navbar.tsx: import React from 'react' import {Appbar, BottomNavigation} ...

typescriptreact-nativereact-native-paper

Ensuring that all environmental variables are properly set in Typescript by utilizing interfaces and resolving union to tuple type discrepancies

In order to create a required application env variables file named env.d.ts, I want to ensure that any modifications or additions to it will trigger TypeScript errors and runtime errors for the checkEnv function if a value is not set. To achieve this, I h ...

typescript

Steer clear of utilizing the "any" type in your Express.js application built with

I have a node/express/typescript method that looks like this: // eslint-disable-next-line export const errorConverter = (err: any, req: any, res: any, next: any) => { let error = err if (!(error instanceof ApiError)) { const statusCode = e ...

node.jstypescriptexpress

Obtain access to the interface from the base class

I am looking for a way to define an interface in a child class that can be accessed by a method in the parent abstract class. For instance, consider the following code snippet: export default abstract class MyClass { protected foo(arg: this.myInterfac ...

typescript

What is the process of bringing in a Svelte component into a Typescript file?

Can a Svelte component be imported into a Typescript file and successfully compiled by Rollup? While the following code works fine as a Javascript file, it encounters errors when converted to Typescript, as the TS compiler struggles with a .svelte file: i ...

typescriptsvelterollup

Using TypeScript TSX with type parameters

Is it possible to define type parameters in TypeScript TSX syntax? For instance, if I have a class Table<T>, can I use something like <Table<Person> data={...} /> ...

typescript

The specified React element type is not valid

Currently working on a web application using Typescript, Electron, Webpack, and NodeJS, but encountering issues with the import/export functionality. The error message that I am facing reads: "Warning: React.createElement: type is invalid -- expect ...

reactjstypescriptwebpackelectron

Modifying the color of the chosen item - ion-select

Can anyone help me with changing the color of the selected item on ion-select? I've tried several solutions without success. Any suggestions? Documentation: https://ionicframework.com/docs/api/select I attempted to use the color property, but it did ...

htmlcssangulartypescriptionic-framework

What is the best way to simulate a static variable in JavaScript unit testing?

After running the karma coverage test, I achieved a coverage of 99.3%. To reach 100%, I require assistance in testing the else part of the function below: createCurrencyUnits(): void { var keys = Object.keys(ObjectsDomainConstants.CURRENCY_UNITS); for (va ...

javascripttypescriptjunitkarma-jasmineweb-frontend

Angular template driven forms fail to bind to model data

In an attempt to connect the model in angular template-driven forms, I have created a model class and utilized it to fill the input field. HTML: <div class="form-group col-md-2 col-12" [class.text-danger]="nameCode.invalid && nameCode.touched ...

javascriptangulartypescript

Using TypeScript with React and Material-UI: Issue with undefined theme in createStyles()

Currently, I am delving into React with TypeScript and utilizing the Material UI framework for the frontend. In my quest to activate media queries, an error has crossed my path: Uncaught TypeError: Cannot read property 'up' of undefined ...

reactjstypescriptmaterial-ui

Controlling the Output in Typescript without Restricting the Input

I am interested in passing a function as a parameter, allowing the function to have any number of parameters but restricting the return type to boolean. For example, a function Car(driver: Function) could be defined where driver can be ()=>boolean or ( ...

javascriptreactjstypescript