How to use UI Components of Ionic Angular

2019-10-092019-10-21

Ionic UI Components are amazing and are so many varieties one. In many cases, you can use components along with the official documentation. But in documentation, it includes contents that are lack of detail or are difficult to understand for me.
So this article is about Ionic UI Components and relevant way to mark up. TBA.

ion-slides

The slide UI is often used. It’s especially important to get a selected index that of displayed slide.

test.page.html

<ion-slides #slides [options]="slideOpts" (ionSlideDidChange)="slideDidChange($event)">
    <ion-slide>1</ion-slide>
    <ion-slide>2</ion-slide>
</ion-slides>

test.page.ts

import {
  Component, ViewChild
} from '@angular/core';
import {IonSlides} from "@ionic/angular";

@Component({
})
export class TestPage {
  @ViewChild('slides', { static: true }) slider: IonSlides;
  slideOpts = {
    initialSlide: 0,
    speed: 400
  };

  constructor() { }

  slideNext() {
    this.slider.slideNext();
  }
  slidePrev() {
    this.slider.slidePrev();
  }
  // Get selected slide index
  async slideDidChange(event) {
    const i = await this.slider.getActiveIndex()
  }
}

ion-picker

Call showPicker to show up a picker. Especially, take care for how to set a default value to picker.
app.component.ts

import { PickerController } from '@ionic/angular';
export class AppComponent {

  constructor(private pickerCtrl: PickerController) {}
  async showPicker() {
    let opts = {
      buttons: [
        {
          text: '',
          role: 'cancel'
        },
        {
          text: 'OK'
        }
      ],
      columns: [
        {
          name: 'number',
          selectedIndex: 0, // set index of default value
          options: [
            { text: '1', value: 1 },
            { text: '2', value: 2 },
            { text: '3', value: 3 }
          ]
        }
      ]
    };
    let picker = await this.pickerCtrl.create(opts);
    picker.present();
    picker.onDidDismiss().then(async data => {
      let col = await picker.getColumn('number');
      console.log(col.selectedIndex) // selected index
    });
  }
}

fill_parent

The way of filling width or height, for example “match_parent" or “fill_parent" in Android, and operation with storyboard in iOS, does not exist in ionic HTML/CSS.
For example the following. Need to set “second" height for the rest of the screen height.

app.component.html

<ion-content>
    <div class="first">first</div>
    <div class="second">second</div>
</ion-content>

app.component.scss

.first {
    height: 50px;
}
.second {
    height:calc(100vh - 50px);
}

But that way is based on that “first" height is not variable and other element doesn’t exist.
If you want to fill the variable height, the following is a good way.
app.component.scss

ion-content {
  --overflow: hidden;
}
.first {
    height: 50px;
}
.second {
    padding-bottom: 9999px;
    overflow: hidden;
}

It set “second" height a value that is absolutely over parent size with huge padding, and disable scrolling. This might be an unreasonable way.

Color of ion-item

If you want to change border color or background color of ion-item, add the following to css.

ion-item {
  --ion-background-color:#fff;
  --border-color: #fff;
}