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;
      } 
    )
  }

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

Issue: ReactJS - $npm_package_version variable not functioning properly in build versionIn the current

Using Lerna with Docker for Next.js and GraphQL applications

Establish a permanent code folding feature in the Monaco editor for enhanced text organization

Linting error: Unable to access properties of an undefined object (isStrict)

Why does the Material button style take time to apply when my Angular application first loads instead of being immediate?

data not corresponding to interface

Guarding against Angular routes that do not have a component and may include an

Troubleshooting: Issues with Angular 2's default routing system

Types are not appearing in @types/node

Is there a way to deactivate the spin buttons for an input number field?

Error: Attempting to add types to an object returned from the .map function in JSX Element

Is it recommended to keep Angular properties private and only access them through methods?

Developing an Angular application and deploying it onto the server

acquire tabulations from every single document within the templates on DocuSign

Issue with ngStyle function in Internet Explorer

Modifying text input in Angular

What modifications need to be made to the MEAN app before it can be deployed on the server?

Tips for avoiding Angular routing when clicking on a Bootstrap tab link

Tips for preventing duplicate entries in an AG Grid component within an Angular application

Error Message: "Module not found - Module TS2307 cannot be located