This past week I implemented a pattern I’ve been pondering for almost a year now. I like to create rather modular and granular code such that if my data structures are nested, the components that represent them on the screen should be nested as well. The question becomes, how does one create a reactive form in a child component and attach that form to the parent form in a way that:
Leaves the definition of the child form entirely in the child
Leaves the processing of the data in the parent where the parent form is the “Smart Component” and the child is a “Dumb Component”
Most solutions I was able to find attack this problem assuming the child component will be part of an array of controls. And I suppose, if you wanted to, you could implement that pattern using an array with one element. But, that just felt like a hack. If you are interested in that solution, this is the wrong article.
I started playing with IONIC last week. Since I do all my development on a Windows computer, this has already lead to a particular Windows based challenge that I was able to track down and deduce the solution for. But I was unable to find a solution that specifically addressed using IONIC, putty SSH, and authorized_keys Format, which is what someone is likely to search for when they see this issue.
This past week I took Angular Material for a spin. In the process, I learned a few things you might find helpful. Some may be helpful even if you aren’t interested in using Angular Material for your projects.
There seems to be a lot of confusion about Implement NgRX 4 in an Angular application. Some of it I’ve contributed to because NgRX 2 isn’t quite the same as NgRX 4 and as I’ve transitioned, I’ve learned better ways. In other words, I was wrong and I’m correcting my mistake! Below is the correct, NgRX approved way, of implementing NgRX 4.
If you are looking for information about how to convert to NgRX 4 from NgRX 2, you can visit my previous article, How to Upgrade to NgRX 4.
Before we get started, make sure you have TypeScript 2.4.x or above installed in your local project. The CLI may complain, depending on what version of it you are using. But, NgRX 4 requires us to use TypeScript 2.4.x. You should also have RxJS 5.4.x or above installed.
You will also need to install @ngrx. You can do this using the following NPM command:
npm install --save @ngrx/store @ngrx/effects
And finally, I’ve found that I need to use the –aot switch both when I’m using production and development builds, so you’ll want to add that to your scripts in your package.json file.
When NgRX 4 came out and I discovered that the “right” way of creating Actions is to use TypeScript classes and not Object Literals, I was a bit surprised. Why would you use a Class that requires you to use the “new” keyword? Why would you put multiple classes in one file? This is insane!