HttpInterceptor in angular with example-Adding token to every request

HttpInterceptor –  feature in Angular 4.3. We may need to intercept Http request while building apps with Angular. Sometimes we may you need to intercept Http request to add something to request header or to do something with the response. We can use Http Interceptor to do some action when sending  a request.This can be achieved using  the following interceptor class which implemenets Httpinterceptor.The interceptor adds an ‘access_token’ and a  ‘token’ to the header.The tokens are stored in the local storage.To use HttpInterceptor we need to  implement HttpInterceptor in the following way

Import the interceptor the following way in module.ts files

  Modify and use the above class to implement Intercepror. For official documentation visit this page

Change detection strategy in angular – simplified
Angular/AngularJS , Javascript / June 4, 2018

Angular is based on  component.It is having component within component architecture.Change detection look for changes in bindings from root to leaves from top to bottom. The library Zone.js lets Angular find out when to update the DOM. Angular performs change detection on component and child components when some changes occur in your App.But as the number of components increases change detection becomes heavy.In order to tackle this we can do change detection strategies to onPush to certain components.So that change detection only runs for the specific component  in the component sub tree when there is a change by reference not merely by value. See the below parent component which has a child component , to which a food object is passed from the parent.There are two buttons,one changes the name property in the object , other changes the object as a whole.When the change detection strategy onPush  is enabled the first function which change name property will not reflect in the child.The second function which changes the reference of thevariable changes the value in the child component.Now if the  Change detection strategy was default ,both the functions would have changed the value in the child component.



Share this page in social media platforms