Save the ID values of selected users in Angular Mentions feature

Question

Save the ID values of selected users in Angular Mentions feature

Using the angular mentions library, I successfully incorporated a textarea that enables me to mention multiple users.

Is there a method to store the IDs of the selected users? Ideally, I would like to save them as an array of strings.

For instance: If I choose users Name 1, Name 2, Name 3 .... I desire to save their IDs rather than names. ["1", "2", "3"]

Could someone lend me a hand with this?

Thank you!

Stackblitz

HTML

 <div [mention]="items" class="form-control" contenteditable="true" style="border:1px lightgrey solid;min-height:88px" [mentionConfig]="{triggerChar:'@',labelKey:'name'}"></div>

Component.ts

 items: string[];
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(
      (val: any[]) =>{
        this.items = val;
      } 
    )
  }

https://i.sstatic.net/hzAew.png

angular typescript

Answer 1

Answer №1

1- Start by using a textarea instead of a div element in order to utilize [(ngModel)] for binding the selected user names.

<textarea type="text" [mention]="items" 
 class="form-control" contenteditable="true" style="border:1px lightgrey solid;min-height:88px" [mentionConfig]="{triggerChar:'@',maxItems:10,labelKey:'name'}" [(ngModel)]="data"></textarea>

2- Create a variable called 'data' to bind all the text input from the textarea.

3- Utilize the JSON data to create TypeScript classes that represent the JSON properties, making data filtering easier.

export interface Geo {
  lat: string;
  lng: string;
}

... (additional TypeScript interfaces)

export interface RootObject {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}

4- Implement the 'save' method to retrieve all the selected name IDs.

 save() {
        let ids = this.data.replace(/(\r\n|\n|\r)/gm, "").split("@").filter(t => t != "" && this.items.findIndex(u => u.name == t.trim()) > -1).map(name => this.items.find(s => s.name == name.trim()).id);
  }

Check out the demo here

Answer 2

1- Start by using a textarea instead of a div element in order to utilize [(ngModel)] for binding the selected user names.

<textarea type="text" [mention]="items" 
 class="form-control" contenteditable="true" style="border:1px lightgrey solid;min-height:88px" [mentionConfig]="{triggerChar:'@',maxItems:10,labelKey:'name'}" [(ngModel)]="data"></textarea>

2- Create a variable called 'data' to bind all the text input from the textarea.

3- Utilize the JSON data to create TypeScript classes that represent the JSON properties, making data filtering easier.

export interface Geo {
  lat: string;
  lng: string;
}

... (additional TypeScript interfaces)

export interface RootObject {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}

4- Implement the 'save' method to retrieve all the selected name IDs.

 save() {
        let ids = this.data.replace(/(\r\n|\n|\r)/gm, "").split("@").filter(t => t != "" && this.items.findIndex(u => u.name == t.trim()) > -1).map(name => this.items.find(s => s.name == name.trim()).id);
  }

Check out the demo here

Answer 3

Answer №2

I highly recommend utilizing the library fvi-angular-mentions. With fvi-angular-mentions, you have the ability to retrieve the selected users.

The current library lacks an eventEmitter to capture the selected username. It is limited to only 3 event emitters:

@Output() searchTerm EventEmitter<string>-This event is triggered whenever the search term changes, allowing for asynchronous search functionality.
@Output() opened EventEmitter<void>-Triggered when the mentions panel is opened.
@Output() closed EventEmitter<void>-Triggered when the mentions panel is closed.

Unfortunately, these options do not meet your requirements.

Answer 4

I highly recommend utilizing the library fvi-angular-mentions. With fvi-angular-mentions, you have the ability to retrieve the selected users.

The current library lacks an eventEmitter to capture the selected username. It is limited to only 3 event emitters:

@Output() searchTerm EventEmitter<string>-This event is triggered whenever the search term changes, allowing for asynchronous search functionality.
@Output() opened EventEmitter<void>-Triggered when the mentions panel is opened.
@Output() closed EventEmitter<void>-Triggered when the mentions panel is closed.

Unfortunately, these options do not meet your requirements.

Answer 5

Answer №3

It appears that the Mention module functions by binding exclusively to a string value - hence, you will need to implement the following modifications using the map operator:

.ts

this.userService.getUsers().subscribe((val: any[]) => {
   // converting each value to a string
   this.items = val.map((e: any) => String(e.id));
});

.html

<div 
   [mention]="items" class="form-control" 
   contenteditable="true" 
   style="border:1px lightgrey solid;min-height:88px" 
   [mentionConfig]="{triggerChar:'@',labelKey:'id'}">  // update made here
</div>

Check out a demo for reference.

Answer 6

It appears that the Mention module functions by binding exclusively to a string value - hence, you will need to implement the following modifications using the map operator:

.ts

this.userService.getUsers().subscribe((val: any[]) => {
   // converting each value to a string
   this.items = val.map((e: any) => String(e.id));
});

.html

<div 
   [mention]="items" class="form-control" 
   contenteditable="true" 
   style="border:1px lightgrey solid;min-height:88px" 
   [mentionConfig]="{triggerChar:'@',labelKey:'id'}">  // update made here
</div>

Check out a demo for reference.

Save the ID values of selected users in Angular Mentions feature

Answer №1

Answer №2

Answer №3

Similar questions

What is the alternative method for enabling cross-origin authentication if CORS wildcard is not permitted for authentication?

Strategies for efficiently managing multiple subscriptions in an Angular form using minimal code and best practices

Angular Test Error: Refactoring requires a source file to be present

Trouble accessing images from database in Angular 2 with Firebase

Having trouble creating a dynamic form in Ionic

Angular Compilation Blocked Due to Circular Dependency Error

Setting a value in Ionic 3 HTML template

Encountering an issue with Typescript Vue class-based components in Laravel Mix: issue arises when attempting to set property 'render' on an undefined object

Struggling to extract specific information from a json array using Angular, my current approach is only retrieving a portion of the required data

Strategies for passing multiple props to a function in React using TypeScript, such as useState([]) and useState(boolean)

Adding a CSS class to a component element

Navigate to the main page of the routing module within Angular

The header code in Angular 6 does not get triggered when working with the router

The latest update for angular-devkit/build-angular (version 0.13.4) has brought a new issue with the configuration output. It seems that there is an unrecognized property

After being awaited recursively, the resolved promise does not perform any actions

Angular 5 Web-Based EPUB Reader

What is the syntax for declaring a boolean or object type?

Angular 2 routing allows us to seamlessly display multiple components within the same application

Combining Multiple .ts Files into a Single File: A Simplified Application Structure with TypeScript 1.8

Load Angular template dynamically within the Component decorator