deborahk / angular-rxjs

Sample Angular application that uses RxJS for reactive development. Find the associated Pluralsight course here: https://app.pluralsight.com/library/courses/rxjs-angular-reactive-development

Hi there 👋

🔎 Where to find me:

• YouTube
• Twitter
• Mastodon
• freecodecamp.org

🔭 I’ve published FREE courses on YouTube:

Gentle Introduction to Programming for Beginners (14 lessons)

Gentle Introduction to HTML for Beginners (21 lessons)

Gentle Introduction to GitHub for Beginners (21 lessons)

Gentle Introduction to CSS for Beginners (22 lessons)

Gentle Introduction to Bootstrap for Beginners (14 lessons)

Gentle Introduction to JavaScript for Beginners (17 lessons)

angular-rxjs's Issues

TypeError: Cannot read property 'filter' of undefined

When clicking the 'Refresh Data' button we receive - TypeError: Cannot read property 'filter' of undefined, in the following scenario:

In APM-WithExtras in product-list.component.html uncomment the 'Refresh Data' button and in product.service.ts replace the this.products$ observable with this.products2$ in the combineLatest operator for the productsWithCategory$ property like so:

productsWithCategory$ = combineLatest([ this.products2$, this.productCategoryService.productCategories$ ]).pipe( map(([products, categories]) => products.map(product => ({ ...product, price: product.price * 1.5, category: categories.find(c => product.categoryId === c.id).name, searchKey: [product.productName] }) as Product) ), shareReplay(1) );

The error is being thrown in product-list.component.ts on the products$ property due to the this.productService.productsWithCRUD$ observable being undefined following the scan operation.

Where is place for business validation in reactive development?

@DeborahK I sow your presentation on Angular conf and got interested for reactive development.
My question is, where is place for business validation for model that should be post to database. Business validation may depend on other parameters besides the model itself.
What would be approach/pattern for this case?

How to add spinner

On using async pipe on the components, angular subscribes the observable and my concern is on how to add spinner on page navigation if we use async pipe.

I walked your angular routing code and need some suggestions on how to implement the spinner
for routing if we use async pipe on components.

can I get same benefits if I use ngrx?

@DeborahK I watched your presentation on youtube and it was a great inspiration for me, to use combineLatest and shareReplay for caching and efficient Change Detection .
I am thinking of I use redux store implementations like ngrx or ngxs, I can get same benefits?

Question: Why comment out the 'isLoading' subject from product.service?

Hi Deborah,

I think the is loading observable makes sense to have in the service. It allows my component to be leaner. Was there a bug that I haven't experienced yet?

Thanks,
Guillermo

vulnerabilities

Hi Deborah
after instaling APM-START and APM-FINAL, follwing vulnerabilities were found

Just wanted to inform you. Maybe you can update the required packages.

Can't set breakpoint

Hi Deborah,

Why I can't set breatpoint to debug like other applications when cloned this application?

Any suggestions?

Thanks,

HL

Your metaphor for an Observable as 'Apple Conveyor' is not complete!

Track unloading the apples: is the producer function for the Observable
Conveyor is the Observable
Apple basket is the Observer receiving from the apple conveyor

I like this metaphor!

bug: Re-add product when navigating to route.

Hi, Deborah!

Re-add product when navigating to route.

steps:
1)Start app APM-WithExtras
2) navigate to 'Products (With Re-get)' and 'Add Product'.
3) navigate to any application address.
4) navigate to 'Products (With Re-get)'.

#77 solves the problem.

Thx @DeborahK !

230 high severity vulnerabilities

There are 230 high severity vulnerabilities in this version of the repo. See image.

After running: npm install, I ran npm audit fix, and they all went away. Recommend running and pushing the solution back into source. Best to you, Karl