Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
16 Jan
2022

Tag or mention people like WhatsApp & Skype by using @ in Angular

by Shubham Batra

3544

Download Attachment

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.

  • |
  • Angular Mentions , Angular js

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier