Comments (4)
Hi @shindekaps,
I am not really sure I understand the problem as I would need more information.
To use ngFor
on options you can follow the example below ...
example.component.html
<mz-select-container>
<select mz-select
id="select-number"
[label]="'Number'"
[placeholder]="'Choose a number'"
[(ngModel)]="optionValue">
<option *ngFor="let option of ['one','two','three','four']" [selected]="option === optionValue">{{ option }}</option>
</select>
</mz-select-container>
OptionValue => {{ optionValue }}
example.component.ts
public optionValue: string;
If it does not solve your issue please provide a sample of your code.
Thanks,
from ngx-materialize.
Hi,
*ngFor is working when data is hard coded. When the data is coming asynchronous then it not working. Also I got workaround when we use ngIf then it is working.
E.g.
<mz-select-container>
<select mz-select
id="select-number"
[label]="'Number'"
[placeholder]="'Choose a number'"
[(ngModel)]="optionValue">
<option *ngFor="let option of comapnyList" [selected]="option === optionValue">{{ option }}</option>
</select>
</mz-select-container>
where companyList is coming from server.Above example is not working. But when we add *ngIf then it is working
E.g.
<mz-select-container *ngIf="comapnyList.length>0">
<select mz-select
id="select-number"
[label]="'Number'"
[placeholder]="'Choose a number'"
[(ngModel)]="optionValue">
<option *ngFor="let option of comapnyList" [selected]="option === optionValue">{{ option }}</option>
</select>
</mz-select-container>
Thanks
Kapil Shinde
from ngx-materialize.
Thank you for the reporting, you're right there're bugs with async options.
We're on it.
from ngx-materialize.
@shindekaps it should be fixed by #91 and it will be released to npm in the next days/weeks.
If there is anything else or if the issue is not properly fixed, feel free to ping us.
from ngx-materialize.
Related Issues (20)
- How to make a fixed navbar ? HOT 3
- Ho to align material-icon and a text-input HOT 1
- Tooltip with max width HOT 1
- Components no implements (click)
- autocomplete not working for input if data is dynamically bind through webservice HOT 3
- MzToastService.show: Materialize is not defined HOT 2
- Autocomplete not working with chip input (does with regular input) HOT 1
- Dropdown click inisde elements closes HOT 1
- Errors after updating to Angular 7 HOT 2
- Pagination component.
- Sidenav - this.collapseButton.sideNav is not a function HOT 5
- "Falling" icon in float+flat button in a mz-navbar HOT 1
- Chip selected when scrolling (swiping) through chip autocomplete list.
- Add own picture in select option with data-icon?
- Date picker and Time picker issue in latest chrome browser HOT 15
- Date picker - How Modify default Language HOT 2
- Text area not expanding on large input size HOT 1
- Getting compilation error when import ngx-materialize. HOT 1
- pagination breaks after totalItems = 0 HOT 1
- @angular/core has no exported member 'Renderer' HOT 12
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-materialize.