Tag or mention people like WhatsApp & Skype by using @ in Angular
So starting from the beginning it's important to understand the requirement and it's complexity. Implementing skype like user tag functionality in chat on @ press, is something which is in lot of use now a day's. There are not many solutions available when we want to implement that in Angular js.
Angular-Mentions
Angular mentions is a npm package available in Angular js using which we can implement user tag functionality. So for using this we have to first install the package using
npm i angular-mentionsAfter installing this, you have to build the project again. Now you have to add these on your component
import { MentionModule } from 'angular-mentions';
We will use this to import our package in the component.
@NgModule({ imports: [ MentionModule ], ... })
After following these steps, now you are ready to use Angular-Mentions user tag functionality in your component. Add mention directive on your input element.
<input type="text" [mention]="items">
We will also need to pass the items array, which will have all the users that you will see while pressing @ on your input
items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...
Now you can run your project. You can learn about Angular Mentions directly from https://www.npmjs.com/package/angular-mentions.
Now you will see this output
So, this is how you can implement user tag functionality like skype in Angular js. If you have any questions you can ask.