Code2night
  • Home
  • Guest Posts
  • Tutorial
  • Languages
    • Angular
    • C
    • C#
    • HTML/CSS
    • Java
    • JavaScript
    • Node.js
    • Python
    • React
    • SQL Server
    • TypeScript
  • Post Blog
  • Tools
    • JSON Beautifier
    • HTML Beautifier
    • XML Beautifier
    • CSS Beautifier
    • JS Beautifier
    • PDF Editor
  • Register
  • Login
  1. Home
  2. Blogpost

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

Date- Jan 16,2022

10344

Free Download Pay & Download
Angular Mentions Angular js

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.

S
Shubham Batra
Programming author at Code2Night — sharing tutorials on ASP.NET, C#, and more.
View all posts →

Related Articles

How to Apply css on child components in Angular
Jan 16, 2022

Comments

Tags

Swagger UI
Swashbuckle
SwashbuckleAspNetCore
Rest API
Postman
Api Testing
ITextSharp
Export to Pdf
AspNet Core
AspNet
C#
View to Pdf in Aspnet
Scheduler
Fibonacci series in Java
Display Fibonacci Series
First C# Program
What is C?
C
C Programming
CodeLobster
Free Download for Youtube Subscribers!

First click on Subscribe Now and then subscribe the channel and come back here.
Then Click on "Verify and Download" button for download link

Subscribe Now | 1760
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

Continue with Downloading
Be a Member
Join Us On Whatsapp Join Us On Facebook
Code2Night

A community platform for sharing programming knowledge, tutorials, and blogs. Learn, write, and grow with developers worldwide.

Panipat, India   info@code2night.com

Quick Links
  • Home
  • Blogs
  • Tutorials
  • About Us
  • Contact
  • Privacy Policy
  • Terms & Conditions
  • Guest Posts
Dev Tools
  • JSON Beautifier
  • HTML Beautifier
  • XML Beautifier
  • CSS Beautifier
  • JS Beautifier
  • PDF Editor
By Language
  • Angular
  • C
  • C#
  • HTML/CSS
  • Java
  • JavaScript
  • Node.js
  • Python
  • React
  • SQL Server
  • TypeScript
© 2026 Code2Night. All Rights Reserved.
Built with for developers