Switch Between 2 Values In A Class

I want to switch between 2 values in a class. Something like this,

Solution 1:

Try this one

this.render.setStyle(controlToShow, white-space=='normal' ? 'nowrap' : 'normal');

Solution 2:

Now when I know your code this is what I will do :

HTML part:

<ion-item *ngFor="let part of partner; let i=index"class="border_bottom bdr_radius"><pclass="font_c_2 gra_reg" #short (click)="onShowHide(i)" [ngClass]="{'long': selected === i, 'short': selected != i}"> 
{{part.fsp_partner_location}} 
</p></ion-item>

css part:

.long {
    white-space: normal;
}
.short{
        white-space: nowrap;
}

your ts file:

selected = 0;

onShowHide(index: number) {
   this.selected = index;
}

When you click on item it will set normal for it and others will have nowrap

Solution 3:

To do it on click event, just set and event handler and pass the control. then chech which is your current class and apply the logic you want to apply a new one

Demo here

HTML

<ion-item *ngFor="let item of items"><h3 #text>{{item}}</h3><buttonion-buttonitem-rightcolor="light" (click)="onSwitch(text)">Switch Primary / Danger</button><buttonion-buttonitem-right (click)="onPrimary(text)">Set Primary</button><buttonion-buttoncolor="danger"item-right (click)="onDanger(text)">Set Danger</button></ion-item>

TS

publicitems: string[] = [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
    "Item 7",
    "Item 8",
    "Item 9",
    "Item 10",
  ];

  constructor(public navCtrl: NavController, private render: Renderer2) { }

  publiconSwitch(control) {
    if(control.classList.contains('primary')){
      this.render.removeClass(control, 'primary');
      this.render.addClass(control, 'danger');
    }
    else{
      this.render.removeClass(control, 'danger');
      this.render.addClass(control, 'primary');
    }

  }
  publiconPrimary(control) {
    this.render.addClass(control, 'primary');
  }
  publiconDanger(control) {
    this.render.addClass(control, 'danger');
  }

Otherwise, use the one of the other answers

Share