Question 316314 in Html Question posted in
Some basic documentation can be found here.

Html – Ionic 7 with Angular makes only UI changes when Debbuger ist runing

I have an ion-select which should contain an ion-icon at the end. The icon should change depending on whether the ion-select is open or closed.
Problem:
My icon changes correctly when the ion-select is open but no longer when the ion-select is closed. Strangely enough, when I debug the behaviour, the ion-icon changes correctly both when closing and opening.

<ion-list lines="none">
      <ion-list-header class="header">{{'category' | translate }}</ion-list-header>
      <ion-item>
        <ion-select placeholder="{{'categoryFilter' | translate }}" interface="popover" (ionFocus)="setToggleIcon()" (ionDismiss)="setExpandIcon()" >
          <ion-select-option  *ngFor="let category of [1,2,3]; index as i">Apfel {{i}}</ion-select-option>
        </ion-select>
        <ion-icon class="toggleIcon" name="{{toggleIcon}}"></ion-icon>
      </ion-item>
      <hr class="border">
      </ion-list>



@Component({
  selector: 'app-maintenance-list',
  templateUrl: './maintenance-list.component.html',
  styleUrls: ['./maintenance-list.component.scss'],
})
export class MaintenanceListComponent  implements OnInit {
  protected toggleIcon:string = "chevron-down-outline";
  constructor() {
  }
  ngOnInit() {}

  setToggleIcon(): void {
    this.toggleIcon = 'chevron-up-outline';
  }

  setExpandIcon(){
    this.toggleIcon ="chevron-down-outline"
  }
}

Thank you for your help

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have adapted the method so that it always changes the icon to the opposite. So everything works correctly. HTML:

    <ion-list lines="none">
      <ion-list-header class="header">{{'category' | translate }}</ion-list-header>
      <ion-item>
        <ion-select placeholder="{{'categoryFilter' | translate }}" interface="popover" (ionFocus)="setToggleIcon()" (ionCancel)="setToggleIcon()" >
          <ion-select-option  *ngFor="let category of [1,2,3]; index as i">Apfel {{i}}</ion-select-option>
        </ion-select>
        <ion-icon class="toggleIcon" name="{{toggleIcon}}"></ion-icon>
      </ion-item>
      <hr class="border">
      </ion-list>

    TS:

    export class MaintenanceListComponent  implements OnInit {
toggleIcon:string = "chevron-down-outline";
  constructor() {
  }
  ngOnInit() {}

  setToggleIcon(): void {
    if(this.toggleIcon === 'chevron-up-outline'){
      this.toggleIcon = 'chevron-down-outline';
    }else{
      this.toggleIcon = 'chevron-up-outline';
    }
  }
}

  2. 0

    OK below are the two things I noticed.

    1. the property toggleIcon is protected, when it should be public since its used in the HTML and needs to be used outside the class!

    2. You can try using ionBlur intead of ionDismiss, when I changed that it started working fine!

    ion select docs

    html

    <ion-list lines="none">
  <ion-list-header class="header">{{ 'category' }}</ion-list-header>
  <ion-item tabindex="1">
    <ion-select
      placeholder="{{ 'categoryFilter' }}"
      interface="popover"
      (ionFocus)="setToggleIcon()"
      (ionBlur)="setExpandIcon()"
    >
      <ion-select-option *ngFor="let category of [1, 2, 3]; index as i"
        >Apfel {{ i }}</ion-select-option
      >
    </ion-select>
    <ion-icon class="toggleIcon" name="{{ toggleIcon }}"></ion-icon>
  </ion-item>
  <hr class="border" />
</ion-list>

    ts

    import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public toggleIcon: string = 'chevron-down-outline';
  constructor() {}
  ngOnInit() {}

  setToggleIcon(): void {
    this.toggleIcon = 'chevron-up-outline';
  }

  setExpandIcon() {
    this.toggleIcon = 'chevron-down-outline';
  }
}

    stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search