angular2-materialize chips implementation

0
votes

I'm trying to implement the examples of materialize-css chips found here, under the "Javascript Plugin Usage" heading, in Angular with angular2-materialze. I have followed the instructions for angular-cli installation found in the docs. I'm especially interested in the following implementation:

HTML

<div class="chips chips-placeholder"></div>

JavaScript/JQuery

$('.chips').material_chip();
$('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
  });

How do I convert that to Angular code? What does my template and component need to have for this to work?

I have tried changing the HTML to this, but it didn't work:

<div materialize class="chips chips-placeholder"></div>
1
jqueryangularmaterialize

1 Answers

0
votes

See example code here: https://github.com/InfomediaLtd/angular2-materialize/blob/master/sample/src/app/components/chips.ts This is the demo: http://angular2-materialize.surge.sh/#/Chips

In your code, you should use material_chip instead of chip:

<div class="chips" materialize="material_chip" [materializeParams]="[chipsPlaceholder]"></div>

Answer taken from: https://github.com/InfomediaLtd/angular2-materialize/issues/293