Conditioan Appearance of Ionic Icons

Question

can you please describe me how to change Ionic icon on conditioanal basis I want 'man' icon if gender is Male and 'woman' icon if gender is femal for example:

Answer 1

So ionic icons have icons like that:

<ion-icon name="man"></ion-icon>
<ion-icon name="woman"></ion-icon>

Source: https://ionicframework.com/docs/ionicons/

to make this conditional you need to create a binding from your template to a variable that defines if its "man" or "woman":

<ion-icon [name]="variableThatDefinesGender"></ion-icon>

Then in your ts file for the template you can assign relevant value (man or woman). Pseudo code below:

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

@Component({
  selector: 'page-some',
  templateUrl: 'some.html'
})
export class SomePage {

  variableThatDefinesGender: string;

  constructor(
  ) {
    // initial value:
    this.variableThatDefinesGender = "woman";
  }

  someMethod(condition) {
      if (condition === "woman") {
          this.variableThatDefinesGender = "woman"
      } else {
          this.variableThatDefinesGender = "man"
      }
  }

}