Monat: Februar 2017

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.