Top 50 Interview Questions on ANGULAR

Samiksha Powar SRIEIT,Shiroda Question 1: Write an example of a simple HTML document with some header information and page content.

Requirement: Basic HTML skills

Answer: HTML documents are all different, but they follow a basic structure of head and body. Here you‘re checking the candidate has a good grasp of HTML document structure and basic tags such as DOCTYPE, html, head, title, meta, body, h1, p, etc.

Question2: Could you explain the concept of templates in Angular? Answer: Written with HTML, templates in Angular contains Angular-specific attributes and elements. Combined with information coming from the controller and model, templates are then further rendered to cater the user with the dynamic view.

Question3: What are the building blocks of Angular? Answer: There are essentially 9 building blocks of an Angular application. These are:

1. Components – A component controls one or more views. Each view is some specific section of the screen. Every Angular application has at least one component, known as the root component. It is bootstrapped inside the main module, known as the root module. A component contains application logic defined inside a class. This class is responsible for interacting with the view via an API of properties and methods.
2. Data Binding – The mechanism by which parts of a template coordinates with parts of a component is known as data binding. In order to let Angular know how to connect both sides (template and its component), the binding markup is added to the template HTML.
3. Dependency Injection (DI) – Angular makes use of DI to provide required dependencies to new components. Typically, dependencies required by a component are services. A component’s constructor parameters tell Angular about the services that a component requires. So, a dependency injection offers a way to supply fully-formed dependencies required by a new instance of a class.
4. Directives – The templates used by Angular are dynamic in nature. Directives are responsible for instructing Angular about how to transform the DOM when rendering a template. Actually, components are directives with a template. Other types of directives are attribute and structural directives.
5. Metadata – In order to let Angular know how to process a class, metadata is attached to the class. For doing so decorators are used.
6. Modules – Also known as NgModules, a module is an organized block of code with a specific set of capabilities. It has a specific application domain or a workflow. Like components, any Angular application has at least one module. This is known as the root module. Typically, an Angular application has several modules.
7. Routing – An Angular router is responsible for interpreting a browser URL as an instruction to navigate to a client-generated view. The router is bound to links on a page to tell Angular to navigate the application view when a user clicks on it.
8. Services – A very broad category, a service can be anything ranging from a value and function to a feature that is required by an Angular app. Technically, a service is a class with a well-defined purpose.
9. Template – Each component’s view is associated with its companion template. A template in Angular is a form of HTML tags that lets Angular know that how it is meant to render the component.

Question4: What is Data Binding? How many ways it can be done? Answer: In order to connect application data with the DOM (Data Object Model), data binding is used. It happens between the template (HTML) and component (TypeScript). There are 3 ways to achieve data binding:

1. Event Binding – Enables the application to respond to user input in the target environment
2. Property Binding – Enables interpolation of values computed from application data into the HTML
3. Two-way Binding – Changes made in the application state gets automatically reflected in the view and vice-versa. The ngModel directive is used for achieving this type of data binding.

Question 5: What are Single Page Applications? How do they work in Angular? Requirement: Foundational Angular knowledge

Answer: Single Page Applications (SPAs) are web applications that use only one HTML page. As the user interacts with the page, new content is dynamically updatedon that master page. Navigation between pages happenswithout refreshing the whole page. Angular uses AJAX and to dynamically update HTML elements. Angular Routing can be used to make SPAs. The result is an application that feels more like a desktop app rather than a webpage.

Question 6: What‘s the basic syntax of a Decorator in Angular? Requirement: Foundational Angular Knowledge

Answer: @() with optional parameters.

Question 7: What is [(ngModel)] used for? Requirement: Foundational Angular Knowledge

Answer: Two-way data binding.

Question 8: What are the basic parts of an Angular application? Requirement: Foundational Angular Knowledge

Answer: Modules, Component, Data Binding, Template, Directives, Dependency Injection, Services, Routing.

Question 9: Tell me about a time you received feedback on a task. Requirement: Following instructions and receiving feedback

Answer: This is a typical open-ended question. The candidate should demonstrate they can accept, understand and act on feedback.

Question 10: Describe how you would approach solving (some problem) on a high level? Requirement: Thinking like a programmer

Answer: In this question, the problem should be directly related to the work the candidate will actually be doing. You aren‘t looking for a perfect answer or even necessarily a correct answer. Instead, listen to how they approach solving a problem, their ability to break a problem down into parts, and if they can anticipate problems

Question 11: What are some advantages of using Angular framework for building web applications? Requirement: Expert Angular knowledge

Answer: Advantages of using the Angular framework include:

• Angular does lots of things for you under the hood. Itsaves time for developers by doing a lot of the work for them like writing tedious DOM manipulation tasks
• TypeScript and the Angular framework allow you to catch errors much earlier
• In many cases has faster performance than traditional web development techniques
• Can give web apps the feel of a desktop application
• It separates out the code of an application to make it easier for multiple developers to work on an app and easier to test
• More consistent code base that‘s easy to maintain
• Big developer community

Question 12: What function is called when an object is created in TypeScript? What is it‘s basic syntax in TypeScript code? Requirement: TypeScript knowledge

Answer: The constructor function is called. It‘s syntax is:  Constructor(){}

Question 13: In Angular, how can you interact between Parent and Child components? Requirement: Expert Angular knowledge

Answer: When passing data from Parent to Child component, you can use the @Input decorator in the Child component. When passing data from Child to Parent component, you can use the @Output decorator in the Child component.

Question14: What is Angular Material? Answer: It is a UI component library. Angular material helps in creating attractive, consistent, and fully functional web pages as well as web applications. It does so while following modern web design principles, including browser portability and graceful degradation.

Question 15: What is the sequence of Angular Lifecycle Hooks? Requirement: Foundational Angular knowledge

Answer: OnChange() – OnInit() – DoCheck() – AfterContentInit() – AfterContentChecked() – AfterViewInit() – AfterViewChecked() – OnDestroy().

Question 16: If you provide a service in two components‘ “providers” section of @Component decorator, how many instances of service shall get created? Requirement: Foundational Angular knowledge

Answer: 2

Question 17: What is the main difference between constructor and ngOnInit? Requirement: Foundational Angular knowledge

Answer: The constructor is a feature of the class itself, not Angular. The main difference is that Angular will launch ngOnInit after it has finished configuring the component. Meaning, it is a signal through which the @Input() and other banding properties and decorated properties are available in ngOnInit, but are not defined within the constructor by design.

Question 18: What modules should you import in Angular to use [(ngModel)] and reactive forms? Requirement: Middle Angular knowledge, Tools/libraries

Answer: FormsModule and Reactiveforms Module.

Question 19: How similar is AngularJS to Angular 2? Requirement: Middle Angular knowledge

Answer: Both are front-end frameworks maintained by Google, but Angular 2 is not a simple update of AngularJS, it is a new framework written from scratch. Updating an app from AngularJS to Angular 2 would require a complete rewrite of the code.

Question 20: What were some features introduced in the different versions of Angular (2, 4, 5 and 6)? Requirement: Expert Angular knowledge, Component-based architecture

Answer:

Angular 2:

• Complete rewrite of the Angular framework
• Component-based rather than controllers/view/$scope. This allows more code to be reused, easier communication between components and easier testing
• Much faster
• Support for mobile devices
• More language choices such as TypeScript

Angular 4:

• An update to Angular 2, not a complete rewrite. Updating from Angular 2 to 4 just requires updating the core libraries
• Improvements to Ahead-of-time (AOT) generated code
• Support for new versions of TypeScript
• Animation packages are removed from the core package
• Else block

Angular 5:

• Focused on making Angular smaller and faster to use
• Http is depreciated and HttpClient API client is now recommended for all apps
• Supports TypeScript 2.3
• Introduction of a build optimizer
• Angular Universal State Transfer API
• Improvements to the Angular Compiler
• Router Lifecycle Events
• Better cross-browser standardization

Angular 6:

• Better service worker support
• Better URL serialization
• Ivy rendering engine
• ng update and ng add
• <template> element completely removed
• Angular Elements/Custom Elements
• Form validation changes
• Schematics

Question 21: What is Transpiling in Angular? Requirement: Middle Angular knowledge, TypeScript

Answer: Transpiling means converting the source code of one programming language into another. In Angular, that usually means converting TypeScript into JavaScript. You can write the code for your Angular application in TypeScript (or another language such as Dart) that is then transpiled to JavaScript for the application. This happens internally and automatically.

Question 22: What is AOT Compilation? Requirement: Expert Angular knowledge, Optimization

Answer: AOT refers to Ahead-of-time compilation. In Angular, it means that the code you write for your application iscompiled at build time before the application is run in a browser. It‘s an alternative to Just-in-time compilation, where code is compiled just before it is run in the browser. AOT compilation can lead to better application performance.

Question23: What is Angular? Answer: Angular is a TypeScript-based open-source web application framework, developed and maintained by Google. It offers an easy and powerful way of building front end web-based applications.

Angular integrates a range of features like declarative templates, dependency injection, end-to-end tooling, etc. that facilitates web application development.

Question 24: How many Change Detectors can there be in the whole application? Requirement: Expert Angular knowledge

Answer: Each component has its own ChangeDetector. All Change Detectors are inherited from AbstractChangeDetector.

Question 25: What change detection strategies do you know? Requirement: Expert Angular knowledge

Answer: There are two strategies – Default and OnPush. If all components use the default strategy, Zone checks the entire tree regardless of where the change occurred. To inform Angular that we will comply with the performance improvement conditions, we need to use the onpush change detection strategy. This will tell Angular that our component depends only on the input and any object that is passed to it should be considered immutable. This is all built on the Principle of the mile automaton, where the current state depends only on the input values.

Question 26: What is Change Detection, how does Change Detection Mechanism work? Requirement: Expert Angular knowledge

Answer: Change Detection is the process of synchronizing a model with a view. In Angular, the flow of information is unidirectional, even when using the ng Model to implement two-way binding, which is syntactic sugar on top of a unidirectional flow.

Change Detection Mechanism-moves only forward and never looks back, starting from the root (root) component to the last. This is the meaning of one-way data flow. The architecture of an Angular application is very simple — the tree of components. Each component points to a child, but the child does not point to a parent. One-way flow eliminates the need for a $digest loop.

Question 27: How do you update the view if your data model is updated outside the ‘Zone’? Requirement: Expert Angular knowledge

Answer:

1. Using the ApplicationRef.prototype.tick method, which will run change detection on the entire component tree.
2. Using NgZone.prototype.run method, which will also run change detection on the entire tree. The run method under the hood itself calls tick, and the parameter takes the function you want to perform before tick.
3. Using the ChangeDetectorRef.prototype.detectChanges method, which will launch change detection on the current component and its children.

Question 28: Why do we need lazy loading of modules and how is it implemented? Requirement: Middle Angular knowledge

Answer: Lazy loading of modules is needed to break the code into pieces. When downloading the app in the browser, it doesn’t load all of the application code. During the transition to the route with lazy loading, the module has to load the code into a browser.

Exemple for using lazy loading modules:

{ path: ‘example’, loadChildren: ‘./example/example.module#ExampleModule’, component: PublicComponent },

Question 29: What are Core and Shared modules for? Requirement: Middle Angular knowledge

Answer: A Shared module serves as a generic module for all modules, components, directives, pipes, etc., which are not required to be in a single copy for the application but need to be imported into many different modules.

A Core module is a place to store services that you need to have in the form of singleton for the entire application (for example, a user authorization service with data storage about it).

Question 30: What are some points to consider when optimizing an Angular 6 application for performance? Requirement: Application performance optimization

Answer: There are many ways, some ideas include:

AOT compilation, bundling and uglifying the application, tree shaking, lazy loading, separating dependencies and devDependencies, Using OnPush and TrackBy, removing unnecessary 3rd party libraries and import statements, avoid computing values within the template,

Question 31: What are some important practices to secure an Angular application? Requirement: Designing for security

Answer: Some basic guidelines include:

• Check that all requests come from within your own web app and not external websites
• Sanitize all input data
• Use Angular template instead of DOM APIs
• Content Security Policies
• Validate all data with server-side code
• Use an offline template compiler
• Avoid including external URLs in your application
• Make JSON responses non-executable
• Keep all libraries and frameworks up-to-date

Question 32: What‘s the difference between unit testing and end-to-end testing? What are some testing tools you would use for an Angular application? Requirement: End-to-end and unit testing

Answer: Unit testing is a technique to test that isolated segments of code are functioning properly. End-to-end testing involves checking that entire sets of components to make sure they are working together properly and that the application is working as you would expect. End-to-end tests often simulate user interactions to test that an app is functioning as it should. Jasmine and Karma are all great testing tools.

Question 33: Describe a time you fixed a bug/error in an application. How did you approach the problem? What debugging tools did you use? What did you learn from this experience? Requirement: Debugging, Breaking down a problem into parts

Debugging is one of the key skills for any software developer. However, the real skill is in breaking the problem down in a practical way rather than finding small errors in code snippets. Debugging often takes hours or even days, so you don‘t have time in an interview setting. Asking these questions will give you an idea of how your candidate approaches errors and bugs.

Answer: In the candidate‘s response you should look out for things like:

• A measured, scientific approach
• Breaking down the problem into parts
• Finding out how to reproduce the error
• Expressing and then testing assumptions
• Looking at stack traces
• Getting someone else to help/take a look
• Searching the internet for others that have had the same problem
• Writing tests to check if the bug returns
• Checking the rest of the code for similar errors
• Turn problems into learning experiences

Question 34: What’s the most important thing to look for or check when reviewing another team member’s code? Requirement: Mentoring less experienced developers, Leadership skills

Answer: Here you‘re checking for analysis skills, knowledge of mistakes that less experienced developers make, keeping in mind the larger project and attention to detail.

A good answer might mention code functionality, readability and style conventions, security flaws that could lead to system vulnerabilities, simplicity, regulatory requirements, or resource optimization

Question35: Please explain the various features of Angular. Answer: There are several features of Angular that makes it an ideal front end JavaScript framework. Most important of them are described as follows:

• Accessibility Applications

Angular allows creating accessible applications using ARIA-enabled components, built-in a11y test infrastructure, and developer guides.

• Angular CLI

Angular provides support for command line interface tools. These tools can be used for adding components, testing, instant deploying, etc.

• Animation Support

Angular’s intuitive API allows the creation of high-performance, complex animation timelines with very little code.

• Cross-Platform App Development

Angular can be used for building an efficient and powerful desktop, native, and progressive web apps. Angular provides support for building native mobile applications using Cordova, Ionic, or NativeScript.

Angular allows creating high performance, offline, and zero-step installation progressive web apps using modern web platform capabilities. The popular JS framework can also be used for building desktop apps for Linux, macOS, and Windows.

• Code Generation

Angular is able to convert templates into highly-optimized code for modern JavaScript virtual machines.

• Code Splitting

With the new Component Router, Angular apps load quickly. The Component Router offers automatic code-splitting so that only the code required to render the view that is requested by a user is loaded.

• Synergy with Popular Code Editors and IDEs

Angular offers code completion, instant errors, etc. with popular source code editors and IDEs.

• Templates

Allows creating UI views with a simple and powerful template syntax.

• Testing

Angular lets you carry out frequent unit tests using Karma. The Protractor allows running faster scenario tests in a stable way.

Question: Could you explain services in Angular? Answer: 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.

The primary intent of an Angular service is to organize as well as share business logic, models, or data and functions with various components of an Angular application.

The functions offered by an Angular service can be invoked from any Angular component, such as a controller or directive.

Question36:Discuss the advantages and disadvantages of using Angular? Answer: Following are the various advantages of using Angular:

• Ability to add a custom directive
• Exceptional community support
• Facilitates client and server communication
• Features strong features, such as Animation and Event Handlers
• Follows the MVC pattern architecture
• Offers support for static template and Angular template
• Support for two-way data-binding
• Supports dependency injection, RESTful services, and validations

Disadvantages of using Angular are enumerated as follows:

• Complex SPAs can be inconvenient and laggy to use due to their size
• Dynamic applications do not always perform well
• Learning Angular requires a decent effort and time

Question40: How do Observables differ from Promises? Answer: As soon as a promise is made, the execution takes place. However, this is not the case with observables because they are lazy. This means that nothing happens until a subscription is made. While promises handle a single event, observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.

Question41: Please explain the difference between Angular and AngularJS? Answer: Various differences between Angular and AngularJS are stated as follows:

• Architecture – AngularJS supports the MVC design model. Angular relies on components and directives instead
• Dependency Injection (DI) – Angular supports a hierarchical Dependency Injection with unidirectional tree-based change detection. AngularJS doesn’t support DI
• Expression Syntax – In AngularJS, a specific ng directive is required for the image or property and an event. Angular, on the other hand, use () and [] for blinding an event and accomplishing property binding, respectively
• Mobile Support – AngularJS doesn’t have mobile support while Angular does have
• Recommended Language – While JavaScript is the recommended language for AngularJS, TypeScript is the recommended language for Angular
• Routing – For routing, AngularJS uses $routeprovider.when() whereas Angular uses @RouteConfig{(…)}
• Speed – The development effort and time are reduced significantly thanks to support for two-way data binding in AngularJS. Nonetheless, Angular is faster thanks to upgraded features
• Structure – With a simplified structure, Angular makes the development and maintenance of large applications easier. Comparatively, AngularJS has a less manageable structure
• Support – No official support or updates are available for the AngularJS. On the contrary, Angular has active support with updates rolling out every now and then

Question42: What is AOT (Ahead-Of-Time) Compilation? Answer: Each Angular app gets compiled internally. The Angular compiler takes in the JS code, compiles it and then produces some JS code. This happens only once per occasion per user. It is known as AOT (Ahead-Of-Time) compilation.

Question43: Can you draw a comparison between the service() and the factory() functions? Answer: Used for the business layer of the application, the service() function operates as a constructor function. The function is invoked at runtime using the new keyword.

Although the factory() function works in pretty much the same way as the service() function does, the former is more flexible and powerful. In actual, the factory() function are design patterns that help in creating objects.

Question44: Please explain the digest cycle in Angular? Answer: The process of monitoring the watchlist in order to track changes in the value of the watch variable is termed the digest cycle in Angular. The previous and present versions of the scope model values are compared in each digest cycle.

Although the digest cycle process gets triggered implicitly, it is possible to start it manually by using the $apply() function.

Question45: Why prioritize TypeScript over JavaScript in Angular? Answer: TypeScript is developed by Microsoft and it is a superset of JavaScript. The issue with JS is that it isn’t a true OOP language. As the JS code doesn’t follow the Prototype Pattern, the bigger the size of the code the messier it gets. Hence, it leads to difficulties in maintainability as well as reusability. To offset this, TypeScript follows a strict OOP approach.

Question46: What is ViewEncapsulation and how many ways are there do to do it in Angular? Answer: To put simply, ViewEncapsulation determines whether the styles defined in a particular component will affect the entire application or not. Angular supports 3 types of ViewEncapsulation:

• Emulated – Styles used in other HTML spread to the component
• Native – Styles used in other HTML doesn’t spread to the component
• None – Styles defined in a component are visible to all components of the application.

Question47: What is the process called by which TypeScript code is converted into JavaScript code? Answer: It is called Transpiling. Even though TypeScript is used for writing code in Angular applications, it gets internally transpiled into equivalent JavaScript.

Question48: What is SPA (Single Page Application) in Angular? Contrast SPA technology with traditional web technology? Answer: In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike the traditional web technology, SPA technology is faster and easy to develop as well.

In the conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.

Question 49: Briefly explain the CSS box model. Write some code snippets to describe show what

you mean.

Requirement: Basic CSS skills

Answer: CSS is the language that describes how webpages look. Every front-end developer should

have good CSS knowledge. Good candidates will be able to describe CSS concepts concisely.

The CSS box model refers to the layout and design of HTML elements. It’s a box shape that wraps

around each HTML element. A box is made up of its content, padding, border and margin.

● Content of the box

● Padding

● Border

● Margin

(the same padding on all 4 sides)

padding: 25px;

(padding for the top, right, bottom, left)

padding: 25px 50px 75px 100px;

(top/bottom padding 25 pixels, right/left padding 50 pixels)

padding: 25px 50px;

Question50: Could you explain the various types of filters in Angular. Answer: In order to format the value of expression so that it can be displayed to the user, Angular has filters. It is possible to add these filters to the controllers, directives, services, or templates. Angular also provides support for creating custom filters.

Organizing data in such a way so that it is displayed only when certain criteria are fulfilled is made possible using filters. Filters are added to the expressions using the pipe ‘|’ character. Various types of Angular filters are enumerated as follows:

• currency – Formats a number to the currency format
• date – Formats a data to some specific format
• filter – Selects a subset of items from an array
• json – Formats an object to a JSON string
• limitTo – Limits an array or string into a specified number of characters or elements
• lowercase – Formats a string to lowercase
• number – Formats a number to a string
• orderBy – Orders an array by an expression

Answer: Following code demonstrates how to navigate between different routes in an Angular app dubbed “Some Search App”:

import {Router} from "@angular/router";
.
.
.
@Component({
  selector: 'app-header',
  template: `
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" (click)="goHome()">Some Search App</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" (click)="goHome()">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" (click)="goSearch()">Search</a>
    </li>
  </ul>
</nav>
 `
})
class HeaderComponent {
  constructor(private router: Router) {}
  goHome() {
    this.router.navigate(['']);
  }
  goSearch() {
    this.router.navigate(['search']);
  }
}

]]>