Switch between 2 values in a class [closed]

Question

I want to switch between 2 values in a class.

Something like this,

<ion-item *ngFor="let part of partner" class="border_bottom bdr_radius">
<p class="font_c_2 gra_reg" #short (click)="onShowHide(short)" [ngStyle]="{'white-space': whiteSpace}">
  {{part.fsp_partner_location}} 
</p>
</ion-item>

public onShowHide(controlToShow) {

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

}

Above code is throwing an error: "white is not defined"

I know my format is not correct, any help will be appreciated.

Thanks

Answer 1

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"> 
<p class="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

Answer 2

Try this one

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

Answer 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>
    <button ion-button item-right color="light" (click)="onSwitch(text)">Switch Primary / Danger</button>
    <button ion-button item-right (click)="onPrimary(text)">Set Primary</button>
    <button ion-button color="danger" item-right (click)="onDanger(text)">Set Danger</button>
  </ion-item>

TS

  public items: 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) { }

  public onSwitch(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');
    }

  }
  public onPrimary(control) {
    this.render.addClass(control, 'primary');
  }
  public onDanger(control) {
    this.render.addClass(control, 'danger');
  }

Otherwise, use the one of the other answers