Custom Angular component experiencing issues with displaying pre-selected options

Question

Custom Angular component experiencing issues with displaying pre-selected options

I'm currently working on a component with a multi-select dropdown feature. The goal is to be able to provide a list of objects (specifically ICatagory in my case) for the options when creating an instance of this component. Additionally, I want to pass another list of the same object type as preselected values.

As of now, I am successful in passing the list of objects and displaying them as options. I am also able to provide the preselected values. However, despite passing the preSelected values, they are not showing up as selected by default.

You can view the StackBlitz example here

This StackBlitz demo was created to provide clarity. Please note that upon loading, no items are selected. My intention is for the preselected values to automatically appear as selected upon creation.

I admit that I am still learning Angular, so there may be unconventional patterns present. Your understanding is appreciated.

angular typescript angular-material angular7 angular2-forms

Answer 1

Answer №1

I managed to resolve the issue with some investigation.

There is a feature called [compareWith] that you can use in your code.

Link to Stack Blitz for solution

You need to make changes in the following files:

 [compareWith]="byId"

Add the above code snippet into mat-select in my-drop-down.html file.

Also, add the following function into my-drop-down.ts file:

byId(obj1,obj2){
 if(obj1 != undefined && obj2 != undefined){
    return obj1.id === obj2.id;
  }
}

Implementing this allowed me to preSelect the options as objects.

If anyone has a better solution, I'm all ears.

Answer 2

I managed to resolve the issue with some investigation.

There is a feature called [compareWith] that you can use in your code.

Link to Stack Blitz for solution

You need to make changes in the following files:

 [compareWith]="byId"

Add the above code snippet into mat-select in my-drop-down.html file.

Also, add the following function into my-drop-down.ts file:

byId(obj1,obj2){
 if(obj1 != undefined && obj2 != undefined){
    return obj1.id === obj2.id;
  }
}

Implementing this allowed me to preSelect the options as objects.

If anyone has a better solution, I'm all ears.

Custom Angular component experiencing issues with displaying pre-selected options

Answer №1

Similar questions

Loading SVG templates dynamically in Angular can be done by utilizing a string

Clicking on a row in ng2-smart-table should result in the row being

Modify the empty message for the PrimeNG multiselect component

What specific element is being targeted when a directive injects a ViewContainerRef?

There seems to be a problem fetching the WordPress menus in TypeScript with React and Next

The cdkDropListSortingDisabled attribute is not recognized as a valid property for the cdkDropList directive in Angular Material

Struggling with TypeScript errors when using Vue in combination with Parcel?

What is the best way to identify the active configuration in Angular 16?

Angular 2 does not include Bootstrap CSS by default

Mastering the proper implementation of OneToMany and ManyToOne relationships in MongoDB involves understanding and utilizing the

What is the process for setting up SSL for Angular e2e testing?

Facing issues with updating a dynamic input form array in Angular

I can't figure out why I'm getting the error message "Uncaught ReferenceError: process is not defined

A comprehensive guide on utilizing the loading.tsx file in Next JS

The module "node_modules/puppeteer/lib/types" does not contain the export "Cookie"

Extract the values from HTTP GET request by Id (Observable) and assign them to variables within the component

Issues with updating in Firebase real-time database using Angular 2 are not

Converting JSON response from REST into a string format in Angular

Sending authentication token via Angular

Performing a `npm install` within a subfolder of a Git repository