Showcasing JSON information within a dropdown menu

In my project, I am working with two different JSON files named contacts and workers.

  • Currently, I am using *ngFor to display the name of the contacts.
  • In addition, I am also displaying the assigned workers for each contact in a dropdown, as shown below:

https://i.sstatic.net/4LpU0.png

However, my goal is to show the assigned workers for each contact along with the complete list of all workers.

This is the desired outcome:

https://i.sstatic.net/O0lql.png

This way, I will have the ability to modify the assigned workers as needed.

Check out the DEMO

angulartypescriptangular6

Answer №1

Loop through the entire workers list and assign the ID to the workersId field of the contact.

<mat-select formControlName="worker" placeholder="Assign Workers" multiple [(ngModel)]="contact.workersId">
    <mat-option *ngFor="let worker of workers" [value]="worker.id">
        {{worker.name}}
    </mat-option> 
</mat-select>

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

Creating a generic type in TypeScript that represents a union of keys from type T's properties

Is there a way to determine the result type (TTarget) based on TSource and the provided property names (keyof TSource)? I have this function that copies specified properties to a new object: export declare type PropertyNamesOnly<T> = { [K in keyof ...

typescriptgenerics

Having an issue where the Material Angular 6 DatePicker is consistently displaying my selected date as one day earlier

I've encountered a strange issue with the current version of the Material Angular DatePicker. After upgrading from A5 to A6, it started to parse my date one day earlier than expected. You can see an example of this problem here: https://stackblitz.com ...

angulartypescriptdatepickerangular-material

Navigating with Gatsby Link and leveraging TypeScript

I am currently utilizing Gatsby Link with TypeScript and I am looking to pass parameters to a linked component from the source component. The documentation provided by Gatsby states the following: Sometimes you’ll want to pass data from the source pag ...

reactjstypescriptgatsby

How can I effectively organize an Angular2 component library for optimal efficiency?

Looking to develop an Angular2 datepicker component with the intention of releasing it and using it in multiple projects. Wondering about the best way to structure the project for this specific purpose compared to a typical Angular2 project created with an ...

javascriptangular

A unique directive that showcases both default and custom errors sequentially

In my project, I am facing a challenge where I need to compare the input text with a series of inbuilt errors such as required, minlength, maxlength, and pattern. Additionally, I also need to validate the input against a custom condition using a Custom Val ...

angulartypescriptangular6angular2-directivescustomvalidator

When attempting to access Angular routes directly through a browser, they are not discoverable

After creating routes for /home, /contact, and others, I generated the dist folder using ng build --prod --base-href. I then transferred the contents of the dist folder to my hosting server via FileZilla. While navigating the website normally works fine, w ...

angularhostingangular-routing

React experimental is encountering an issue with missing property "" $fragmentRefs"" when relaying fragments

Details Recently, I decided to explore React experimental features with concurrent mode and relay. Even though I have never used relay before, I managed to make progress but ran into some issues. Initially, using the useLazyLoadQuery hook without any frag ...

reactjstypescriptgraphqlrelay

Tips for preventing the need to cast a DOM element to any in Typescript

In my Typescript code, I am retrieving the value of a DOM element like this: document.getElementById('MyElementId') as HTMLElement).value I feel unsure about casting it to HTMLElement. Is there a better way to specify the type and retrieve this ...

typescriptdom

Jasmine: The 'require' function has not been defined

I followed the angular2 quick start project tutorial found at: https://angular.io/guide/quickstart. The only difference is that I included the code var fs = require('js') in app.component.ts, and it worked. But when I attempted to write a Jasmin ...

jasmineangular

Personalized design for Material Tooltip in Angular 17

I am currently working on an angular 17 application that utilizes the latest Material components. My project heavily incorporates the Tooltip component, but I am facing challenges when it comes to customizing it to my preferences. While I did succeed in c ...

angularsassangular-materialtooltipangular-material-theming

Utilizing Sequelize's multiple operators for fetching objects with an exclusion clause: A comprehensive guide

In my NodeJS/Express/Angular7 application with Sequelize 5 and MySQL, I have a table of images connected to a table of keywords through a join table in a bidirectional hasMany relationship. My goal is to retrieve all images that contain keyword IDs within ...

mysqlnode.jsangularexpresssequelize.js

I am looking to conceal the y-axis labels and tooltip within the react chart

I am currently working with react-chart-2. I have a line graph that displays a tooltip when hovered over, but I would like to hide this tooltip feature. Additionally, I want to remove the numbers 0, 0.1, 0.2 up to 1 on the left side (y-axis) of the gra ...

reactjstypescriptreact-chartjs-2

Enhance the background property in createMuiTheme of Material-UI by incorporating additional properties using Typescript

I've been attempting to include a new property within createMuiTheme, but Typescript is not allowing me to do so. I followed the instructions provided here: https://next.material-ui.com/guides/typescript/#customization-of-theme I created a .ts file ...

javascriptreactjstypescriptmaterial-uitypescript-typings

When ts-loader is used to import .json files, the declaration files are outputted into a separate

I've encountered a peculiar issue with my ts-loader. When I import a *.json file from node_modules, the declaration files are being generated in a subfolder within dist/ instead of directly in the dist/ folder as expected. Here is the structure of my ...

jsontypescriptwebpackts-loader

FormArray in Angular2 can be nested inside another FormArray

I have the following code snippet: this.MainForm = this.fb.group({ MainArray: this.fb.array([ { ChildArray1: this.fb.array([]), ChildArray2: this.fb.array([]), } ]), }) Next, in my method, I have the following code: let MainArr ...

angularangular2-templateangular2-forms

Mapping nested JSON to model in Angular2 - handling multiple API requests

Having trouble integrating two HTTP API Responses into my Model in Angular 2. The first API Call returns data like so: [{ "id": 410, "name": "Test customdata test", "layer": [79,94] }, { "id": 411, "name": "Test customdata test2", ...

jsonangulartypescriptmapping

Utilizing Angular for making API requests using double quotes

I am experiencing an issue with my service where the double quotation marks in my API URL are not displayed as they should be. Instead of displaying ".." around my values, it prints out like %22%27 when the API is called. How can I ensure that my ...

javascriptangulartypescript

Connect the Result of a Button Click to a Fresh Span

Just starting out with Angular2 so I'm keeping things simple for now. I understand the importance of separating feature components, but my main focus at the moment is getting everything to function properly. My objective here is to bind the value of ...

angulartypescript2.0

Deploying angular rendered application on a shared server

After developing an Angular 7 app and implementing Angular universal for SEO purposes, it has come to my attention that deploying it on a shared server is not possible due to the requirement of Node.JS to run the script file. My hosting plan restricts the ...

javascriptnode.jsangularangular-universal

Encountering a bug in Typescript where a Prisma relation list field fails when provided with an argument

While attempting to initiate a new project using Prisma Client, I encountered an error when passing it with args, even when using an empty array list such as []. Here is the Prisma model: generator client { provider = "prisma-client-js" } dat ...

typescriptnext.jsprisma