Angular interview questions – part 1

1 What is typescript? It is a strict syntactical superset of JavaScript, and adds optionaltype-checking along with the latest ECMAScript features. 2 What is two way data binding in angular? Two-way Binding. Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. Binding   3 Types of bindings in angular ? 1 Interpolation -eg- <h1>{{user.name}}</h1> //interpolation is in braces 2 Two way binding – <input [(ngModel)]=”user.name”/> 3 One way binding – <h1 [innerText]=”user.name”></h1> //Bindings like inner text 4 Event Binding – <button ng-click=”userData()”>Send</h1> //Binding events like click   4 What are authGuards? With AuthGuards/RouterGuards we can prevent users from accessing areas that they’re not allowed to access.Or prevent navigating away. There are four kinds of guards.You have to import it from the @angular/router module CanActivate Checks to see if a user can visit a route. CanActivateChild Checks to see if a user can visit a routes children. CanDeactivate Checks to see if a user can exit a route. Resolve Performs route data retrieval before route activation. CanLoad Checks to see if a user can…

Http interceptor in AngularJS : adding tokens and loading image to every http request

While creating AngularJS applications,we might need to send multiple  http requests to backend apis to fetch the data that need to be populated within our HTML.In most cases, these backend apis might be protected using token .Also we might need to add a loading image to indicate the user that the data is being fetched. HttpInterceptor helps us to a display the loader image before and hide the loader image after completing the request  and also add token to every request header.This tutorial helps us to create an HttpInterceptor in AngulaJS. We create an  app using the following code

Now we create a factory which will intercept http requests.Inside the interceptor we use a variable httpRequestNumber,which tracks the number of requests.When a new request comes up we increment it httpRequestNumber++ and on response or error we decrement it httpRequestNumber– .We also inject $q and $rootScope.$q is service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.$rootScope is the root scope .every app has single root scope. All other scopes are descendant scopes of the root scope.We also add a token to the request header using the following code.

The interceptor factory will look like this….

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