Commit b13b77ba authored by dmacfarlane's avatar dmacfarlane
Browse files

Added list templates based on PR #31

parent 41feceb9

src/app/app.component.html

+6 −5
Original line number Diff line number Diff line
@@ -7,10 +7,6 @@ and content editable fields. Try entering some @names below.</p> 
<h3>Minimal</h3>

<input [mention]="items" class="form-control" type="text">



<!-- <app-demo-async></app-demo-async> -->



<!-- <app-demo-options></app-demo-options> -->



<h3>Textarea</h3>

<textarea [mention]="items" class="form-control" cols="60" rows="4"></textarea>
@@ -20,5 +16,10 @@ and content editable fields. Try entering some @names below.</p> 
<h3>Embedded Editor</h3>

<app-demo-tinymce></app-demo-tinymce>



<!-- other demos that can be enabled -->

<!-- <app-demo-async></app-demo-async> -->

<!-- <app-demo-options></app-demo-options>  -->

<!-- <app-demo-template></app-demo-template> -->



<br><p style="color:grey">angular2-mentions on <a href="">Github</a></p>

<a href="https://github.com/dmacfarlane/angular2-mentions"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

src/app/app.module.ts

+2 −0
Original line number Diff line number Diff line
@@ -10,6 +10,7 @@ import { AppComponent } from './app.component'; 
import { MentionModule } from '../mention/mention.module';

import { DemoAsyncComponent } from './demo-async/demo-async.component';

import { DemoOptionsComponent } from './demo-options/demo-options.component';

import { DemoTemplateComponent } from './demo-template/demo-template.component';

import { DemoTinymceComponent } from './demo-tinymce/demo-tinymce.component';



@NgModule({
@@ -23,6 +24,7 @@ import { DemoTinymceComponent } from './demo-tinymce/demo-tinymce.component'; 
    AppComponent,

    DemoAsyncComponent,

    DemoOptionsComponent,

    DemoTemplateComponent,

    DemoTinymceComponent

  ],

  providers: [],

src/app/demo-options/demo-options.component.html

+4 −3
Original line number Diff line number Diff line 
<h3>Options</h3>

<input [mention]="objectItems" class="form-control" type="text"

       [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name',valueKey:'value',mentionSelect:format}">
 
 No newline at end of file
 
<h3>Configuration Options</h3>

<p>Example showing how complex items (an array of objects) and configuration options can be used. The tigger character is #.</p>

<input [mention]="complexItems" class="form-control" type="text"

       [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name',mentionSelect:format}">
 
 No newline at end of file

src/app/demo-options/demo-options.component.ts

+4 −4
Original line number Diff line number Diff line
@@ -6,11 +6,11 @@ import { Component } from '@angular/core'; 
})

export class DemoOptionsComponent {



  format(s:string) {

    return s.toUpperCase();

  format(item:any) {

    return item['value'].toUpperCase();

  }



  objectItems = [

  complexItems = [

    {

      "value" : "user1",

      "email": "user1@domain.com",

src/app/demo-template/demo-template.component.html

0 → 100644
+11 −0
Original line number Diff line number Diff line 
<h3>Template</h3>

<p>Example showing how an Angular template can be used to customize the appearance of the mention list.</p>



<ng-template #mentionListTemplate let-item="item">

  {{item.label}} <strong>({{item.username}})</strong>

</ng-template>



<h3>Input</h3>

<input [mention]="complexItems" class="form-control" type="text"

       [mentionConfig]="{mentionSelect: format}" 

       [mentionListTemplate]="mentionListTemplate">