Firebase: Werte auslesen ohne .subscribe()

Bei der Arbeit mit Firebase werden Werte i.d.R. via .subscribe() ausgelesen. Das hat allerdings den Nachteil, dass jedesmal die Zeilen innerhalb von .subscribe() neu ausgeführt werden, wenn sich die Werte in Firebase geändert haben.

Möchte man nur einmalig Werte auslesen, kann man bei der Definition des Observables mit der Funktion take() arbeiten.

Beispiel:

let myFirebaseObservable: Observable<any> = this.angularfireService.database.object('firebasenode').take(1);
myFirebaseObservable( snapshot => {
   console.log( snapshot.$value );
});

Automatische Erstellung URL-freundlicher Strings

Wer gerne on-the-fly URL-freundliche Strings erstellen möchte (aka „slugify„), der kann sich folgender Pipe bedienen:

/**
 * Create user friendly and URL valid name of the category name.
 * Source: https://gist.github.com/mathewbyrne/1280286
 */

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'slugify'})
export class SlugifyPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if( value == '' ) {
      return value;
    } else {
      return value.toString().toLowerCase()
          .replace(/\s+/g, '-')           // Replace spaces with -
          .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
          .replace(/\-\-+/g, '-')         // Replace multiple - with single -
          .replace(/^-+/, '')             // Trim - from start of text
          .replace(/-+$/, ''); // Trim - from end of text
    }
  }
}

Das Original (=der JS-Aufruf) findet ihr hier: https://gist.github.com/mathewbyrne/1280286

[UPDATE]
Um deutsche Sonderzeichen zu beachten könnt ihr die Rückgabe wie folgt erweitern:

      return value.toString().toLowerCase()
          .replace(/ä/g, 'ae')             // Replace ä with ae
          .replace(/ö/g, 'oe')             // Replace ö with oe
          .replace(/ü/g, 'ue')             // Replace ü with ue
          .replace(/ß/g, 'ss')             // Replace ß with two s
          .replace(/\s+/g, '-')           // Replace spaces with -
          .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
          .replace(/\-\-+/g, '-')         // Replace multiple - with single -
          .replace(/^-+/, '')             // Trim - from start of text
          .replace(/-+$/, ''); // Trim - from end of text

[/UPDATE]

Limit auf ngFor anwenden

Wer eine Reihe an Daten mit *ngFor ausliest und „on the fly“ die Daten bereits filtern möchte (z.B. um nur eine bestimmte Menge anzuzeigen), der kann die filter-Methode einsetzen:

Beispiel-Daten (sportsdata.ts):

export default [
    {
        id: 1,
        name: 'Fussball'
    },
    {
        id: 2,
        name: 'Beachvolleyball'
    },
    {
        id: 3,
        name: 'Eishockey'
    },
    {
        id: 4,
        name: 'Volleyball'
    },
]

Komponente:

import { Component, OnInit } from '@angular/core';
import Sportsdata from "sportsdata.ts";

@Component({
  selector: 'my-component',
  templateUrl: './sportsdata.component.html',
})
export class SportsdataComponent implements OnInit {
    sportsdata: {id: number, name: string}[]

    constructor() { }

    ngOnInit() {
        this.sportsdata = Sportsdata;
    }

    public getSportsdata(begin: number, end: number) {
        begin = begin - 1;
        end = end - 1;
        return this.sportsdata.filter((item, index) => index >= begin && index <= end )
    }
}

Template:

<div *ngFor="let sportdata of getSportsdata(1,2)">
    {{ sportdata.name }}
</div>
<hr>
<div *ngFor="let sportdata of getSportsdata(3,4)">
    {{ sportdata.name }}
</div>

Angular 4 kommt im März

Ab März 2017 steht Angular 4 zur Verfügung. Allerdings wird es dann offiziell nur noch als „Angular“ bezeichnet. Die Versionsnummer werden dann, wie es von anderen Sprachen bereits bekannt ist, nach dem System der semantischen Versionierung (SEMVER) vergeben. Das bedeutet, dass zukünftig Major-, Minor- und Patch-Versionen bzw. Releases geben wird. Bei Major-Version kann es dann z.B. auch zu fehlender Abwärtskompatibilität kommen. Minor- und Patch-Releases sollten davon ausgeschlossen sein.

Warum offiziell Angular 4 ab März? angularjs.de gibt dazu folgende Antwort:
Alle Angular Pakete befinden sich in einem Git-Repository. Alle Core-Pakete sind in der Major Version 2, nur der Router ist in Version 3. Um dies zu beheben wird der nächste Breaking Change alle Versionen auf Major Version 4 ziehen, damit werden alle Pakete innerhalb von Angular ab diesem Zeitpunkt einheitlich nach SEMVER behandelt.
Quelle: angularjs.de

Custom Pipe: Deutsches Währungsformat

Standardmässig bietet Angular 2 mit der Curreny Pipe eine Möglichkeit, numerische Werte in ein entsprechendes Währungsformat zu verwandeln. Der (m.M.n) große Nachteil liegt allerdings darin, dass zum einen das Währungskürzel fest vor den jeweiligen Betrag gesetzt wird (oder eben gar nicht angezeigt). Zum anderen bleibt als Dezimaltrenner weiterhin der Punkt bestehen, anstelle des in Deutschland üblichen Kommas.
Mit einer entsprechenden (einfachen) Custom Pipe kann dem allerdings entgegen gewirkt werden:
customcurrency.pipe.ts:

import { PipeTransform, Pipe } from "@angular/core";
import { isNumeric } from "rxjs/util/isNumeric";

@Pipe({name: 'customcurrency'})
export class CustomcurrencyPipe implements PipeTransform {
    transform(value: string, currencySymbol: string): any {

        // Cast to float and make it 2 decimal places, set the currency symbol and replace . with ,
        var numberValue = parseFloat(value).toFixed(2);
        numberValue = numberValue.replace(/\./g, ",");
        numberValue = numberValue + " " + currencySymbol;

        return numberValue;
    }
}

Template:

{{ shippingCosts | customcurrency: '€' }}

Und das war’s!
ps: Vergesst nicht die CustomcurrencyPipe Klasse in app.module.ts (unter „declaration“) zu registrieren, damit die Pipe global in der App genutzt werden kann.

Selektoren

Ein Selektor sollte immer unique sein. Tags wie z.B. „<other>“ sollten nicht genutzt werden, da es sehr allgemein ist und in der Zukunft ggf. ein Standard-Tag von Angular, HTML oder anderen Dritt-Party-Packages werden könnte. Da dies zu verschiedenen Problemen führen würden, bietet es sich an einen Prefix für die Anwendung festzulegen und diesen überall voranzustellen: <myApp-other> (oder kürzer: <ma-other>)

Neue Komponente anlegen

Zum Anlegen neuer Komponenten empfiehlt es sich auf die angular cli zurückzugreifen.
Mit dem Befehl

ng generate component <NAME>

wird die Komponente in einem neuen Ordner angelegt, inkl. aller notwendiger Dateien (.ts, .html, .css und .spec.ts).

Zusätzlich wird die Komponente automatisch im Modul (app.module.ts) importiert und damit automatisch anderen Komponenten zur Verfügung gestellt.

Die Befehle (generate, component, …) können auch abgekürzt werden:
generate => g
component => c

Wer keinen extra Unterordner und sowohl das CSS als auch das Template inline erstellen möchte, kann auf folgenden Befehl zurück greifen:

ng g c —flat —inline-style —inline-template

—flat => kein Unterodner
—inline-style (Abkürzung: -is) => inline CSS
—inline-template (Abkürzung: -it) => inline Template