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

Sending data to Dialog Component

While working on implementing the dialog component of material2, I encountered a particular issue: I am aiming to create a versatile dialog for all confirmation messages, allowing developers to input text based on business requirements. However, according ...

angulartypescriptangular2-material

Encountering errors while setting up routes with Browser Router

When setting up a BrowserRouter in index.tsx, the following code is used: import './index.css'; import {Route, Router} from '@mui/icons-material'; import {createTheme, ThemeProvider} from '@mui/material'; import App from &ap ...

reactjstypescriptreact-routerreact-router-dom

Steps to filter types by a singular property assessment

export type HalfSpin = { halfspin: string } export type FullSpin = { fullspin: string } export type SpinType = | HalfSpin | FullSpin export function isHalfSpin(_: SpinType) ...

typescript

The function's overloading is not compatible with its implementation

Currently, I am puzzled by the lack of functionality in some code that I am reviewing. The structure resembles this: function getValidity(x: "v1"): boolean; function getValidity(x: "v2"): { a: number; b: number }; function getValidity(x: any) { if (x == ...

typescript

How to Lazy Load a Standalone Component with Parameters in Angular 17?

This is my HTML code snippet: <a class="dropdown-item" [routerLink]="['/videos', p.param]">{{ p.title }}</a> Below is the code in app.route.ts file: { path: 'videos/:folder', loadComponent: () =& ...

angularangular-routerlinkangular-standalone-components

Utilizing ngModel with an uninitialized object

What is the most effective way to populate an empty instance of a class with values? For example, I have a User Class and need to create a new user. In my component, I initialize an empty User Object "user: User;". The constructor sets some properties, w ...

angulartypescript

Is there a function return type that corresponds to the parameter types when the spread operator is used?

Is it possible to specify a return type for the Mixin() function below that would result in an intersection type based on the parameter types? function Mixin(...classRefs: any[]) { return merge(class {}, ...classRefs); } function merge(derived: any, ... ...

typescripttypescript-typingstypescript-generics

Encountered a style group error 'non-collision' while using Angular with HERE Maps JS API 3.1

Occasionally, I encounter an error when trying to load a HERE map with the satellite base layer: Tangram [error]: Error for style group 'non-collision' for tile 13/16/15542/12554/15 Cannot read property 'retain' of undefined: TypeE ...

angulartypescripthere-apitangram

When using npm to install Angular Bootstrap, the versions that are installed do not always match the specific versions

Displayed below is the content of my package.json file. { "name": "MyProject", "private": true, "version": "0.0.0", "scripts": { "test": "karma start ClientApp/test/karma.conf.js" }, "devDependencies": { "@angular/animations": "5.0.2", "@angular/common": ...

angulartwitter-bootstrapnpmpackage.jsonangular-bootstrap

Increase the current version number by adding the release candidate label and making it a prerelease using npm version command

Our team is in the process of streamlining our versioning and build processes for our Angular 2 applications through automation. We are interested in leveraging npm version However, we have encountered difficulty when attempting to add an 'rc' ...

angularnpmpackage.json

The requested path /releases/add cannot be located

In my CRUD application, I have a feature that allows users to create releases by adding a version and description. This is achieved through a button and input fields for the details. <button (click)="addRelease(version.value, description.value)" [d ...

javascriptnode.jsangularmongodbexpress

Even though there is data stored in the array, the React Native array.length appears to be returning a value

I am struggling with what appears to be a simple issue, and it's frustrating that I've had to seek help for this. The problem lies in iterating through an array messages: Message[] = [...]. No matter what method of iteration I try, it doesn&apos ...

arraystypescriptreact-nativeobjectiteration

How can you modify the height of the header field in Grid?

I have a single grid-tile: <md-grid-tile class="header"> <md-card class="content"> <md-card-header> <md-card-title>Monday</md-card-title> <md-card-subtitle>29.03.17</md-card-subtitle> ...

angular

What's the best way to implement satisfies with a generic type?

In my development process, I am working with components that have default values combined with props. To streamline this process, I created a single function for all components: export function getAssignProps <T extends {}>(propsMass:T[]){ return ...

reactjstypescripttypescript-typingstypescript-generics

Exploring the world of TypeScript interfaces and their uses with dynamic keys

I am hopeful that this can be achieved. The requirement is quite simple - I have 2 different types. type Numbers: Number[]; type Name: string; Let's assume they are representing data retrieved from somewhere: // the first provider sends data in th ...

typescriptoopinterface

Error: unable to locate module that was imported from

Every time I try to run the project using this command, an error pops up: > npm run build npm info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a9b7aa87fee9f1e9f0">[email protected]</a> npm info using ...

typescript

Bringing Typescript functions into the current module's scope

Is it possible to import and reference a module (a collection of functions) in typescript without the need for the Module. prefix? For instance: import * as Operations from './Operations'; Can I access Operations.example() simply as example()? ...

javascripttypescriptmodule

I'm having trouble retrieving my variable within the socketcluster's socket.on function

How can I store the value of msg in the variable sample when sample is not accessible inside the callback function? import { Injectable } from '@angular/core'; import * as socketCluster from 'socketcluster-client'; @Injectable({ pro ...

javascriptangulartypescriptsocketcluster

Interactive form control for location details including country, state, district, and town

I am struggling with adding dynamic form controls on dropdown change. I have been able to add them, but encountered an error preventing me from retrieving the value in 'formName.value'. The specific error message states: "Error: There is no Form ...

javascriptangulartypescript

The hook from Supabase is facing issues with proper importing

This project is a Spotify clone. The issue I'm facing is related to importing the hook. The error message reads: React Hook "useSupabaseClient" is called in function "useloadArtistImage" that is neither a React function component nor a custom React H ...

reactjstypescriptnext.jssupabase