----------------------------------------------------------------------------------------------------------
Angular Development Interview Questions
----------------------------------------------------------------------------------------------------------
1) What is Angular Framework?
Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.
2) What are the key components of Angular?
Angular has the below key components,
i. Component: These are the basic building blocks of angular application to control HTML views.
ii. Modules: An angular module is set of angular basic building blocks like component, directives, services etc. An application is divided into logical pieces and each piece of code is called as "module" which perform a single task.
iii. Templates: This represent the views of an Angular application.
iv. Services: It is used to create components which can be shared across the entire application.
v. Metadata: This can be used to add more data to an Angular class.
3) Could you explain services in Angular?
Singleton objects in Angular that get instantiated only once during the lifetime of an application are called services. An Angular service contains methods that maintain the data throughout the life of an application.
4) What is AngularJS 2/4?
Angular 2/4 is an open-source front-end web application platform, which works as a binding framework created by google development team.
5) What is the difference between Angular 1(Angularjs) and Angular 2/4?
Angular 2/4 is complete revamp of Angular 1.In fact, we can say that it was completely rewritten from the ground-up.
Angular 1 is controller and $scope based while Angular 2/4 is based on an architecture of component hierarchy, dependency injections and directives.
Angular 2/4 is much more geared towards Mobile development unlike Angular 1 as mobile development is much bug prone. If mobile development is handled first desktop development will not have much issues.
Angular 2/4 focuses much more on modularity as much of its core functionality has been transferred to its modules leading to a faster and lighter application in development.
6) What is Typescript?
In Simple word Typescript is a Superset of JavaScript meaning any JavaScript code is valid typescript code.
Typescript is Trans piled to JavaScript behind the scene in the IDE.
JavaScript is function based which can get confusing to a C# or Java developer while reviewing code So Typescript allows us to use generic programming (classes and modules).
7) How to declare a component in Angular 2?
Components in Angular 2 are simply directives that are always associated with a direct template. Angular 2 components have an extremely well defined life-cycle. When working with angular components, we can make use of interfaces which allows us to implement functionality for different times in a components lifecycle. A component must belong to an NgModule in order for it to be usable by another component or application. Components can even control their runtime behaviour by implementing various Life-cycle hooks.
8) When to use Ngoninit and constructor in Angular 2?
Constructors are used for initializing class members and also for dependency injection. Ngonlnit is used for the initialization work. Both of these methods are called when the component is created. It is really important that we should know, when to and how to use them. These are used for providing the best structure for your component’s code. A constructor method is a pre-defined method in the constructor class which is only called when the class is instantiated. It is also used for properly initializing the fields. The constructor in Angular 2 is used to create a new instance of the class. Ngonlnit is the class we import when we implement the constructor in order to use it in a class. The method used in this case is ngOnlnit(). This method helps in initializing the directive or the component after the data-bound properties are displayed and the directive or components input is set.
9) Explain the concept of lazy loading in Angular 2?
Lazy loading is a module which is used to decrease the start-up time. When lazy is used, then our system application does not need to load everything at once. It only needs to load what the user expects to see when the application first loads. The modules which are lazily loaded will only be loaded when the user navigates to their routes. Lazy loading improves the performance of our system applications. It keeps the initial payload small and these smaller payloads lead to faster download speeds. It helps in lowering the resource cost, especially on mobile networks.
10) What is the use of ngForTrackBy directive in Angular?
For iterating over a collection in Angular 2, the ngFor directive is used which instantiates a template once per item from the collection. If a data needs to be changed at some point in the collection, then a problem occurs because angular cannot keep a track of items in the collection and has no knowledge of the items which were added or deleted. This results in the deletion of all the DOM elements that are associated with the data and are again created. If the collection is big, then it becomes more complicated because a lot of DOM manipulation occurs which are expensive. So, to solve this problem, a trackBy function is used which takes the index and the current item as arguments and returns the unique identifier for this item.
11) What is a template in Angular 2?
The template in Angular 2 is used to define the views of the AngularJS Application.
12) What is Traceur compiler in Angular 2?
Traceur compiler takes classes, generators, and other features from ECMAScript edition 6 (ES6) and compiles it into JavaScript ES5 that runs on the browser. This means developers can use the code from a future version that has more features and encourages design patterns.
13) What is RouterOutlet in Angular 2?
In Angular 2, the RouterOutlet is a directive present in the router library to be used as a component. It marks the spot in a template for the router to display the components for that outlet.
Every outlet can have its unique name, which is determined by the optional name attribute. The name once set cannot be changed dynamically. If no value has been set, the default value is "primary".
14) What is ViewEncapsulation in Angular?
In Angular 2, View Encapsulation is used to define the template and style encapsulation variations available within a Component’s Component. In addition, it enables us to use Shadow DOM or maybe even emulate it as per requirements.
15) What is pipes in Angular 2?
In all Angular version from 2 onwards, there is a common feature called Pipes. This feature helps developers create custom pipes.
Pipes are used to write display-value transformations that developers can declare in their HTML. A pipe inputs data and transforms it into the required output.
16) What is RxJS in Angular?
In Angular, Reactive Extensions for the JavaScript (RxJS) is a reactive stream library that allows you to work with asynchronous data streams in Angular 2. RxJS can be used in the browser or on the server-side while using Node.js.
Here’s a simple example of integrating the rx.angular.js, a dedicated library for maintaining excellent inoperability between RxJS and Angular 2. Basically, we are taking a $watch expression and turning it into an observable.
17) What are modules in Angular 2/4?
Modules are used for organizing components, models, templates and other parts instead of coding everything into a single application.
This results in a more modular application, which is separated into different modules depending on their functionality and need of our app.
18) What is @inputs In Angular 2?
@Input decorator allows us to pass data into our application controller and templates through html as well as defining custom properties.
The @Input decorator binds a property with our child component so that it can communicate and pass values from parent to child.
19) What is npm and why do we need it?
Npm stands for Node package manager. It is an online repository and works as a package manager for JavaScript.
A package.json file in our application defines the dependencies that we want to download for our application.
20) What is Routing and how does it work in Angular 2/4? How is it done?
The routing mechanism allows us to navigate between different views(via components) and allowing us to configure it to make it more flexible while providing us with features like lazy loading to ease load times and increase performance.
21) What is Change detection?
Change detection basically is the process of detecting the changes in the internal state of our application which might be caused due to Events, XHR and Timers and make it visible in the user interface.
Change detection work on the principle of zone.js in Angular 2/4.
22) What Are Event Emitters in Angular 2/4?
If the change in one of the child components needs to be reflected to any of its parent component, we can emit the event by using Event Emitter API in Angular.
EventEmitter is class present in @angular/core module, which is used by components and directives to emit custom events.
23) What is dependency injection in angular 2/4?
In Angular 2/4, dependency injection gives us the ability to add functionality of a component at runtime.
It also provides us a way to create a service that is a reusable piece of code, which can be used across our application to perform a particular function.
24) What are typings in Angular 2/4?
Typings is a way of installing the Typescript definitions using typings.json file, as it is necessary as the browser does not understand typescript natively and hence it must be transpiled first before rendering.
25) Is it good to use JQuery in Angular 2/4?
Angular 2/4 and JQuery at its core are very different concept all together.
JQuery deals with manipulating DOM directly while Angular is used primarily for binding data.
In some scenarios, using JQuery libraries can be used as quick solutions but doing this we might face problems in the future in terms of pre-rendering.
26) How can you use JQuery in Angular 2/4?
Steps to add and use jQuery in Angular 2/4 are as follows:
In your node.js terminal type npm install --save jQuery and hit enter.
Then install jQuery Declaration files by typing npm install -D @types/jquery and hitting enter.
Next Import into your component and then provide a typed reference for jQuery.
27) Explain component specific hooks in Angular?
Below are few component specific hooks in Angular2.
• ngafterContentinit: It initializes the component content
• ngAfterConctentChecked: It checks the binding of the external content.
• ngafterViewinit: It creates the component view.
• ngAfterviewChecked: It checks the bindings of the component’s view.
28) List the modern browsers supported by Angular 2.
Angular supports most of the recent browsers some of which are:
Google Chrome
Firefox
Edge
IE for versions 9-11
Safari
iOS 7.1
Android 4.1
IE Mobile
29) Explain Angular 2 hidden property.
The hidden property in Angular 2 is a special case.
• The property is more powerful and is used to bind any property of the elements.
• It is considered the closest cousin of ngshow and nghide.
• It sets the display property “display: none”.
30) How to cache an observable data in Angular 2?
Caching of an observable data is done with the help of “observable.cache”. We can use caching in order to cache the response in the memory and then, on the next subscription, instead of requesting the remote server again. This operator is used at the end of the string. Caching is important for the performance, especially on bandwidth restricted devices and slow networks. You should have a good understanding of caching while working with promises but while translating it to observable, it is a bit difficult. Therefore, when interacting with observables, we typically set up a subscription on the consumer side and react to values coming through the pipe. We can easily add caching to the observables by adding publishReplay(1) and refCount.
31) How to write all the console.log statements to a file in Server?
• Using the flags enables "logging" from the command line.
It will make sure that information is locked internally along with console.log (). This lock file is known as chrome_debug.log, and it can be located in the directory.
• Now you have to filter the log file
32) How do you check if angular CLI is installed?
To check this, you need to make sure that node is installed and then check if angular CLI is installed.
• Open a command prompt using cmd.
• Type node -v and npm -v to ensure node is installed.
• Type ng –v
33) What is the configuration required for caching of static resources like images, css and js in Angular 2?
During Development Mode, caching for static resources can be done through the Design of Tools. If you want to cache on the production stage, you need to check and update the Server-End Settings accordingly.
34) What are filters in Angular 2?
A filter is a necessary phase of Angular 2 as well as Angular 4. It is basically used to filter an object from a crew of items, which are there in an array or an object array. It selects a subset of the objects from an array and returns it as a new array and displayed on UI. Filters can be used with an expression using pipe | sign. {{expression | filterName:parameter }} Angular 2 includes various filters to layout records of special fact types.
35) What is CDK in Angular 2?
The CDK, short for Component Dev Kit is a set of useful tools that help in implementing basic interaction patterns while neglecting their presentation. It represents a combination of core functionalities present in the Angular Material Library, excluding the styling specific Material Designs. The CDK is basically a platform with multiple functionalities to help in developing components.
36) How to display the error message from backend in angular2?
To display error message in Angular 2 from backend, we have to set the error message equal to an angular variable, and then check whether that variable exists to conform whether to display it or not.
37) How will you convert a string into a percentage?
To convert a string into a percentage format, a percent filter is used.
38) Can you automate porting Angular 1 code to Angular 2?
No, currently there is not any such tool available that ports the Angular 1 code to the Angular 2 code.
In the process of porting, the Angular 1 code to Angular 2, the side by side manual conversion of Angular 1 directives to the Angular 2 components takes place because they are two different frameworks and hence requires different approaches to solve the same problem.
39) Which module does is required for every Angular 2 app?
AppModule is required for every Angular 2 app.
40) Is Angular Modules and ES modules are the same?
No, Both are different.
----------------------------------------------------------------------------------------------------------
+44 7459 302492
info@uplatz.com
