Angular 2+ interview questions

This post summaries the interview questions commonly asked in Angular interviews based on the experience. You can find the answer for most of the questions in angular.io site itself. Here I just try to give few hints for the few questions. Prepare yourself for the remaining questions.

List of questions asked in interviews ?

• What is the architecture of Angular ?

Tell your own story with this image.

• What are the main features of angular ?

1. Cross platforms - Progressive web apps, Native and desktop
2. Speed and performance - Light weight due to differential loading
3. Productivity - Angular CLI, IDEs
4. Testing - Karma
5. Animation - High performance animations
6. Accessibility - ARIA enabled components

• What is the different between angular modules and javascript modules?
1. Angular NgModule is different from javascript modules.
2. In javascript, each file is a module and objects defined in that file belongs to that module.
3. Javascript exposes the object defined in a module using export keyword and import the objects in another module using import.
4. Angular module is just a class decorated with NgModule decorator which is a building block of angular application.
5. Angular modules are responsible for a work flow or a closely related set of capabilities. We can import one module into another to use the capabilities.
• What is the difference between angular and angularJS?
• What is metadata?
• What is decorator?
• What is dependency injection?
• Tell me about angular life cycle hooks?
• Tell me about angular compilation process?
• What is difference between AOT and JIT?
• Explain about angular bootstrapping?
• Tell me about types of forms in angular ?
• What is the difference between ngAfterContentInit and ngAfterViewInit ?
• What is the difference between observable and a promise ?
• What is a pipe in angular?
• What is a polyfill?
• Tell me about routing in angular ?
• What is the difference between ForChild and ForRoot?
• Tell me about server side rendering in angular ?
• What is the difference between compilation and transpilation?
• What is ngZone?
• Explain about angular change detection?
• What is view encapsulation in angular?
• What is the difference between pure and impure pipe?
• What is lazy loading?
• What is internalization in angular ? 
• What is service worker in angular ?
• What is differential loading?
• What is renderer in angular?
• Why we should use renderer ?
• Tell me about angular project file structure?
• What for package.lock file ?
• What is proxy.config file?
• What is the use of tsconfig.json file?
• What is a web worker ?
• How will you refer external scripts in angular ?
• What is the security feature in angular?
• What is XSS attack and how can we avoid it?
• How to create a nested routing?
• What is immutability in angular ?
• What is the life cycle of a service?
• What is the use of BrowserModule and CommonModule?
• What kind of importing is used in angular?
• How will you communicate between components?
• When will you use ngDoCheck ?
• What is a directive? Tell me about its types?
• What is the difference between viewChild and viewChildren?
• Explain about ngContent, ngTemplate and ngContainer ?
• What is the difference between reactive and template driven forms?
• What is a entry component?
• What is the use main.ts?
• What is the difference between Subject and Behaviour subject?
• What is a feature module? What are the types?
• What is a provider?
• What is the difference between useClass and useFactory?
• How will you make one module available to other modules?
• What if I import the same module twice?
• Can we re-export classes and modules?
• Why is a service provided in a lazy-loaded module visible only to that module system?
• What if two modules provide the same service?
• Why does lazy loading create a child injector?
• Why does Angular need entryComponents?
• What is a template reference?

I will update the answers when ever I get time. All the best.

Microservices

What do we understand by microservices?

Microservice is basically decoupling of entire application into small small services, like take example of Amazon,  in Amazon we'll have many partners like seller then we will have buyers and at the end we'll have persons from Amazon who will be managing all the applications or we'll be seeing the transactions and every other details so we will mention it as an admin. 

This is an entire application and say suppose it is written in Java so what happen is if I need to change something in buyer I need to  give an offer of 5% so what I need to do is to write the code and deploy the entire application. 

Instead of this we can use microservice based architecture where the seller will be a single application, buyer will be another application and the admin would be another application. So here what happen is if the admin is down or like if the server is down not the entire Amazon website is down. 

If admin is down people can use the buyer option or if the seller is down seller will not be able to add any further items to his store but the buyer can able to check out from his cart and or you can add anything from other sellers or which are already in the stores and if suppose I want to change something in seller and want to deploy, so I will just go and deploy this application which will not disturb admin or buyer.

Monolithic vs Micro services:

Advantages:

- Independently develop and deploy the services
- Isolation - If one service fails, the other service will continue to work
- Micro services of an application can be written in different languages
- Micro service architecture enables the continuous delivery
- Micro services are scalable and reusable
- Security monitoring will be simplified by using micro services.

Angular Component

We are going to learn the basics of a component. We are going to understand what exactly makes up a component and how we can add a new component to our angular application. 

A component is made up of three parts the first one is a template which represents the view this is created using HTML. It will be the user interface for your application, next we have a class which is nothing but code that supports the view and this is created using typescript.

The class like any other programming language contains data properties and methods that can be used to control the logic of the view. For example we can have a method to show or hide an element based on the value of a property. 

Finally a component also has some metadata attached to it and this is the information that angular needs to decide if the particular class is in fact an angular component or just a regular class. 

The metadata is defined using a decorator which is a feature in typescript. A decorator is just a function that provides information about the class attached to it and for component we use the component decorator so if we put together a template a class and some metadata we get an angular component. 

Now let's try to relate this to the app component that we have in our hello world angular application so let me go back to visual studio code and open the file AB component.ts at the bottom we have our class and the name of the class is AB component.

This class currently contains one property which is the title and does not contain any methods keeping it simple to this class we have the metadata attached in the form of a decorator and to be more specific the component decorator. 

The component decorator is basically a function that attaches to the class right below it and in our case it is attached to the app component class and it is this decorator that tells angular hey this is not a plain class and this is a component. 

The component decorator contains both the metadata and the template which represents the view so as part of the metadata we have a selector, a template URL and styles.

The selector is basically a custom HTML tag that can be used to represent this component when you specify a selector in your HTML. Angular renders the components template in its place.

Whats new in Angular 8

Angular 8 was released in May 2019 and  the key features of angular 8 are as follows in brief,

• Differential loading
• Dynamic imports for lazy loading
• Ivy Rendering
• Bazel

Differential Loading:

Differential loading is a technique which will automatically make your angular apps more performant now. 

How does this work ?

Well it turns out with version 8 when you build an application for production two bundles are created. One bundle for the modern browsers that support es6 and above and another separate bundle for older browsers that only support es5.

When your app is opened in the browser the correct bundle is automatically loaded which means for the newer browsers which do support es6 plus they now will be loading lesser code and lesser number of polyfills which will be a great performance improvement from what has been gathered so far.

The bundle size reduced by seven to twenty percent depending on the amount of modern JavaScript features that were being made use of again. This is a feature which doesn't involve you to add any code simply running ng build dash dash prod will take care of everything so differential loading for performance improvement.

Dynamic imports for lazy loading:

Let me quickly give you an overview of lazy loading routes in angular.

When you create a decent-sized application you're going to have lot of routes with lots of feature modules. Loading the bundle for your entire application when the user is visiting your site might take a toll on the performance instead what would be better is if we initially load the code that is necessary only for the initial route and then load the code for the other routes only when the user navigates to those routes for the first time doing so will again improve the performance.

With version 8 there is nothing new in the concept of lazy loading itself but the syntax has changed.

Previously the syntax was involving a custom string so a lazy loaded Road config would look something like this now in version 8 though lazy loaded routes will use the standard dynamic import syntax so the syntax which was custom to angular has now been migrated into the industry standard what this allows is for editors and linters to complain if there is a mistake.

If you are not quite familiar with lazy loading don't worry about it if you are currently using lazy routes the ng upgrade command should take care of the change in syntax for you

Ivy Rendering:

Ivy is the rendering engine that the angular team is currently working on. It basically handles translating the templates and components into regular HTML and JavaScript that the browser's can understand.

Ivy is the latest rendering engine and will enable cool features in the future but for now even with the release of version 8 it is still not stable. 

Currently the focus is to ensure nothing breaks in the existing applications. Probably with version 9 it might be the default engine but angular 8 does offer a switch to opt in to Ivy when generating a new application using the CLI. 

You can add the enable Ivy flag so ng new demo which is the project name followed by the option enable ivy.

Ivy has the potential to generate considerably smaller bundles make incremental compilation easier and is also going to be the basis for future innovations in angular. It will soon be stable. 

Bazel:

Finally a quick note on Bazel which is basically a build tool which again like Ivy is still only experimental in version aid so I am NOT going to go into the details of Bazel but I recommend you to give it a 5 minute read just to get an understanding of what it actually is so Ivy and basil both something to keep an eye out for in the next release.

AngularJS Routing

AngularJs enables us to build single page applications (SPA) in which you can navigate to different pages of your application dynamically without page reloading.

The "ngRoute" module routes your application to different pages without reloading the entire application.  

Steps for Routing :

1. Include the AngularJS Route module.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>  

   

2. Add the as a dependency in the application module 

var app = angular.module("app", ["ngRoute"]);  

3. Use the $routeProvider to configure different routes in your application

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "home.htm"
  })
  .when("/services", {
    templateUrl : " services.htm"
  })
  .when("/products", {
    templateUrl : "products.htm"
  })
  .when("/contact", {
    templateUrl : "contact.htm"
  });
});

With $routeProvider, we can define what page to display when user clicks a link without reloading entire page.

4. Add a container for Routing

<div ng-view></div>  

An Application can only have one "ng-view" directive, and this will be the placeholder for all views provided by the route.  

When a user clicks 'services' link, the contents of 'services.htm' will be added to the child of the element where ng-view directive is present.

Click here to read about custom directives.

Deals At Amazon

AngularJS Controller

A Controller is defined by a JavaScript constructor function in AngularJS. AngularJS controllers control the data of AngularJS applications.  The ng-controller directive defines the application controller.

AngularJS Controller Example

<div ng-app="App" ng-controller="Ctrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
    $scope.firstName = "Angular";
    $scope.lastName = "Js";
});</script>

The ng-controller="Ctrl" attribute is an AngularJS directive. It defines a controller.

The "Ctrl" function is a JavaScript function and AngularJs will invoke the Ctrl function with $scope.  In AngularJS, $scope is the application object which can access all controller functions and variables. 

Here the controller creates two variables, firstName and lastName. Both the varialbes are bound with ng-model directive which is a two way binding. When the user types the first name in the input field, it will be updated in firstName variable.

A controller can have methods which are variables as functions. These functions can be invoked from HTML and inside the controllers.

AngularJS Controller functions Example

<div ng-app="App" ng-controller="Ctrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
    $scope.firstName = "Angular";
    $scope.lastName = "JS";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});</script>

Here fullName is a controller function which is bound using expression binding. This function has the access to the controller variables and returns the full name. 

Click here to read about Custom directives.

Click here to read about Data binding.

AngularJS Custom Directives

AngularJS custom directives are one of the most powerful components of AngularJS, helping you extend basic HTML elements/attributes and create reusable code.

Custom Directive types:

In AngularJS we can create the custom directive for the following types of elements. 

Element directives:

Directive activates when a matching element is encountered. Restrict mode is defined by "E".

Example: <ng-directives></ng-directives>

Attribute: 

Directive activates when a matching attribute is encountered. Restrict mode is defined by "A".

Example: <span ng-directive></span>

CSS: 

Directive activates when a matching css style is encountered. Restrict mode is defined by "C".

Example: <span class="ng-directive"></span>

Comment:

Directive activates when a matching comment is encountered. Restrict mode is defined by "M".

Example: <!-- directive: ng-directive -->

How to create custom directives:

Example 1:

100. <html>  

100.   

100. <head>  

100.     <title>Angular JS Custom Directive Example</title>  

100.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">  

100.         </script>  

100.         <style>  

100.             .sparkline  

100.             {  

100.                 background-color: brown;  

100.                 font-size: large;  

100.                 height: 100px;  

100.                 width: 200px;  

100.                 color: aqua  

100.             }  

100.         </style>  

100.   

100. </head>  

100.   

100. <body>  

100.     <h2>AngularJS Custom Directive Example</h2>  

100.     <div ng-app="mainApp">  

100.         <divng-demo>  

100.             </div>  

100.             </div>  

100.   

100. </body>  

100. <script>  

100.     var mainApp = angular.module("mainApp", []);  

100.     mainApp.directive('ngDemo', function()  

100.     {  

100.         return  

100.         {  

100.             restrict: 'A',  

100.             template: '<div class="sparkline">Simple Custom Directive of Element Type</div>'  

100.         }  

100.     });  

100. </script>  

100.   

100.   

100. </html>  

In the above code we defined the name of the directive (ngDemo). Type of the directive is an attribute that is defined by restrict: 'A'. Here the restrict option is used to define the type of element for which this directive will invoke.

In template option we define the text (template) that replaces the content of the element that invokes this directive. Template is an option where we are specifying the html that will be appended or append.

<divng-demo></div>

Using the above code we invoked the directive. Notice that when we invoke it (ng-demo) and the name of directive (ngDemo), both are not the same. This is because AngularJS will handle translating the camel cased name when we define it to the snake case when we invoke it.


Click here to read about data binding.