View not working with ion-input directive [Ionic]

[XavG]

Hi,

The module is easy to install and import in a Ionic/Angular Project, but as the directive is an and not simply a the view didn't work.
A popup appear to the screen but it is empty and it stay forever (see picture)

Angular : 8.1.3
Ionic: 5.4.13
Angular Mention: 1.2.0

As soon as I replaced the directive into an it works.

Can you / Will you adapt this module to Ionic ?

Thanks

[dmacfarlane]

Can you clarify what you changed to make this work with Ionic?

[XavG]

You just replace the directive like that

Basically, change <ion-input></ion-input> by <input/>

WORKING:

<ion-col size="10" class="input-col">
   <input [mention]="hashtags" [mentionConfig]="{triggerChar:'#',maxItems:10,dropUp: true}" autocomplete="true" spellcheck="true" [(ngModel)]="newComment" type="text" placeholder="Entrez votre message" name="message"/>
</ion-col>

NOT WORKING:

<ion-col` size="10" class="input-col">
   <ion-input [mention]="hashtags" [mentionConfig]="{triggerChar:'#',maxItems:10,dropUp: true}" autocomplete="true" spellcheck="true" [(ngModel)]="newComment" type="text" placeholder="Entrez votre message" name="message"></ion-input
</ion-col>

So I just DON'T use the Ionic directive. But I really need to use Ionic directive because some other features depend on it.

[XavG]

+1

[JoaquimDmt]

+1

[JoaquimDmt]

it's correctly showing to me the list of user but when I click on a user in the list it doesn't write it.

[GhoshWorld]

You just replace the directive like that

Basically, change <ion-input></ion-input> by <input/>

WORKING:

<ion-col size="10" class="input-col">
   <input [mention]="hashtags" [mentionConfig]="{triggerChar:'#',maxItems:10,dropUp: true}" autocomplete="true" spellcheck="true" [(ngModel)]="newComment" type="text" placeholder="Entrez votre message" name="message"/>
</ion-col>

NOT WORKING:

<ion-col` size="10" class="input-col">
   <ion-input [mention]="hashtags" [mentionConfig]="{triggerChar:'#',maxItems:10,dropUp: true}" autocomplete="true" spellcheck="true" [(ngModel)]="newComment" type="text" placeholder="Entrez votre message" name="message"></ion-input
</ion-col>

So I just DON'T use the Ionic directive. But I really need to use Ionic directive because some other features depend on it.

I use both of this but not work for me and no error show. Please share full code with ts file. @dmacfarlane @XavG

[GhoshWorld]

You just replace the directive like that
Basically, change <ion-input></ion-input> by <input/>
WORKING:

<ion-col size="10" class="input-col">
   <input [mention]="hashtags" [mentionConfig]="{triggerChar:'#',maxItems:10,dropUp: true}" autocomplete="true" spellcheck="true" [(ngModel)]="newComment" type="text" placeholder="Entrez votre message" name="message"/>
</ion-col>

NOT WORKING:

<ion-col` size="10" class="input-col">
   <ion-input [mention]="hashtags" [mentionConfig]="{triggerChar:'#',maxItems:10,dropUp: true}" autocomplete="true" spellcheck="true" [(ngModel)]="newComment" type="text" placeholder="Entrez votre message" name="message"></ion-input
</ion-col>

So I just DON'T use the Ionic directive. But I really need to use Ionic directive because some other features depend on it.

I use both of this but not work for me and no error show. Please share full code with ts file. @dmacfarlane @XavG

My Issue was solved. I forget about declare component file in app module. Now its work perfectly.