<option *ngFor="let type of UserTypes; let i = index" [ngValue]="type.id">
<span>{{type.name}}</span>
</option>
I am looking for a solution to eliminate repeated data in the dropdown options.
<option *ngFor="let type of UserTypes; let i = index" [ngValue]="type.id">
<span>{{type.name}}</span>
</option>
I am looking for a solution to eliminate repeated data in the dropdown options.
In order to efficiently iterate through the original list (referred to as UserTypes), it is necessary to filter out any duplicates beforehand. The initial step involves identifying a method to eliminate duplicate entries from this array.
An essential decision in this process is determining what qualifies as a duplicate, specifically which key within the object should be assessed for uniqueness. For the context of this illustration, let's assume that the object contains a property named name that must be distinctive. Consequently, the subsequent logic will eliminate any object featuring a name value that has already appeared earlier in the list. Various solutions for accomplishing this task can be found in other responses on Stack Overflow.
Below is the function extracted from the answer:
utils.ts
function getUniqueListBy(arr, key) {
return [...new Map(arr.map(item => [item[key], item])).values()]
}
There are two primary approaches to achieving this:
.ts file, store it in a new variable (e.g., filteredUserTypes), and subsequently utilize it as the target for your *ngFor loopcomponent.ts
ngOnInit() {
// If fetching data asynchronously/from an API, place this code inside your .subscribe() block instead of ngOnInit()
this.filteredUserTypes = getUniqueListBy(this.UserTypes, 'name')
}
component.html
<option *ngFor="let type of filteredUserTypes" [ngValue]="type.id">
<span>{{type.name}}</span>
</option>
FilterPipe)pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe<T extends {}> implements PipeTransform {
transform(items: T[], key: keyof T): T[] {
return items.length ? getUniqueListBy(items, key) : []
}
}
component.html
<option *ngFor="let type of UserTypes | filter : 'name'" [ngValue]="type.id">
<span>{{type.name}}</span>
</option>
I am currently working with two arrays of JSON objects in Angular. Both dictionaries have a key-value pair called "song_id" in common. My goal is to combine the "rating" key-value from the second array into the first array where the song_id matches. Array ...
Currently, I am working with a string type literal that looks like this: type MyType = 'str1' | 'str2' | 'str3'. I need one of my props to only accept this specific type, but I'm struggling to specify this in PropTypes. ...
I am facing an issue with loading external CSS files and need some help to fix the path. Despite multiple attempts, I have been unsuccessful so far. Below is my category structure: https://i.stack.imgur.com/sLTcN.png Within the header.ejs file, this is h ...
I am attempting to validate a CMS signature generated with open ssl using the following command: $ openssl cms -sign -signer domain.pem -inkey domain.key -binary -in README.md -outform der -out signature Below is my code utilizing pkijs: import * as pkij ...
One of the functions in my code has a generic type argument. In certain cases, when the context is void, I need to input 0 arguments; otherwise, I need to input 1 argument. If I define the function argument as context: Context | void, I can still add voi ...
One of the features of my application is the ability to swap themes at runtime. The primary component in my app is called BaseComponent, which is added to my AppComponent and includes a theme property. This theme property represents a class that is applie ...
Utilizing normal bootstrap 3 within an Angular 4 application has been working well when compiling for development using ng serve. However, upon building the application with ng build, I encounter an issue where my bootstrap.js fails to load. Below are th ...
I seem to be having trouble identifying an issue or perhaps I am misunderstanding something (I am using daisyui + nx + tailwind css + angular). To simplify my problem, let's consider the following scenarios: In the first scenario, I have: <div cl ...
I discovered this question while using the following guide: https://basarat.gitbooks.io/typescript/content/docs/types/type-compatibility.html#types-of-arguments. Here is an example snippet of code: /** Type Heirarchy */ interface Point2D { x: number; y: ...
import * as express from 'express'; import * as session from 'express-session'; import * as bodyParser from 'body-parser'; const app: express.Express = express(); app.use(bodyParser.json()); app.use(session({ secret: &apos ...
Is there a better way to checkout a project that had node_modules in .gitignore? I have 2 computers and currently follow the following steps: Commit the project from computer 1 to GitHub Create a new angular project with the same name and folder structur ...
-- This is not a duplicate as the other questions are outdated. It is also different from the previous question! this.elm.nativeElement.ownerDocument.activeElement Furthermore, document.activeElement Returns the entire body element instead of just the ...
I've encountered some challenges with configuring TypeScript in my project. Initially, I developed my application using plain JavaScript. However, eager to learn TypeScript, I decided to convert my JavaScript project into a TypeScript one. To achiev ...
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() { ...
We're embarking on a new web project using Angular7 and need to select the right web-based reporting tools for creating system reports within the application, possibly allowing users to design their report templates on-the-fly. Despite extensive onlin ...
Currently, I am working on unit testing the code snippet below: ngOnInit() { this.router.events.subscribe((val) => { if (val instanceof ActivationEnd && val.snapshot) { this.selectedLanguageCode = val.snapshot.queryParams ...
After reviewing the following StackOverflow resources: Web Bluetooth & Chrome Extension: User cancelled the requestDevice() chooser Electron Web Bluetooth API requestDevice() Error Can you manipulate web bluetooth chooser that shows after calling requestD ...
Is it feasible to determine the number of text lines in a div without line breaks? I am looking to dynamically display or hide my CTA link based on whether the text is less than or equal to the -webkit-line-clamp value: SCRIPT: const isExpanded = ref(true ...
Currently, I am working with Angular and have set up 1 component, 1 class, and 1 service in my project. The service is defined as an @Injectable class and properly configured in app.module.ts. @Injectable() export class MyService { My class receives the ...
There was an issue with rendering the form due to a TypeError: Cannot read properties of undefined (reading '0'). This error occurred at line 190 in the code for form1.vue. The error is also caught as a promise rejection. Error Occurred <inpu ...