Search code examples
angularionic-frameworkangular5ionic4

Ionic 4 and Angular 5 ion-buttons color and attributes not working


I'm using ionic 4 and angular 5 and for some reason the Press Button ion-buttons element below is not setting color or any attributes to the button and I have tried the two ways I know to set color, however nothing is working?

<ion-row>
      <ion-col col-12>
        <ion-card>
          <ion-card-header>
            <h1>Companies</h1>
          </ion-card-header>
          <ion-card-content>
            <ion-row>
              <ion-col col-md-4>
                <ion-label>Comp</ion-label>
                <ion-select [(ngModel)]="filter_data_quick_sector" multiple="true" interface="popover"
                      (ionChange)="quickSearch()">
            <ion-option *ngFor="let sector of sectors" value="{{ sector }}">{{ sector }}</ion-option>
          </ion-select>
              </ion-col>
              <ion-col col-md-4>
                <ion-label>Country</ion-label>
                <ion-select [(ngModel)]="filter_data_quick_country" multiple="true" interface="popover"
                      (ionChange)="quickSearch()">
            <ion-option *ngFor="let country of countries" value="{{ country }}">{{ country }}</ion-option>
                </ion-select>
              </ion-col>
              <ion-col col-md-4>
                <ion-label>Investment</ion-label>
                <ion-select [(ngModel)]="filter_data_quick_investment_type" multiple="true" interface="popver"
                      (ionChange)="quickSearch()">
            <ion-option *ngFor="let investment_type of investment_types" value="{{ investment_type }}">{{
              investment_type }}
            </ion-option>
          </ion-select>
            **<ion-row text-right>
                <ion-col col-md-6 offset-1="">
                  <ion-buttons slot="primary" fill="solid" style="--background:blue" size="small">
                    Press Button
                  </ion-buttons>
                </ion-col>
              </ion-row>**
              </ion-col>
            </ion-row>
            <ion-row>

Solution

  • Just realised I should have placed the ion-button attribute in a button element wrapped in an ion-buttons element for the version of angular and ionic I'm using like so:

          <button ion-button slot="" offset-2="">Apply</button>
        </ion-buttons>```