‘owi2r2020 Handling Observat
(f) 40% off everything - Black Friday! Q : 13 : 28: 42
Coupon BF40 at checkout for our biggest discount ever. DAYS_-««HOURS MINS SECS
5 with NaFor and the Asyne Pipe - imate Courses™
Ultimate
Course Cour Reviews eBooks About Blog Contact Login
Handling Observables with NgFor and the Async Pipe
dling Observables with NgFor
the Async Pipe
by Todd Motto » Jun 7, 2020 » 3mins read
GJ want expert Angular skills? Here's what you need to know. __ Show Me
Todd -
Angular 39
Motto Learn Beeman aon
eeoate Angular {Serr nsteson
Seveloper guia
Expert : Typescript 44
the right BB asics lessons
Follow TypeScript 2
Todd Motto way! Masterclass lessons
, Crs vasics 47 Lessons
Hit © Your straight- iw Manercan 81
Todd, creator forward guide to vee Massevosss lessons
of Ultimate. the Angular NGRX Store + a
Courses and ecosystem Effects fessons
Google
Developer by Todd Motto, \ SEE THE BUNDLE
Expert WH rcvovslooerscen | WY
teaching
beginner to
sevoncee Now you've learned the basics of Angular’s NgFor it’s time to
javascript,
‘Angular, NGRX, take things up a notch and introduce some Observable. In this,
TypeScript
htps/lutimatecourses.comibloglangular-ngfor-asyne-pipe un ox1an020
through my
online courses
and blogs. I'm
here to help
you learn
faster for less
effort so you
can focus on
your coding -
enjoy!
Learn with
me
Angular
3 courses,
TypeScript
BBS 2 courses
JavaScript
Love the
post? Share
itt
Lots of time
and effort go
into creating
all our blogs,
resources and
demos, we'd
love if you'd
spare a
moment to
share this one!
Twitter,
Facebook
ee
Linkedin
FES
Pinterest
ann Observables wth NgFor and the Async Pipe - Ultimate Courses™
article you'll learn how to use Observables with Angular’s
NgFor directive and the async pipe.
NgFor has a not-so-obvious feature that lets us will help us
deal with asynchronous operations - the asyne pipe. The asyne
pipe takes care of subscribing/unsubscribing to Observable
streams for us.
Let’s explore how we can handle NgFor alongside the async
pipe to subscribe to an Observable!
Using ngFor
Here's the data we'll be using as our source to pass into
“ngFor :
interface Pizza {
id: string;
name: string;
number;
const getPizzas$: Pizza[] = [
{ id: "j8P9sz", name: "Pepperoni", price: 899 },
id: “tMot@6", name: "Supreme", price: 999 },
{ id: "x9sp3g", name: "Sizzler", price: 899 },
And here's where we introduce NgFor alongside perhaps
another local NgForOf variable such as index :
‘let pizza of pizzas; index as i">
}. {{ pizza.name }}
htpsutimatecourses.comibloglangular-ngfor-asyne-pipe am ‘owi2r2020 Handling Observables with NoFor and the Async Pipe - Ulimate Courses ™
But Angular is reactive, this means it’s all about Observables.
This pattern of Angular development doesn't follow an
Observable data source pattern. So, let's bring them in!
ngFor and Async Pipe
For this, we'll introduce Observable of{) from RxJS and
demonstrate subscribing to an Observable stream via the
async pipe and update our typings:
import { Observable, of } from "xj
const getPizzas$: Observable
= of([
{ id: "J8P9sz", name: "Pepperoni", price: 899 },
{ id: “totes”, name: "Supreme", price: 999 },
{ id: "x9sp3g", name: "Sizzler", price: 899 },
Ds
&® RIS of() is an Observable creation operator that
emits the value we pass in!
Let's get the getPizzas$ variable into our component:
@Component ({
selector: ‘app-root',
template: >
»
htpsutimatecourses.comibloglangular-ngfor-asyne-pipe am onriar020 Handing Observabes with NoFor and the Asyne Pipe - Ultimate Courses ™
export class AppComponent implements OnInit {
pizzas$: Observable5
constructor() {}
ngoninit() {
this.pizzas$ = getPizzas$;
‘FP Tip: it's common practice to suffix properties that
are Observables witha $ , such as_pizzas$
Our NgFor directive can now use the async pipe to subscribe
tothe pizzass observable:
-
{{ i+1}}. {{ pizza.name }}
It’s important to remember that using | async creates a
subscription if the source is an Observable. Thankfully, when
the component is destroyed the subscription is also managed
and unsubscribed for us!
Check out the live StackBlitz example:
hitps/utimatecourses.comibloglangular-ngfor-asyne-pipe an ‘owi2r2020 Handling Observables with NoFor and the Async Pipe - Ulimate Courses ™
4 FREE eBook: @)
ForEach, Map, Filter,
Reduce, Some, Every,
Find
“This book is straight to
the point, syntax
exploration,
comprehensive guide,
real-world examples,
tips and tricks -it covers
all you need
Tadd Motto, author of
Exploring JavaScript Array
Methods
Enter your email Get
my,
FREE
NoFor Template and Async Pipe
eBook
When we think of NgFor, we should think of NgForOf. Here's
how you can use NgFor with the element using
the async pipe:
hitps/utimatecourses.comibloglangular-ngfor-asyne-pipe sm ‘owi2r2020 Handling Observables with NoFor and the Async Pipe - Ulimate Courses ™
{{ pizza }}
Instead of using the async pipe directly with NgFor, we could
use Nglf to unwrap our Observable into a pizzas variable.
This would allow us to reuse the variable multiple times inside
the template without creating repeat subscriptions:
This also means we can avoid using things like the safe
navigation operator ? with Nglf or NgFor.
Check out the live StackBlitz example:
hitps/utimatecourses.comibloglangular-ngfor-asyne-pipe mm ‘owi2r2020 Handling Observables with NoFor and the Async Pipe - Ulimate Courses ™
Summary
We've covered a lot of ground here using Angular's NgFor
directive and the async pipe.
Starting with static data we then used Observable of() to
create an Observable and async pipe it into NgFor.
From there, we looked at how we could potentially use Nglf
alongside NgFor (and the rest of our template) to avoid
subscribing multiple times to our Observable.
If you are serious about your Angular skills, your next
step Is to take a look at my Angular courses where
you'll learn Angular, TypeScript, RxJS and state
management principles from beginning to expert level.
Happy coding!
—_— .
htpsutimatecourses.comibloglangular-ngfor-asyne-pipe amt ‘owi2r2020 Handling Obsrvat
You'll also like...
Angular
Classes...
Todd Jun,
Motto * 2020
In this post you'll
learn how to use the
NaClass directive in
Angular to
dynamically assign
class names to
elements or
components.
Read more
htpslutimatecourses.comibloglangular-ngfor-asyne-pipe
Learn
Angular
the right
way!
Your straight-
forward guide to
the Angular
ecosystem
by Todd Motto, Google
Developer Expert
Accessing
the index...
May
Todd
30,
Motto" 3055
In this post you're
going to learn how
to access the index
of the current array
element using
Angular’s NgFor
directive!
Read more
15 with NaFor and the Asyne Pipe -Ulimate Courses™
anger os
Ditndamentals ——_fessons
GrnoularPro 6 essons
Balvpeseript as
i Basics lessons
Typescript 39
Masterclass iSesons
Crs easics 47 tessons
© ins Masterciass s5tessons
NGRXStore+ at
Eitects Iessons
SEE THE BUNDLE
Getting
Element...
May
Todd
26,
Motto * 355
In this post you're
going to learn how
to reference an
element inside an
Angular template.
Read more
om ‘owi2r2020 Handling Observat
5 with NaFor and the Asyne Pipe - imate Courses™
Difference Lazy- Angulars
between... Loading... Nglf, Else,.
May May Feb
Todd Todd Todd
24, i 2
Motto * 34,5 Motto * 18.5 Motto * 39,5
In this post we're In this post you'll Let's look at the Nalf
going to cover the learn how to Lazy directive in this
difference between Load an Angular tutorial and uncover
(change) and module, Lazy loading how to use it, We'll
(ngModelChange) means that our code also explore using
events with an isn't downloaded by Nalf with the “Else”
inside an the browser until it's statement and
Angular component. needed, “Then”, to.
Read more Read more Read more
Sign-up for more ultimate content!
Occasional newsletters, exclusive discount coupons and much more learning.
Enter your email Subscribe
Just awesome stuff, Read the legal things,
u Company Useful links Follow us
Copyright © 2016-2020 Home Fa
Ultimate Courses. All Reviews Contact
Rights Reserved. Blog Privacy Polley
Teams Licensing Agreement
timate Angular Limite About
htpsutimatecourses.comibloglangular-ngfor-asyne-pipe son owiar2020 Hancling Observables with NgFor and the Async Pipe - Ultimate Courses™
htpsutimatecourses.comibloglangular-ngfor-asyne-pipe wn
