Kategorien
Ionic 4

Ionic 4 – prevent pulltorefresh – effect on iOs

to use with <ion-refresher>.

<ion-contenct [scrollY] = "false">
.
.
.
</ion-content>
Kategorien
Ionic 4

Sliding Items schließen

Mit <ion-sliding-item> können in einer Liste Items dargestellt werden, bei denen über Slide Funktionen für das Item eingeblendet werden können.
Das Problem dabei ist, dass diese nach Ausführen der Funktion nicht automatisch wieder geschlossen werden.
Um dies zu erreichen kann man einfach eine Referenz auf die Liste einrichten um dann über diese Referenz die Methode closeSlidingItems() auzurufen.

.
.
.
<ion-list #listReference>
   <ion-item-sliding *ngFor="let item of items">
       <ion-item-options side="start">
          <ion-item-option (click)="onEdit(item._id)">
              Edit
          </ion-item-option> 
       </ion-item-options> 
   </ion-item-sliding>
</ion-list>
.
.
.
import {IonList} from '@ionic/angular';
.
.
.
onSlideAction() {
   doSomething();
   this.listReference.closeSlidingItems();
}

Kategorien
Angular

Shared Module

Um Komponenten in Angular wiederverwenden zu können, ist es früher oder später notwendig ein „shared Module“ zu erstellen. Grundsätzlich eine ganz einfach Aufgabe.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TagsComponent } from './tags/tags.component';
import { IonicModule } from '@ionic/angular';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [TagsComponent],
  imports: [
    CommonModule,
    IonicModule,
    ReactiveFormsModule
  ],
  exports: [TagsComponent, IonicModule, ReactiveFormsModule]
})
export class SharedModule { }

Hier am Beispiel einer Komponente zur Erstellung von Tags in einem Formular in Ionic4.
Wichtig dabei ist, unter imports auch alle von der Komponente benötigten Module zu importieren und auch unter exports wieder zu exportieren.

Jetzt muss das shared-Module nur noch im gewünschten „Zielmodul“ importiert werden und die Komponente kann verwendet werden.
Sind in einem Shared Module mehrere Komponenten enthalten, bietet sich an bei declarations und exports den Spread-Operator zu verwenden um doppelte Schreibarbeit zu vermeiden.

const modules = [TagsComponent]
.
.
.
@NgModule({
  declarations: [...modules],
  imports: [
    CommonModule,
    IonicModule,
    ReactiveFormsModule
  ],
  exports: [...modules, IonicModule, ReactiveFormsModule]
})
.
.
.