From f954eccbcc3f106c4c270aaca91c1f21a5cfce29 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Thu, 15 Dec 2016 08:55:34 +0100 Subject: [PATCH] Improved README Closes #22 --- README.md | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 60 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1fb80c4..2123806 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,63 @@ -# ng2-select2 [![npm version](https://badge.fury.io/js/ng2-select2.svg)](https://badge.fury.io/js/ng2-select2) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) +# Angular wrapper for Select2 (ng2-select2) -Select 2 wrapper for angular (version 2.x.x and up) +[![npm version](https://badge.fury.io/js/ng2-select2.svg)](https://badge.fury.io/js/ng2-select2) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) -[Plunker](https://embed.plnkr.co/P2qvUyGA8fTlFXXKHSuB/) with implementation of npm package. +For Angular version 2.x.x and up -[Demo](https://nejczdovc.github.io/ng2-select2/) of the wrapper. + +## Prerequisites + +For this plugin to work you need to add two javascript libraries to your project +- [Jquery](https://jquery.com/download/) +- [Select2](https://select2.github.io/) + +First option and **preferred one** is to add libraries to your package builder. +- You can find example of how to add libraries to the Angular CLI in [demo branch](https://github.com/NejcZdovc/ng2-select2/blob/demo/angular-cli.json#L24-L25). +- You can also add it to [webpack directly](https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack#answer-2898947). + +Second option is to include libraries into your html head: + +``` + + + Ng2Select2Demo + + + + + + + +``` + +## Installation + +Add package to your project `npm i -S ng2-select2` (this will save package to your `dependencies` in `package.json`) + + +## Basic implementation + +1) Add declaration to [NgModule](https://github.com/NejcZdovc/ng2-select2/blob/demo/src/app/app.module.ts#L15) +``` +@NgModule({ + declarations: [ + ...., + Select2Component + ], + ... +}) +``` + +2) Add it to your [template](https://github.com/NejcZdovc/ng2-select2/blob/demo/src/app/app.component.html#L6). You need to define `startValue` and `startData` in your `.ts` file. + +Example for [startData](https://github.com/NejcZdovc/ng2-select2/blob/demo/src/app/app.component.ts#L16) via [service](https://github.com/NejcZdovc/ng2-select2/blob/demo/src/services/data.service.ts#L50). +Example for [startValue] (https://github.com/NejcZdovc/ng2-select2/blob/demo/src/app/app.component.ts#L11). + +``` + +``` + + +## Demo + +You can view a live demo [here](https://nejczdovc.github.io/ng2-select2/) or check out [demo branch](https://github.com/NejcZdovc/ng2-select2/tree/demo) where you can find source of this demo created with Angular CLI.