State Management techniques with Angular Framework

There are several ways of handling state in Angular

• Using Angular Change Detection Strategy
• Implement Rxjs library 
• Using third party library like ngrx or angular redux

Change Detection Strategy :

Angular by default uses the change detection using @input and@output decorators through which state can be handled if components have parent child relationships.

But using default change detection the components checks those changes everytime if event or some thing changed in components. 

We come across many scenarios where we would like to do the change on condition basis which could improve the performance of an application. 

Angular Backendless Development using Json-server

While working on Fronend project if backend APIs are not ready, developers can still start working using JSON Server and create mockApis to start. 

There are different ways to achieve this useful feature.

• Custom Http interceptor by HttpClientModule
• Using json-server
• InMemoryDbService

We have already discussed Custom Http interceptor by HttpClientModule approach in a different post.

This post is about how can we use json-server to mock the real back end. We need to install json-server, so that we can use it. Run below command to install this globally in your system.

npm install -g json-server

I am assuming you already have angular environment ready.
At this point decide on the data structure you are expecting as a result of the service call. Create a JSON file with some mock data.

//mockData.json
{
  "users": [
    {
      "id": 22,
      "fName": "Sourav",
      "lName": "Ganguly"
    },
    {
      "id": 10,
      "fName": "Sachin",
      "lName": "Tendulkar"
    }
  ]
}

Now run below command and check

json-server mockData.json
http://localhost:3000  //you will see this url in console

Open above url in any browser and see you will be able to see "/users" under "Resources" section. The user data can be accessible via http://localhost:3000/users url.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UserService {
    url = "http://localhost:3000/users";
    constructor(private http: HttpClient) {}
    getUser(): Observable<any>{
        return this.url.get(this.url + '?_sort=id')
                    .map(response => response.json());
    }
}

We can apply sort/ filters/ search on the response data. There are lot of other features, check json-server for more information.

To use this cool feature we need to install this dependency, some developers don't want to use additional dependency, otherwise this is another easy way to implement fakebackend in AngularJS.

Thanks for reading. Feedback and comments are always welcome!!!

Updating Angular Version

 Before updating any existing Angular Project, Please  verify below checklists

1.  Check the current version of the existing APP and compare the changes with the latest APP

From https://update.angular.io/?l=2&v=8.1-11.0 link

This will provide all the updates which needs to be done on existing project

2.  Try ng update command, this command will check the version of all the existing plugins and will give suggestions of some of the plugins to update.

3. Open package.json and update all the suggested versions to be updated.

4. Make sure to update all the existing thirdparty plugins and check all there compatibility with the latest version and update those as well.

It is recommended to always use the Licenced packages and plugins to be used.

5. Run  npm install command to update all the packages and plugins

There are certain warnings which will be notified at the time of updates.

Kindly check those warnings and fix as suggested.

Make sure to delete node_modules and package_lock.json files before installing new versions.

6. Create all the checklists of the modules and components on which the changes are required and have impact on the project.

For example:

Renderer class is deprecated from Angular9.

Some for IE-10,11 and IE mobile is removed

7. Update the existing documents and start using the latest version progressively or gracefully without having less impact on project deliveries and performance.