Hi, I have an array (will get from server). I am able to show the data. but whenever the user clicked on reply icon it needs to show input field for clicked data icon, but It is showing all input fields for all data and I need to send a same entered text to the server, so please help me. Please check image for your reference
<div *ngFor="let message of messages">
<div *ngFor="let mes of message let i = index" style="padding-left: 1px;padding-right: 10px;">
<ion-card class="category-concept-card card-left-brd" style="background:white;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);margin: 5px !important;"
>
<ion-card-content style="border-radius : 5px;margin-left: 5px;font-size: 0.9em;">
<div [innerHTML]="mes.msg" class="category-description" style="color:rgb(27, 12, 236)"></div>
<ion-row align-items-center style="margin-left: -7px;">
<ion-col size="7" size-lg offset="7">
<p class="category-description" style="color:rgb(27, 12, 236)" >
{{mes.createdOn| date :'medium'}}
</p>
</ion-col>
<ion-col size="3" size-md offset="3" class="col-badges">
<ion-badge center (click)="reply(mes.refId,index)" class="mrg-bdg "><ion-icon class="fnt-sth" name="undo"></ion-icon></ion-badge>
<!-- <ion-badge center (click)="forward(mes.refId,index)" class="mrg-bdg "><ion-icon class="fnt-sth" name="redo"></ion-icon></ion-badge> -->
<ion-badge center (click)="include(mes.refId,index)" class="mrg-bdg "><ion-icon class="fnt-sth" name="add"></ion-icon></ion-badge>
<!-- <ion-badge center (click)="scheduleMeeting(mes.refId,index)" class="mrg-bdg "><ion-icon class="fnt-sth" name="clock"></ion-icon></ion-badge>
<ion-badge center (click)="approveTask(i,'Include Persons')" class="mrg-bdg "> <ion-icon class="fnt-sth" name="document"></ion-icon></ion-badge> -->
</ion-col>
</ion-row>
<app-expandable expandHeight="200px" [expanded]="tetraId==mes.refId">
<div style="margin-top: -13px;">
<ion-item [hidden]="!replyClicked" style="padding-left: 0px;">
<ion-label style="color:rgb(27, 12, 236);font-size: 14px;margin-top: 8px;">Reply</ion-label>{{mes.msgTo}}
<ion-select placeholder="Select" style="color:rgb(27, 12, 236);margin-left: -100px; margin-right: 60%;
font-size: 0.9em;">
<!-- <ion-option *ngFor="#user of usersList" [value] = "user.id" [checked]="false">{{user.id}}</ion-option> -->
</ion-select>
<!-- <ion-label style="color:rgb(27, 12, 236);font-size: 14px;">Include</ion-label> -->
<!-- <ion-option *ngFor="#name of namesList" [value] = "name.shortName" [checked]="false">{{name.shortName}}</ion-option> -->
</ion-item>
<ion-item [hidden]="!includeClicked">
<ion-label style="color:rgb(27, 12, 236);font-size: 14px;">Include</ion-label>
<ion-select placeholder="Select" value="brown" okText="Okay" cancelText="Dismiss">
<!-- <ion-option *ngFor="#name of namesList" [value] = "name.shortName" [checked]="false">{{name.shortName}}</ion-option> -->
</ion-select>
</ion-item>
</div>
<div class="input-wrap" style="margin-top: 0px; margin-left: 0px;font-size: 13px;">
<input type="text"
placeholder="Text Input"
[(ngModel)]="editorMsg"
maxlength="500"
(keyup.enter)="sendMsg(index)" (input)='onInputTime($event.target.value)' (ionChange)='onChangeTime($event.target.value)'
style="width: 87%;border: 1px solid #ccc;border-radius: 20px;text-align: left;height: 40px;padding-left: 15px;padding-right: 15px;">
<button ion-button clear icon-only item-right (click)="sendMsg(mes)" style="margin-top: -9px; background: #427feb;
color: #fff;
border-radius: 50%;
height: 35px;
width: 35px;
font-size: 10px;
padding-right: -7px;
padding-left: 4px;
padding-top: 0px;
">
<ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon>
</button>
</div>
</app-expandable>
</ion-card-content>
</ion-card>
</div>
</div>
