Ionic emojis

I have added below plugin for emojis

after that am facing the below issue.
so please help me

[16:47:11] typescript: node_modules/@angular/core/src/render3/ng_dev_mode.d.ts, line: 9
Cannot redeclare block-scoped variable ‘ngDevMode’.

   L8:  rendererSetText: number;
   L9:  rendererCreateElement: number;
  L10:  rendererAddEventListener: number;

[16:47:11] typescript: …ionic-tools/emoji-picker/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts, line: 9
Cannot redeclare block-scoped variable ‘ngDevMode’.

   L8:  rendererSetText: number;
   L9:  rendererCreateElement: number;
  L10:  rendererAddEventListener: number;

[16:47:11] ionic-app-script task: “build”
[16:47:11] Error: Failed to transpile program
Error: Failed to transpile program
at new BuildError (/Users/sathguru/harika/ionic+angular/UiTest/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at /Users/sathguru/harika/ionic+angular/UiTest/node_modules/@ionic/app-scripts/dist/transpile.js:159:20
at new Promise ()
at transpileWorker (/Users/sathguru/harika/ionic+angular/UiTest/node_modules/@ionic/app-scripts/dist/transpile.js:107:12)
at Object.transpile (/Users/sathguru/harika/ionic+angular/UiTest/node_modules/@ionic/app-scripts/dist/transpile.js:64:12)
at /Users/sathguru/harika/ionic+angular/UiTest/node_modules/@ionic/app-scripts/dist/build.js:109:82
[ERROR] An error occurred while running subprocess ionic-app-scripts.

    ionic-app-scripts build --target cordova --platform android exited with exit code 1.

below is my ionic info

ionic info

Ionic:

Ionic CLI : 5.4.8 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.4
@ionic/app-scripts : 3.2.3

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 6.2.3, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, (and 8 other plugins)

Utility:

cordova-res : not installed
native-run : 0.2.8 (update available: 0.3.0)

System:

Android SDK Tools : 26.1.1 (/Users/sathguru/Library/Android/sdk)
ios-deploy : 1.9.4
ios-sim : 8.0.2
NodeJS : v10.13.0 (/usr/local/bin/node)
npm : 6.13.2
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61

hello, also share a sample code not just post only error

That library looks broken. I would give this fork a try.

this is my chatHistory.ts file code

ngOnInit() {
this.chatByRefId();
}

chatByRefId() {
this.loader.present();
this.id = this.chatService.getRefId();
this.connection = this.chathistoryService.getHistoryOnId().subscribe(message => {
this.message = message.result.slice().reverse();
var message1=message.result;
this.messages.push(this.message);
this.size = message.result.length;
for (var i = 0; i < this.size; i++) {
var msgls = this.message[i].msg;
this.responce = msgls;
this.content.scrollToBottom();
}
this.loader.dismiss();
this.content.scrollToBottom();
setTimeout(()=>{
this.content.scrollToBottom();
},100);
});
}

THis is my chatHIstory.html

    <ion-item-sliding *ngFor="let mes of message ; let last = last " style="padding-left: 1px;padding-right: 10px;" (ionSwipe)="reply(mes)" (ionDrag)="logDrag()">

     <ion-item style="white-space: inherit" no-lines>

         <!-- <ion-card   
          class="category-concept-card "  
            style="background:white;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);margin: 5px !important;border-radius : 5px;margin-left: 5px;font-size: 0.9em;" 
         > -->
          <ion-label text-wrap style="margin: 1px 1px 2px 0;"> 
            <ion-card-content *ngIf="user!==mes.msgFrom" class="category-concept-card  chat-bubble left line-ht-sth"  
            style="  font-size: 0.9em;" > 
              <span style="color:#75b11a;"><b>{{getUserName(mes.msgTo)}}</b></span>
                    <div [innerHTML]="mes.msg" class="category-description" style="color:#000;"></div>
               
                                   
              <ion-row align-items-center style="margin-left: -7px;">
                  <ion-col  size="7" size-lg offset="7" style="padding:0px;padding-left: 6px;">
                        <p class="category-description" style="color:#000;font-size: 1.1rem;" >
                          {{mes.createdOn| date :'medium'}} </p>
                      </ion-col>    
                </ion-row> 
                </ion-card-content>
                 </ion-label> 
                               </ion-item>  

            <ion-item *ngIf="user===mes.msgFrom" class="category-concept-card chat-bubble right" style="min-height: 0.1rem;">
               
              <ion-label text-wrap style="margin: 1px 1px 2px 0;">
                  
            <ion-card-content class="" style="padding: 5px 5px 0px 5px;font-size: 1.1rem;"> 

                      <div [innerHTML]="mes.msg" class="category-description" style="color:#000;line-height: 1;"></div>                  
                                     
                <ion-row align-items-center style="margin-left: -7px;">
                    <ion-col  size="7" size-lg offset="7">
                          <p class="category-description" style="color:#000;font-size: 1.1rem;" >
                                   {{mes.createdOn| date :'medium'}} </p>
                        </ion-col> 
                  </ion-row> 

                  </ion-card-content>

                  </ion-label>
                  
              </ion-item>


          <!-- </ion-card> -->
   
       <ion-item-options>
        <button  (click)="removeItem(item)"><ion-icon name="arrow-up"></ion-icon> reply</button>
       </ion-item-options>
    </ion-item-sliding>
 </ion-list>

So i would like to scrolldown after array data loads to html through html code only in this file.

Thanks . This is working fine. but emoji’s keyboard is not displaying.
Below is code with emoji’s display.

    <ion-col col-9>
        <ion-item >
         {{swipedText}}
         
        </ion-item>
      </ion-col>

</ion-row>
<ion-row class="message_row">
    <ion-col col-2>
        <ion-item no-lines>
         
          <button ion-button clear icon-only (click)="toggled = !toggled" [(emojiPickerIf)]="toggled" [emojiPickerDirection]="'bottom'"
  (emojiPickerSelect)="handleSelection($event)">
  <ion-icon name="md-happy"></ion-icon>
</button>
        </ion-item>
      </ion-col>
  <ion-col col-8>
    <ion-item no-lines>
        
      <ion-input type="text" placeholder="Message" [(ngModel)]="editorMsg" (keyup.enter)="sendMsg()" 
      ></ion-input>
      
    </ion-item>
  </ion-col>
  <ion-col col-2>
    <button ion-button clear color="primary" (click)="sendMsg()" [disabled]="message === ''">
    Send
  </button>
  </ion-col>
</ion-row>

chatHistory.ts

toggled: boolean = false;
emojitext: string;

handleSelection(event) {
if(this.editorMsg==undefined){
this.editorMsg="";
}
this.editorMsg = this.editorMsg + " " + event.char;
console.debug(" handle selection "+this.emojitext);
}

SO please help me. How to display emoji’s keyboard

Hi rapropos,
Can you guide me how to show emoji’s keyboard properly.

  • posted question here too. You can check this.