Ionic Item Divider Example

Alfabetik sıralamaların olduğu rehber, online form gibi uygulamalarda sıklıkla kullanılan ve işlevselliği ile kullanıcıya kolaylık sağlayan bir konuyu bugün gerçek verilerin olduğu bir örnekle adım adım anlatmaya çalışacağım.

Gerçek verileri firebase Realtime Database’ de tutacağım.

Firebase Entegrasyonu’ nu Angular 7 & Firebase Entegrasyonu başlıklı yazımda anlatmış olduğum için anlatmayacağım.

Ülkelerin bayrak görselleri için flag-icon-css kaynağını kullanacağım.

1. Projemizi oluşturuyoruz.
2. Firebase için gerekli modülleri indiriyoruz. (Bu adım şart değil ben gerçek verileri Realtime Database ortamında bulundurduğum için kullandım siz verileri direkt projeniz içerisindeki bir dosyada tutup ordan okuyabilirsiniz.)
3. Firebase için gerekli entegrasyonları yapıyoruz. (2. Maddede firebase kullananlar için gerekli)
4. flag-icon-css adresinden kullanacağımız dosyaları .rar’ dan çıkarıp klasör olarak direkt assets klasörünün içine kopyalıyoruz.
5. index.html sayfamızın head tagları arasında flag-icon-css .css dosyasının yerini belirtiyoruz. <link rel="stylesheet" type="text/css" href="assets/flag-icon-css-master/css/flag-icon.min.css"/>
6. Son olarak da dilleri listeleyeceğimiz sayfamızın tasarlamasını ve kodlamasını yapıyoruz.

languages.page.html

<ion-header>
  <ion-toolbar color="light">
    <ion-title>LanguageS</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list lines="none">
    <ion-item-group *ngFor="let a of allLanguages">
      <ion-item-divider *ngIf="a?.letter == true">
        <ion-label>{{a?.name | uppercase}}</ion-label>
      </ion-item-divider>
      <ion-item *ngIf="!a?.letter">
        <div class="flag-icon flag-icon-{{a?.countryCode}} flag-icon-squared" style="margin-right: 1em; height: 24px; width: 24px; border: 1px solid #888;">&nbsp;
        </div>
        <ion-label text-wrap>
          <ion-text color="primary">
            <h2 [innerHTML]="a?.languageName | titlecase"></h2
          </ion-text>
          <ion-text color="secondary">
            <p [innerHTML]="a?.countryName"></p>
          </ion-text>
        </ion-label>
        <ion-checkbox color="dark" slot="end" [value]="a?.languageCode"></ion-checkbox>
      </ion-item>
    </ion-item-group>
  </ion-list>
</ion-content>

language.page.ts

...
import { AngularFireDatabase } from "@angular/fire/database";
@Component({
  selector: 'app-languages',
  templateUrl: './languages.page.html',
  styleUrls: ['./languages.page.scss']
})
export class LanguagesPage implements OnInit {
  allLanguages: any[];
  constructor(private _db : AngularFireDatabase) {}
  ngOnInit() {
    this.getAllLanguages().then((p : any) => {
      this.allLanguages =
this.divider(this.sort(p,'languageName'),'languageName');
    }).catch(err => console.log(err));
  }
  getAllLanguages(){
    return new Promise((res,rej) => {
      this._db.database.ref().once('value').then(ss => {
        res(ss.val())
      }).catch(e => {
        rej(e);
      });
    });
  }
  divider(arr : any[],param : string) {
    let list : any[] = [];
    let lastChar : string = '';
    for (var i = 0, len = arr.length; i < len; i++) {
      var item = arr[i];
      if (item[param].charAt(0) != lastChar) {
        list.push({ name: item[param].charAt(0), letter: true });
        lastChar = item[param].charAt(0);
      }
    list.push(item);
    }
    return list;
  }
  sort(arr : any[], param : string) : any[]{
    return arr.sort((a,b) => {
      if(a[param] > b[param]){
        return 1;
      }else if (a[param] < b[param]) {
        return -1;
      }else{
        return 0;
      }
    });
  }
}

Kendi projenizden beni oluşturmuş olduğum languages json datası’ na erişebilmeniz için alternatif getAllLanguages Metodu. (Kendi kullanmış olduğum gerçek veriler.)

getAllLanguages() {
  const dbRef = this._db.database.app
  .database('https://mediumtoprak.firebaseio.com/');
  return new Promise((res, rej) => {
    dbRef.ref().once('value').then(ss => {
      console.log(ss.val());
      res(ss.val());
    }).catch(e => {
      rej(e);
    });
  });
}

Umarım “Acaba nasıl yapılıyor?” sorusuna cevap niteliğinde bir yazı ele almışımdır. Anlatılmaya değer bulduğum başka bir yazımda görüşmek üzere.