Is it possible to showcase a variety of values in mat-select?

Is it possible to pass different values to the .ts file in each function? For example, can I emit a String with 

(selectionChange)="onChangeLogr($event)"
and an object with 
(onSelectionChange)="onChangeLogr_($event)"
? How would I go about doing this?

<mat-form-field fxLayout="column" fxFlex="100%" fxFlex.xs="100%">
    <mat-select matInput id="txtAdress"
      [placeholder]="'Select' | translate: moduleName"
      [(ngModel)]="codAdress"
      (selectionChange)="onChangeLogr($event)" 
      (onSelectionChange)="onChangeLogr_($event)">
        <mat-option *ngFor="let logr of listLogr" [value]="logr.cod">
          {{ getLogr(logr) }}
        </mat-option>
    </mat-select>
</mat-form-field>
angulartypescript

Answer №1

Consider creating a custom component that wraps the <mat-select> element using two EventEmitters.

Answer №2

Solved by placing the second function within <mat-option> tags, as shown below:

<mat-form-field fxLayout="column" fxFlex="100%" fxFlex.xs="100%">
        <mat-select matInput id="txtAdress"
          [placeholder]="'Select' | translate: moduleName"
          [(ngModel)]="codAdress"
          (selectionChange)="onChangeLogr($event)">
          <mat-option *ngFor="let logr of listLogr" [value]="logr.cod" (click)="onChangeLogr_(logr)">
            {{ getLogr(logr) }}
          </mat-option>
        </mat-select>
      </mat-form-field>

Additionally, in the TS file, receive onChangeLogr($event) and onChangeLogr_(logr: ILogr). The click event will trigger even if an already selected option is selected again. The events (change) or (selectionChange) will not be triggered in such a case.

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

Exploring the visitor design pattern with numerical enumerated types

I am exploring the use of the visitor pattern to ensure comprehensive handling when adding a new enum value. Here is an example of an enum: export enum ActionItemTypeEnum { AccountManager = 0, Affiliate = 4, } Currently, I have implemented the fol ...

angulartypescript

Category of ambiguous attributes

I am currently working on developing a class that will store values for rows and columns, with each row/column identified by a string. I have provided some code below as an example: class TMatrix<TYPE>{ [idRow: string]: { [idCol: string]: TYPE ...

typescriptdynamicproperties

Issue with Angular filtering when utilizing pipe and mapping the response

Code snippet from shop.service.ts getProducts(brandId?: number, typeId?: number) { let params = new HttpParams(); if (brandId){ params = params.append('brandId', brandId.toString()); } if (typeId){ params = params.append('typeId', ...

asp.netangulartypescript

Managing Prisma error handling in Express

Dealing with error handling using ExpressJS and Prisma has been a challenge for me. Anytime a Prisma Exception occurs, it causes my entire Node application to crash, requiring a restart. Despite looking at the Prisma Docs and doing some research online, I ...

node.jstypescriptexpressbackendprisma

What is the best way to configure Angular viewProviders when using an NgForm in a unit test?

One of the challenges I faced was with an Angular 16 component that required the form it will be placed inside as input. The solution came from using the viewProviders property, which I discovered through a helpful response to a question I had asked previo ...

angularangular-componentsangular-testangular-providers

Narrowing Down State Types

I am working on a functional component in NextJS with props passed from SSR. The component has a state inside it structured like this: const MyComponent = ({err, n}: {err?: ErrorType, n?: N})=>{ const [x, setX] = useState(n || null) ... if(e ...

reactjstypescriptnext.js

The sum is being treated as a concatenation instead of an addition in this case

Why is the somma value showing the concatenation of totaleEnergetico and totaleStrutturale instead of a sum? RiepilogoCombinatoStComponent.ts export class RiepilogoCombinatoStComponent implements OnInit { constructor() { } interventi: AssociazioneI ...

javascriptarraysangulartypescriptsum

Unable to retrieve the third attribute of a Class using Angular2's toString method

Here is the code snippet I am working with: import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Hello {{name}}</h1> <p><strong>Email:</strong> {{email}}< ...

javascriptangulartypescript

What causes a delay in HTTP calls in Chrome when it is in the "Stalled" or "Initial Connection" state? Is it possible for these states to generate multiple threads for the same request?

My application uses Angular on the client side and Java (Spring Boot) on the backend. Occasionally, during some network calls, the waterfall chart gets stuck in either the "Stalled" or "Initial Connection" state. When this happens, I have noticed in my log ...

angularspring-bootgoogle-chromesslconnection

Preserve component state in Angular 4 by saving it when navigating to a different component

Currently, I am faced with a challenge while developing an application using Angular. In one component, users can input data into three selectboxes and then initiate a search to find matching results. Upon clicking on a match, they are taken to another com ...

angular

Unidentified Angular NgRX action

After building my Angular application using NgRX, I integrated actions, reducers, services, and effects. However, when trying to access the action in the component code, I encountered the following error: Error: Property 'GetEmployees' does no ...

angularngrxngrx-storengrx-effects

Develop an "Import Interface" using TypeScript

I have a large project with many files and I believe using an import object would be beneficial. For instance, consider having menu.ts at the top level that every program will refer to: import router from "./router/index"; import controllers from ...

jsontypescript

What is the best way to enable `child_process.execFile` to utilize an existing running application?

I am currently developing an Electron app that is designed to launch another application, such as Photoshop, using child_process.execFile. However, I have encountered an issue where if Photoshop is already running when child_process.execFile is called, a n ...

node.jsangularelectron

How can the panel within an accordion be enlarged or minimized?

Currently, I am implementing an accordion feature with the option to expand or collapse all panels using two buttons. My goal is to allow users to manage each panel within the accordion individually. However, I have encountered an issue that needs attenti ...

angulartypescriptprimeng

Transfer methods utilizing the `this` keyword from a component to a common service

In the development process, I am currently working on breaking down a large component that retrieves data from a selected record and loads it into a FormGroup using FormBuilder. My goal is to divide this component into reusable services and child componen ...

angulartypescriptangular-services

Tailored production method based on specific criteria

One of my challenges is to create a versatile factory method using typescript. The main objective is to initialize a class based on its name using generics, instead of employing if/else or switch statements. I am aiming for similar functionality as this ...

typescript

Validating React components with TypeScript using an array structure where the field name serves as the key

Trying to implement form validation with React. I have a main Controller that contains the model and manages the validation process. The model is passed down to child controllers along with the validation errors. I am looking for a way to create an array ...

reactjstypescript

I'm working on an Angular2 project and I'm looking for a way to concatenate all my JavaScript files that were created from TypeScript in Gulp and then include them in my index

How can I concatenate all JavaScript files generated from typescript in my Angular2 project with Gulp, and then add them to my index.html file? I am using Angular2, typescript, and gulp, but currently, I am not concatenating the javascript files it genera ...

javascripttypescriptgulpangular

Issue with noUnusedLocals flag detection within function* block

Compiler options: "noUnusedLocals": true, "noUnusedParameters": true, are not functioning properly within functions. An error is encountered in the following example: export class AllReduxSagas { [ts] Property 'someService' is declared bu ...

angulartypescriptvisual-studio-coderedux-saga

What is the method for generating a data type from an array of strings using TypeScript?

Is there a more efficient way to create a TypeScript type based on an array of strings without duplicating values in an Enum declaration? I am using version 2.6.2 and have a long array of colors that I want to convert into a type. Here is what I envision: ...

typescripttypescript2.0