Support for Material design

[naveenballa]

hi @softsimon
Is there any material design support for this component.

[naveedahmed1]

I was about to suggest this and it shouldn't be very difficult to implement.

In component, we can add
import { MaterialModule } from '@angular/material';
In template:

<li *ngFor="let option of options | searchFilter:searchFilterText">
            <md-checkbox [checked]="isSelected(option)"  (change)="setSelected($event, option)">{{ option.name }}</md-checkbox>
        </li>

Some options in settings could be provided for material to activate this part of the template instead of normal checkboxes.

[naveenballa]

@softsimon Any update on this?

[softsimon]

@naveenballa No updates yet. Haven't tried material design.

[ermarkar]

Unable to implement in my project :(

https://stackoverflow.com/questions/42692044/how-to-use-angular-2-dropdown-multiselect

[softsimon]

/index.js doesn't exist.
try

'angular-2-dropdown-multiselect': {
        main: 'src/multiselect-dropdown.js',
        defaultExtension: 'js'
  }

Or use angular-cli (webpack) ;-)

[ermarkar]

this is working now. bootstrap4 is required , right ?

[softsimon]

Nope. Bootstrap 3 or 4.

[ermarkar]

How can I set the width? I have tried style property with width :100%. but this is not working :(

[chris--jones]

@ermarkar you need to set the style on the button, not the parent control, try adding a custom class to buttonClasses

to see this in action try my demo page, and add btn-block to the buttonClasses list.
https://chris--jones.github.io/angular-2-dropdown-multiselect/

[chris--jones]

@naveedahmed1 One of the nice things about this component is that it has a "soft" dependency on bootstrap (you can technically run it without bootstrap css and just supply your own css if you need to).

You can already achieve a material-like design by omitting the bootstrap css and using custom css and javascript:

I think to allow use of other components for the container, trigger button, checkboxes and list-items would require extending the component to allow custom rendering functions for these components and probably some memoization to prevent expensive re-rendering.

Edit: You can now see this working on my demo-site: https://chris--jones.github.io/angular-2-dropdown-multiselect/

[chris--jones]

Unofficially you can customise a lot with the CSS (see above), but as this is primarily a bootstrap component, I'm closing this as unsupported (wontfix).

@softsimon I'd be interested in working with you on a more generic dropdown select (I think I recall you suggesting something like ngx-dropdown-multiselect) with more styling flexibility.