Is it possible to make a dropdown from material UI dynamic? | Angular Community | Page 1

autumn vault Sep 21, 2022, 2:29 PM

#

Is it possible to make a dropdown from material UI dynamic and get the list inside in dropdown from a database?

slow maple Sep 21, 2022, 2:52 PM

#

https://material.angular.io/components/select/examples if you look at their example they used an array with *ngFor to fill the Select dropdown with options

Angular Material

UI component infrastructure and Material Design components for Angular web applications.

autumn vault Sep 21, 2022, 2:53 PM

#

can i get a list from a database and display it in my dropdown?

slow maple Sep 21, 2022, 3:00 PM

#

Yes, but first you need to get the data from your database to Angular (Angular is a frontend framework)

#

https://angular.io/tutorial/toh-pt6

autumn vault Sep 21, 2022, 3:10 PM

#

yes i know, what part of the examples i should use?

#

i was asking if its possible because while using material ui i cannot a good examples how to display the data to my dropdown

slow maple Sep 21, 2022, 4:26 PM

#

I created this example for you I hope it helps

#

https://stackblitz.com/edit/angular-ivy-4xc6ya?file=src/app/app.component.html

Angular Ivy (forked) - StackBlitz

A angular-cli project based on @angular/animations, @angular/compiler, @angular/core, @angular/common, @angular/platform-browser-dynamic, @angular/forms, @angular/platform-browser, rxjs, tslib, zone.js and @angular/router.

#

So I got the data from the server side as JSON file I parse it into an array and I displayed the array on Select dropdown

slow maple Sep 21, 2022, 4:51 PM

#

@autumn vault

autumn vault Sep 21, 2022, 4:55 PM

#

oh that's nice, can we have it like filter as I type a name? like if I typed assunta only assunta will show in the dropdown

#

I am new this so i need a bit help

#

but it maked sense now

#

@slow maple

slow maple Sep 21, 2022, 5:05 PM

#

for this I think you should use this https://material.angular.io/components/autocomplete/examples

Angular Material

UI component infrastructure and Material Design components for Angular web applications.

autumn vault Sep 21, 2022, 5:28 PM

#

what i need can be done with the example you made right?

#

do i just replace the dropdown with that right?

#

can you do it in that stackblitz app?

slow maple Sep 21, 2022, 5:36 PM

#

I think you would be able to do it yourself. Just try to play with it and search.

autumn vault Sep 21, 2022, 5:37 PM

#

oh okay thankyou!

autumn vault Sep 22, 2022, 4:29 AM

#

hello @slow maple i had some errors while making this

#

i really need this today

#

can you please help me

#

i tried to make it on my local machine

#

but no luck 😦

#

i just can't understand how to inject the data from the server to my autocomplete dropdown search 😦

#

pleasee bro 😦

slow maple Sep 22, 2022, 4:40 AM

#

what are the errors?

autumn vault Sep 22, 2022, 4:42 AM

#

They can't bit to the input and mat autocomplete does't show up instead it show's error

#

what i did it

#

is

#

i copy the autocomplete and copied the ngfor statement and the values

slow maple Sep 22, 2022, 4:43 AM

#

please show the error.

autumn vault Sep 22, 2022, 4:43 AM

#

and the user.firstname to userlast name

#

sure ill replicate it on stackblitz

#

there its on stackblitz

#

its on the one you sent

#

i need to also have a dropdown search thing just like you example but i can type

#

https://stackblitz.com/edit/angular-ivy-sk1rn9?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fusers.service.ts

Angular Ivy (forked) - StackBlitz

A angular-cli project based on @angular/animations, @angular/compiler, @angular/core, @angular/common, @angular/platform-browser-dynamic, @angular/forms, @angular/platform-browser, rxjs, tslib, zone.js and @angular/router.

#

@slow maple

#

let me check it might be the imports but you can chech

#

check

#

naw

#

it doest work

#

@slow maple

#

@slow maple i dont know how to add the input it has an error on the formcontrol and matautocomplete

#

Hello @slow maple any updates? 😦

slow maple Sep 22, 2022, 5:30 AM

#

Hello

#

you are not using it as the documentation suggested

#

Please look at the example in the documentation for this controller and how to use it

#

also make sure you make the proper imports

autumn vault Sep 22, 2022, 5:33 AM

#

can you guide me

#

Ill close this now

#

ill post another one maybe i can get a better understanding of things and how it works

#Is it possible to make a dropdown from material UI dynamic?