How to detect @ in input using ionic 4?

Question

I want to do like twitter posts where users writing his post and when writing @ to open user list and click to add in the input. so that way you can tag anyone in your post. For these things I tried to check first char yeah it's working but in input anywhere I type @ to run a function or open user list.

page.html

  <ion-item>
    <ion-textarea rows="3" (input)="searchPeople($event)" cols="20" formControlName="comment"
      placeholder="Tweet your reply" spellcheck="true" autoComplete="true" autocorrect="true" autofocus required>
    </ion-textarea>
  </ion-item>

page.ts

searchPeople(ev: any) {
  // set val to the value of the searchbar
  let val = ev.target.value;
  let firstchar = val.charAt(0);

  if (firstchar === "@") {
    console.log("search people");
  }
  else if (firstchar === "#") {
    console.log("hash tag");
  } else {
    console.log("error");
  }
 }

Possible duplicate of [Delete first character of a string in Javascript](https://stackoverflow.com/questions/4564414/delete-first-character-of-a-string-in-javascript) — Citizen, Jul 04 '19 at 17:30
@Citizen this is not a duplicate question, and my question is totally different. I want to do like twitter posts where users writing his post and when writing @ to open user list and click to add in the input. so that way you can tag anyone in your post. — user9088454, Jul 05 '19 at 05:27

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Mentions

I've done some digging into this and found the UI term for it is "mentions".

Searching that brings up quite a lot of options for example:

dmacfarlane/angular-mentions: Angular mentions for text fields.

Which is a port for the now-defunct AngularJS directive, Ment.io.

Setup:

You can set this up by doing the following:

Add the package as a dependency to your project using:

npm install angular-mentions

Add the CSS to your index.html:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Add the module to your app.module imports:

import { MentionModule } from 'angular-mentions';
...

@NgModule({
    imports: [ MentionModule ],
    ...
})

Add the [mention] directive to your input/ion-input element:

<input type="text" [mention]="items">
<ion-input [mention]="items"></ion-input>

Where items is a string array of the items to suggest. For example:

items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...

How to detect @ in input using ionic 4?

1 Answers1

Mentions

Setup: