i started with a basic footer bar which has a input text with a send button. the code looked as below:
<ion-footer padding>
<form [formGroup]="chatForm" (ngSubmit)="sendChatMessage()">
<ion-input type="text" #sendInput formControlName="messageInput" placeholder="start typing..."></ion-input>
<ion-buttons end>
<button ion-button clear type="submit" [disabled]="chatForm.controls['messageInput'].value === ''"><ion-icon name="ios-send" style="zoom:2.0;"></ion-icon></button>
</ion-buttons>
</form>
</ion-footer>
the scss is as below:
page-chat {
.input[type=text] {
border: 1px solid grey;
border-radius: 10px;
padding: 5px;
position: absolute;
width: 80%;
}
now i came up with a requirement to add a microphone to speak to type. I want it to be as the first button and then input box and then the send button. the new one looks like below:
<ion-footer padding>
<form [formGroup]="chatForm" (ngSubmit)="sendChatMessage()">
<button ion-button (click)="listenForSpeech()" clear><ion-icon name="microphone" isActive={{microphoneActive}} style="zoom:1.0;"></ion-icon></button>
<ion-input type="text" #sendInput formControlName="messageInput" placeholder="start typing..."></ion-input>
<ion-buttons end>
<button ion-button clear type="submit" [disabled]="chatForm.controls['messageInput'].value === ''"><ion-icon name="ios-send" style="zoom:2.0;"></ion-icon></button>
</ion-buttons>
</form>
</ion-footer>
but now the microphone comes in a different row which is above the input box and send button.