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-mentions

After 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.