fix: fixed defaulting rows and columns to 1 causing layout issue

demo: added custom template demo, closes #1

demo/src/app/components/mentions/demos/basic/mentions-basic.ts

@@ -12,7 +12,7 @@ export class NthdMentionsBasic {
     disabled: boolean = false;
     required: boolean = false;
     rows: number = 5;
-    cols: number;
+    cols: number = 15;
     dropUp: boolean = false;
 
     model: any = {

demo/src/app/components/mentions/demos/custom-search/mentions-custom-search.html

@@ -3,6 +3,7 @@
         [mentions]="model.mentions"
         formClass="form-control"
         rows="5"
+        cols="35"
         [(ngModel)]="model.value"
         placeholder="Type text here..."
         (search)="onSearch($event)"

demo/src/app/components/mentions/demos/custom-template/mentions-custom-template.html

@@ -0,0 +1,15 @@
+<div class="basic-example">
+    <ng-mentions
+        [mentions]="model.mentions"
+        formClass="form-control"
+        rows="5"
+        cols="35"
+        [(ngModel)]="model.value"
+        placeholder="Type text here..."
+    >
+        <ng-template let-item="item">
+            <span>{{item.id}}: {{item.display}} ({{item.type}})</span>
+        </ng-template>
+    </ng-mentions>
+</div>
+<pre class="my-2">{{model | json}}</pre>

demo/src/app/components/mentions/demos/custom-template/mentions-custom-template.ts

@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'nthd-mentions-custom-template',
+  templateUrl: './mentions-custom-template.html'
+})
+export class NthdMentionsCustomTemplate {
+  model: any = {
+    value: '',
+    mentions: [
+      {
+        display: 'Dave',
+        id: 1,
+        type: 'contact'
+      },
+      {
+        display: 'Bob Ross',
+        id: 2,
+        type: 'contact'
+      },
+      {
+        display: 'Carl',
+        id: 3,
+        type: 'contact'
+      },
+      {
+        display: 'Sue',
+        id: 4,
+        type: 'contact'
+      },
+    ]
+  };
+}

demo/src/app/components/mentions/demos/index.ts

@@ -2,8 +2,15 @@ import {NthdMentionsBasic} from './basic/mentions-basic';
 import {NthdMentionsCustomSearch} from './custom-search/mentions-custom-search';
 import {NthdMentionsStringValues} from './string-values/mentions-string-values';
 import {NthdMentionsValidation} from './validation/mentions-validation';
+import {NthdMentionsCustomTemplate} from './custom-template/mentions-custom-template';
 
-export const DEMO_DIRECTIVES = [NthdMentionsBasic, NthdMentionsCustomSearch, NthdMentionsStringValues, NthdMentionsValidation];
+export const DEMO_DIRECTIVES = [
+    NthdMentionsBasic,
+    NthdMentionsCustomSearch,
+    NthdMentionsStringValues,
+    NthdMentionsValidation,
+    NthdMentionsCustomTemplate,
+];
 
 export const DEMO_SNIPPETS = {
     'basic': {
@@ -21,5 +28,9 @@ export const DEMO_SNIPPETS = {
     'validation': {
         'code': require('!!raw-loader!./validation/mentions-validation'),
         'markup': require('!!raw-loader!./validation/mentions-validation.html')
+    },
+    'custom-template': {
+        'code': require('!!raw-loader!./custom-template/mentions-custom-template'),
+        'markup': require('!!raw-loader!./custom-template/mentions-custom-template.html')
     }
 };

demo/src/app/components/mentions/demos/string-values/mentions-string-values.html

@@ -7,6 +7,7 @@
         [markup]="model.markup"
         formClass="form-control"
         rows="5"
+        cols="35"
         [(ngModel)]="model.value"
         placeholder="Type text here..."
     ></ng-mentions>

demo/src/app/components/mentions/demos/validation/mentions-validation.html

@@ -8,6 +8,7 @@
         [mentions]="model.mentions"
         formClass="form-control"
         rows="5"
+        cols="35"
         [(ngModel)]="model.value"
         [required]="required"
         #validation="ngModel"

demo/src/app/components/mentions/mention.component.ts

@@ -18,6 +18,10 @@ import {DEMO_SNIPPETS} from './demos';
       <nthd-example-box title="String Values" [snippets]="snippets" component="mentions" demo="string-values" id="values">
         <nthd-mentions-string-values></nthd-mentions-string-values>
       </nthd-example-box>
+        <nthd-example-box title="Custom Mentions List Template" [snippets]="snippets" component="mentions" demo="custom-template"
+                          id="template">
+            <nthd-mentions-custom-template></nthd-mentions-custom-template>
+        </nthd-example-box>
     </nthd-component-wrapper>
   `
 })

src/mentions-input.directive.ts

@@ -47,8 +47,8 @@ export class NgMentionsAccessorDirective implements OnInit, OnDestroy, ControlVa
     }
   }
 
-  onChange(value: any) {
-    if (this._onChange) {
+  onChange(value: string) {
+    if (this._onChange && typeof value === 'string') {
       this._onChange(value);
     }
   }

src/mentions.component.ts

@@ -174,8 +174,10 @@ export class NgMentionsComponent implements OnChanges, OnInit, AfterViewInit, Af
   }
 
   set rows(value: number|string) {
-    this._rows = Math.max(1, <number>value);
-    this.refreshStyles();
+    if (value !== null && typeof value !== 'undefined') {
+      this._rows = Math.max(1, <number>value);
+      this.refreshStyles();
+    }
   }
 
   @Input('cols')
@@ -184,8 +186,10 @@ export class NgMentionsComponent implements OnChanges, OnInit, AfterViewInit, Af
   }
 
   set columns(value: number|string) {
-    this._columns = Math.max(1, <number>value);
-    this.refreshStyles();
+    if (value !== null && typeof value !== 'undefined') {
+      this._columns = Math.max(1, <number>value);
+      this.refreshStyles();
+    }
   }
 
   /**
@@ -229,8 +233,8 @@ export class NgMentionsComponent implements OnChanges, OnInit, AfterViewInit, Af
   private _value: string = '';
   private _required: boolean;
   private _disabled: boolean;
-  private _rows: number = 1;
-  private _columns: number = 1;
+  private _rows: number = null;
+  private _columns: number = null;
   private searchString: string;
   private startPos: number;
   private startNode;