The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

rfulcher (4) [Avatar] Offline
#1
Hello,

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.

Thanks


Yakov Fain (219) [Avatar] Offline
#2
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
#3
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.