Reader small image

You're reading from  Learning Angular - Fourth Edition

Product typeBook
Published inFeb 2023
Reading LevelIntermediate
PublisherPackt
ISBN-139781803240602
Edition4th Edition
Languages
Tools
Right arrow
Authors (2):
Aristeidis Bampakos
Aristeidis Bampakos
author image
Aristeidis Bampakos

Aristeidis Bampakos is a Web Development Team Lead at Plex-Earth who specializes in the development of web applications with Angular. He has been an Angular Google Developer Expert (GDE) since 2020 and works as an Angular Senior Tech Instructor at Code.Hub, a private educational institute, where he nurtures aspiring Angular developers and professionals. He is also the author of Angular Projects with Packt.
Read more about Aristeidis Bampakos

Pablo Deeleman
Pablo Deeleman
author image
Pablo Deeleman

With sound expertise in front-end libraries and frameworks such as Backbone.js, Knockout.js, VueJS, React, Svelte, AngularJs, and Angular, Pablo Deeleman has developed his career since 1998 as a JavaScript engineer across a broad range of successful companies such as Gameloft, Red Hat or Dynatrace, just to name a few. He currently works as Staff Software Engineer at Twilio, the global leader in customer engagement communications. Pablo Deeleman has contributed to the dev community with several books on Angular since 2016, all published by Packt Publishing.
Read more about Pablo Deeleman

View More author details
Right arrow

Subscribing to observables

We have already learned that an observer needs to subscribe to an observable in order to start getting emitted data. Our products and product-view services currently emit product data using observables. We must modify their respective components to subscribe and get these data:

  1. Open the product-list.component.ts file and create a getProducts method in the ProductListComponent class:
    private getProducts() {
      this.productService.getProducts().subscribe(products => {
        this.products = products;
      });
    }
    

    In the preceding method, we subscribe to the getProducts method of the ProductsService class because it returns an observable instead of a plain products array. The products array is returned inside the subscribe method, where we set the products component property to the array emitted from the observable.

  1. Modify the ngOnInit method so that it calls the newly created getProducts method:
    ngOnInit()...
lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Learning Angular - Fourth Edition
Published in: Feb 2023Publisher: PacktISBN-13: 9781803240602

Authors (2)

author image
Aristeidis Bampakos

Aristeidis Bampakos is a Web Development Team Lead at Plex-Earth who specializes in the development of web applications with Angular. He has been an Angular Google Developer Expert (GDE) since 2020 and works as an Angular Senior Tech Instructor at Code.Hub, a private educational institute, where he nurtures aspiring Angular developers and professionals. He is also the author of Angular Projects with Packt.
Read more about Aristeidis Bampakos

author image
Pablo Deeleman

With sound expertise in front-end libraries and frameworks such as Backbone.js, Knockout.js, VueJS, React, Svelte, AngularJs, and Angular, Pablo Deeleman has developed his career since 1998 as a JavaScript engineer across a broad range of successful companies such as Gameloft, Red Hat or Dynatrace, just to name a few. He currently works as Staff Software Engineer at Twilio, the global leader in customer engagement communications. Pablo Deeleman has contributed to the dev community with several books on Angular since 2016, all published by Packt Publishing.
Read more about Pablo Deeleman