I am using contenteditable in the div element in an Angular 8 project. I tried using angular-mentions in my project. I have used npm to include that mention in my project. While doing that [mention] tag is not at all recognized.
I am using this https://github.com/dmacfarlane/angular-mentions
npm install angular-mentions
Here is the error I am getting in the console:
Can't bind to 'mention' since it isn't a known property of 'div'. ][mention]="items" id="rteditor" class="scrollbox-content" contenteditable="true" placeholder="Type a "):
Here is the div element where I am using the mention
<div [mention]="items" id="rteditor" class="scrollbox-content" contenteditable="true" placeholder="Type a message here..."></div>
This is the angular mention version I am using:
"angular-mentions": "^1.1.2",
I also have imported the module in the app.module.ts before using it in my component:
@NgModule({ imports: [ BrowserModule, MentionModule]})
I have followed the below demo and implemented the same, still it didn't work.
https://stackblitz.com/edit/angular-mentions?file=app%2Fapp.component.html
Note:
I have also tried with the latest version (1.1.3) of angular-mention. Still the issue persists.
I have removed the angular-mention package completely and installed it again.
I have Googled and tried various ways to fix this issue, but ended up with no solution.
Could anyone please help me on this? Thanks in advance.
Answer:
Changed the angular-mentions import statement as below. It worked!
import { MentionModule } from 'angular-mentions/';