How do I add and configure an npm package (ng-selectize) into a plunker angular demo?

1k views Asked by At

I am trying to set up a plnkr with angular and need to install and configure ng-selectize in the demo. How do I add an npm package ng-selectize to my plnkr?

http://plnkr.co/edit/msFyhztaC0YP1q6wADKq

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { NgSelectizeModule } from 'ng-selectize';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
       <ng-selectize [config]="config" [optgroups]="optgroups" [options]="options"></ng-selectize>
    </div>
  `,
})
export class App {
  name:string;
  config = {
      highlight: false,
      create: false,
      persist: true,
      plugins: ['dropdown_direction', 'remove_button'],
      dropdownDirection: 'down',
      optgroupField: 'group', // Name of the property to group items by.
      optgroupLabelField: 'label', // Name of the property to render as an option group label.
      labelField: 'label',
      valueField: 'value',
      maxItems: 1000
    }

  optgroups = [
    {
      group: 'colors',
      label: 'colors'
    },
    {
      group: 'animals',
      label: 'animals'
    }
  ];

  options =   [
    {
      label: 'Red',
      value: 'red',
      group: 'colors'
    }, {
      label: 'Blue',
      value: 'blue',
      group: 'colors'
    }, {
      label: 'Green',
      value: 'green',
      group: 'colors'
    }, {
      label: 'Dog',
      value: 'dog',
      group: 'animals'
    }
  ];
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule, NgSelectizeModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

I followed another stackoverflow answer which said to add it to the config.js but I'm getting a lodash clonedeep not found error.

1

There are 1 answers

0
yurzui On BEST ANSWER

config.js

map: {
  ...,
  'ng-selectize': 'npm:ng-selectize',
  'lodash.clonedeep': 'npm:lodash.clonedeep'
}

index.html

<link rel="stylesheet" href="https://unpkg.com/selectize/dist/css/selectize.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/selectize.bootstrap3.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/ng-selectize/selectize/selectize.standalone.js"></script>

Plunker Example