rfulcher (4) [Avatar] Offline

I am new to AngularJS and am going through this for the second time trying to build my own sample application, using your application as an example.

I have a question about the difference in the product listing page and the product detail page. I was wondering why you referenced the Product as observable in the Home.ts "products: Observable<Product[]>;" (Which seems to be injected to the product-item.ts) and not in the product-detail.ts "product: Product;"

What is the difference between the markkup that is used in the product-item.html [<p>{{ product.description }}</p>] and the product-detail.html [<p>{{ product?.description }}</p>].

I have been able to replicate it and get the parts of my application to work but I can't see any reference to why the "?" makes a difference and read that it was noting an optional item in data bindings but that might not relate to this question.

I apologize if my question is out of context, this is pretty new to me and I am trying to get up to speed quickly.


Yakov Fain (208) [Avatar] Offline
in HomeComponent.ts Product is defined as Observable because getProducts() returns an Observable. Instead of using subscribe(), we use the async pipe in HomeComponent.html. The async pipe is a shorter way to subscribe right inside the template.

The question mark in this context is not about the product being optional. It's a way to say that if the Product (retrieved asynchronously) is not ready yet for binding, don't throw a null pointer exception.

The constructor of ProductDetilComponent gets the ProductService injected as well.
rfulcher (4) [Avatar] Offline
Thanks for the reply. That does clear a few things up and generates a few more questions. In the subscribe situation is the "?" required? I was reviewing the book and on page 167 the home.ts example uses subscribe but does not use the "?" in the Template.

Is there a reason to use either the short pipe async or the subscribe? (Is one better than the other or just different situations?)

Thanks so much for answering my questions.