CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic3
Ricardo Alves
Ricardo Alves

Reputation: 77

Ionic 3 toolbar button won't change from outline to solid

I'm trying to change a button on the toolbar in Ionic 3 from Outline to Solid dynamically but I'm not able to.

My HTML code is the following:

<ion-toolbar>
  <ion-buttons end>
    <button ion-button 
    [outline]="testButtonOutline" 
    [color]="testButtonColor" 
    [solid]="testButtonSolid" 
    (click)="testMode()">
      {{testModeLabel}}
    </button>
  </ion-buttons>
  <ion-title left>Choose alert</ion-title>
</ion-toolbar>

My .TS function is:

testMode() {
  if (this.testModeState == false) {
    this.testModeLabel = 'Test Mode: On';
    this.testModeState = true;
    this.testButtonColor = 'primary';
    this.testButtonOutline = false;
    this.testButtonSolid = true;
  }
  else {
    this.testModeLabel = 'Test Mode: Off';
    this.testModeState = false;
    this.testButtonColor = 'Grey';
    this.testButtonOutline = true;
    this.testButtonSolid = false;
  }
}

it seems that [outline] gets overridden when I introduce the [solid]="testButtonSolid" option even if [solid] is set to false.

Upvotes: 2

Views: 450

Answers (1)

Sampath
Sampath

Reputation: 65860

The problem here is the outer <ion-buttons end> button. You need to remove it.If you have any issue to align the buttons then you can use the ionic grid.And you don't need to give the solid since it is the default.

<button ion-button [outline]="testButtonOutline" [color]="testButtonColor" (click)="testMode()">
        {{testModeLabel}}
</button>

Working stackblitz

Upvotes: 2

Related Questions