Update README.md (7537e6bf) · Commits · Isfand Yar Khan / angular-mentions

README.md

+20 −10

Original line number	Original line	Diff line number	Diff line
	@@ -22,10 +22,13 @@ Add the package as a dependency to your project using:

	Add the CSS to your index.html:		Add the CSS to your index.html:

			```html
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
			```

	Add the module to your app.module imports:		Add the module to your app.module imports:

			```typescript
	import { MentionModule } from 'angular-mentions/mention';		import { MentionModule } from 'angular-mentions/mention';
	...		...

	@@ -33,14 +36,19 @@ Add the module to your app.module imports:
	imports: [ MentionModule ],		imports: [ MentionModule ],
	...		...
	})		})
			```

	Add the `[mention]` directive to your input element:		Add the `[mention]` directive to your input element:

			```html
	<input type="text" [mention]="items">		<input type="text" [mention]="items">
			```

	Where `items` is a string array of the items to suggest. For example:		Where `items` is a string array of the items to suggest. For example:

			```typescript
	items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...		items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...
			```

	#### Configuration Options		#### Configuration Options

	@@ -56,7 +64,9 @@ The following optional configuration items can be used.

	For Example:		For Example:

			```html
	<input type="text" [mention]="items" [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name'}">		<input type="text" [mention]="items" [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name'}">
			```

	#### Output Events		#### Output Events