Login Register
Code2night
  • Home
  • Blog Archive
  • Learn
    • Tutorials
    • Videos
  • Interview Q&A
  • Languages
    • Angular
    • C
    • c#
    • C#
    • HTML/CSS
    • Java
    • JavaScript
    • Node.js
    • Python
    • React
    • Security
    • SQL Server
    • TypeScript
  • Post Blog
  • Tools
    • JSON Beautifier
    • HTML Beautifier
    • XML Beautifier
    • CSS Beautifier
    • JS Beautifier
    • PDF Editor
    • Word Counter
    • Base64 Encode/Decode
    • Diff Checker
    • JSON to CSV
    • Password Generator
    • SEO Analyzer
    • Background Remover
  1. Home
  2. Blog
  3. Tag or mention people like WhatsApp & Skype by using @ in Angular

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

Date- Jan 16,2022

10366

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

Angular Material Select Dropdown with Image
Dec 13, 2022
Music Player
Sep 04, 2021
Mastering TypeScript with Angular: A Comprehensive Guide
Mar 20, 2026
Translating Website Data Using Azure Translator API in ASP.NET MVC
Feb 01, 2025
Previous in Angular
How to Apply css on child components in Angular
Next in Angular
Angular Material Select Dropdown with Image

Comments

Contents

More in Angular

  • How to Apply css on child components in Angular 10161 views
  • Export to Excel in Angular using ExcelJS? 9728 views
  • How To Consume Web API Using Angular 4001 views
View all Angular posts →

Tags

AspNet C# programming AspNet MVC c programming AspNet Core C software development tutorial MVC memory management Paypal coding coding best practices data structures programming tutorial tutorials object oriented programming Slick Slider StripeNet
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 | 1770
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
Code2Night

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

Panipat, Haryana, India
info@code2night.com
Quick Links
  • Home
  • Blog Archive
  • Tutorials
  • About Us
  • Contact
  • Privacy Policy
  • Terms & Conditions
  • Guest Posts
  • SEO Analyzer
Free Dev Tools
  • JSON Beautifier
  • HTML Beautifier
  • CSS Beautifier
  • JS Beautifier
  • Password Generator
  • QR Code Generator
  • Hash Generator
  • Diff Checker
  • Base64 Encode/Decode
  • Word Counter
  • SEO Analyzer
By Language
  • Angular
  • C
  • c#
  • C#
  • HTML/CSS
  • Java
  • JavaScript
  • Node.js
  • Python
  • React
  • Security
  • SQL Server
  • TypeScript
© 2026 Code2Night. All Rights Reserved.
Made with for developers  |  Privacy  ·  Terms
Translate Page
We use cookies to improve your experience and analyze site traffic. By clicking Accept, you consent to our use of cookies. Privacy Policy
Accessibility
Text size
High contrast
Grayscale
Dyslexia font
Highlight links
Pause animations
Large cursor