Scribd
Upload
111 views11 pages

Angular - Observable

Uploaded by

Rck.br
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
111 views11 pages

Angular - Observable

Uploaded by

Rck.br
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 11
‘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:

  • {Ci 41 }). {{ pizza.name )}
    • 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

    You might also like