Changing the placeholder text dynamically

user_13818157 0
Viewed 942

I have a problem with the placeholder from ion-input. I want to change the placeholder when a checkbox is checked when when nothing is checked to display it again. Some of my code :

placeholderText = "Write something";
 <ion-input
          name="search"
          type="search"
          ngModel
          [placeholder]="placeholderText"
          #searchCtrl="ngModel"
       ></ion-input>

 dummyArray: { name: string; x: string; checked: boolean }[] = [
    {
      name: "a",
      x: "grg",
      checked: false,
    },
    {
      name: "b",
      phone: "ggg",
      checked: false,
    },
].  This is a dummy date array of objects.
    <ion-list *ngFor="let dummy of dummyArray">
      <ion-label> {{dummy.name}}</ion-label>
      <ion-checkbox></ion-checkbox>
    </ion-list>

What I need is to change the placeholderText if someone is checked from the checkbox to have an empty string placeholder and if no one is checked to display the text.

How can I achieve this , please help

Thanks

ionic-framework angular logic placeholder javascript
1 Answers

Ionic CheckBox has an Event ionChange - Emitted when the checked property has changed. We need to check and update the placeholders value whenever checkbox changes.

Create placeHolder as variable and update it whenever the checkBox changes

# Component HTML File
<ion-checkbox slot="end" [(ngModel)]="checkBoxValue" 
 (ionChange)="checkBoxChangeHandle($event)"></ion-checkbox>
<ion-input [placeholder]="dynamicPlaceholder"></ion-input>

# Component.ts
export class AppComponent implements OnInit {

  dynamicPlaceholder: string = "write Something"
  checkBoxValue:boolean = false
  constructor(){}
  ngOnInit(){}

  checkBoxChangeHandle(checkValue) {
     this.dynamicPlaceholder = checkValue ? "": "Write Something";
  }
}

Hope this works..

user_96401280
Related