Αυτό το άρθρο είναι για έκδοση της Angular 4 και μετά

Θα βρείτε σημειώσεις, τον οδηγό γραμμένο και τον κώδικα στη συνέχεια κάτω από το βίντεο.

Σε αυτόν τον οδηγό θα παρουσιάσουμε μία δυνατότητα που προστέθηκε στην Angular 4. Αυτή βελτιώνει την σύνταξη της ngIf έτσι ώστε να μπορούμε να παίρνουμε πολύ πιο εύκολα ασύγχρονα δεδομένα.

Συνήθως στις εφαρμογές που φτιάχνουμε με Angular χρησιμοποιούμε Observables και την βιβλιοθήκη RxJS για να διαχειριστούμε τα ασύγχρονα δεδομένα. Ως επί των πλείστον δουλεύουμε με το Http service της Angular το οποίο επιστρέφει Observable.

Παρακάτω θα φτιάξουμε ένα Observable για να προσομοιώνουμε ένα call σε ένα αργό API.

Ας ξεκινήσουμε όμως εγκαθιστώντας το angular cli για να φτιάξουμε εύκολα την εφαρμογή μας. Αν γνωρίζεται πως δουλεύουμε με το cli της Angular μπορείτε να προχωρήσετε παρακάτω.

Υποθέτουμε πως έχουμε εγκατεστημένο το nodejs

Γράφουμε

Κατόπιν γράφουμε

Αυτή η εντολή θα φτιάξει έναν φάκελο angular-async-ngif-ngelse και θα μας δώσει όλα τα αρχεία που χρειαζόμαστε για να ξεκινήσουμε την εφαρμογή.
Μεταφερόμαστε στον φάκελο με

και τρέχουμε την εντολή

Ανοίγουμε τον browser στην διεύθυνση http://localhost:4200/ και αν όλα έχουν πάει καλά θα δούμε το μήνυμα “App works”
Η παράμετρος --ng4 λέει στο angular cli ότι θέλουμε την έκδοση 4 της Angular καθώς την στιγμή που γράφετε αυτό το άρθρο η Angular 4 είναι σε RC1.

Ας φτιάξουμε τώρα ένα service που θα μας παρέχει το ψεύτικο api μας.

Αυτό θα δημιουργήσει το αρχείο trivia.service.ts
Γράφουμε:

Με αυτό το service και την συνάρτηση getQuestion επιστρέφουμε Observable με ένα object ερώτησης και με καθυστέρηση 2 δευτερολέπτων.

Κάνουμε import το service στο app.module.ts

και το προσθέτουμε στου providers

Τώρα μπορούμε να ζητήσουμε το service από το dependecy injector μέσα στο app.component.ts γράφοντας απλά στον consturctor

Ας καλέσουμε λοιπόν το service που μας επιστρέφει ένα observable που περιέχει το question object για να το περάσουμε στο template. Παρακάτω βλέπουμε το app.component.ts

Με την μέθοδο ngOnInit λέμε στην Angular όταν κάνει render το component να πάρει την ερώτηση από το service και να την βάλει στην μεταβλητή question$

Για να βάλουμε την μεταβλητή question$ στο template χρησιμοποιούμε το async pipe της Angular. Το async pipe θα κάνει αυτόματα subscribe αλλά και unsubscribe στο Observable question$. Για να δούμε το app.template.html

Ας μείνουμε λίγο σε αυτήν τη σύνταξη. Έχουμε το question$ | async για κάθε property του question$. Επίσης χρησιμοποιούμε και το elvis operator ? πάλι για κάθε property. Το elvis operator παίρνει το property μόνο όταν είναι έτοιμο το object. Εν προκειμένω το question$.
Όπως βλέπουμε αυτή η σύνταξη δεν είναι και το καλύτερο. Εδώ έρχεται η ngElse για να μας βοηθήσει.

NgIf και NgElse

Αυτό που θέλουμε να κάνουμε είναι να χρησιμοποιήσουμε το async pipe μόνο μία φορά. Για να δούμε τώρα το νέο app.template.html

Για να το μελετήσουμε τώρα κομμάτι κομμάτι.

Καταρχάς έχουμε το γνωστό μας *ngIf σε συναδιασμό με το async pipe για να δείξουμε αυτό το div μόνο όταν έχει φορτωθεί το question$
Μετά έχουμε το let user μέσα στο *ngIf. Εδώ δημιουργούμε μία μεταβλητή που η Angular θα της περάσει τα δεδομένα του Observable. Δηλαδή το question object. Αυτό μας επιτρέπει να χρησιμοποιούμε το object μας χωρίς να επαναλαμβάνουμε το async pipe.

Το τελευταίο κομμάτι else loading λέει στην Angular ότι μέχρι να έχουμε το object μας να μας δείξει αυτό που έχουμε ονομάσει #loading. Δηλαδή το ng-template.

Το ng-template γίνεται render μόνο όταν δεν ισχύει το condition της *ngIf

Δείτε όλον τον κώδικα στο github της firebit
https://github.com/firebitgr/angular-async-ngif-ngelse

Βρείτε με στα:
github: https://github.com/blackpr
twitter: https://twitter.com/blackpr