Sharing data in the Angular application

When it comes to sharing data between components in an Angular application we have to remember that there more than one right way to do it!

Let's go over some assumptions, rules, and considerations for this article.

Consider: Follow a container presenter pattern. Check out my video on this here.

Your components have as little responsibility as possible; whether it is to get data from the server or just display it.

You create dumb components whenever possible.

You keep your dependency injections in the components to a minimum.

You abstract business logic to the services.

Assumptions: You don’t always have…


Angular NGRX enabling DevTools at runtime

In this article, I will cover a problem that I was working on in one of my projects. With help from the NGRX team, I was able to solve it. Shot-out to @brandontroberts , @tim_deschryver, @AlexOkrushko!

I hope it helps you when using NGRX, and you can also add it as part of your development process.

Problem:

I wanted to be able to enable DevTools at runtime. The reason I want to do that is to be able to let users report his/her application experience and especially the problems they are experiencing.

In other words, enable debugging reporting on the fly…


Angular: front-end from start to MVP

I am making this post as the first step in documenting my journey of building an Enterprise application for my side project.

The application is in the process of going towards an MVP.

This application is an “Uber for home services.”

The reason I had started this project: is to provide a value-based service while practicing and teaching others skills I had acquired over the years.

The objective of this post is to establish a timeline of the application going live from its infancy.

Following is the list of topics that we are going to discuss in this article:

  1. Application…

Angular: NGRX clean architecture with multiple stores

Before we go into Part 2 (testing of the multi-feature/store), I want to demonstrate the implementation of lazy loading of modules with multiple stores. So the objective of this article will be to show you how to add feature stores to the Feature module, which are loaded lazily when a route is activated.

Finally, I am going to provide links to the repository to GitHub.

Following is the list of topics that we are going to discuss in this article:

  1. Application objective.
  2. Application architecture
  3. Lazy loading of the feature modules
  4. Lazy loading demo
  5. Conclusion
  6. Links
  7. Part 2 ( to be…


Angular: NGRX multiple store architecture

The objective of this article is to provide a technical implementation of the ngrx for an application with a complexity which could benefit from adding feature store(s) in addition to the root store.

Finally, I am going to provide links to my github repository with the example code.

In part 2, I will show how to unit test components that use a feature store and later we will go into the unit testing of the ngrx store itself.

This is the list of topics that we are going to discuss in this article:

  1. High level use case for state management.


Using custom selectors for one-to-one or one-to-many data relationships.

Credit to https://angularfirebase.com
Credit to https://angularfirebase.com

When implementing state management with Ngrx we often have a predefined API that can not be changed. I ran across a business case: back end API is written in a way where 2 sets of data that are returned are depend on the other. One-to-one or one-to-many relationship. In order to map entities with corresponding ids we have to create a custom selector.

To make a selector that will do a lookup of another selector just add 4 Actions, 2 Effects and 3 selectors:

This is a declaration of the 4 Actions

This is an implementation of the 2…


I am a mother of 5 beautiful children. I am fascinated with technology and I believe that there should be more women programmers. I share that with my daughters and I mentor women who want to be on the same path as me.

I am full stack developer. My Stack now is SQL server(data) => .Net c#(back end) = > Angular ( front end)

This is a restart on my other blog that went stale .

My Next post will be on Angular state management with NgRx.s

Originally published at https://www.katesky.com on July 31, 2019.

Kate Sky

sharing knowledge, encouraging to learn, promoting passion for coding, supporting mothers who code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store