Angular 8 Interview Questions & Answers [BEST & NEW] - 2020
Angular 8 Interview Questions and Answers

Angular 8 Interview Questions & Answers [BEST & NEW]

Last updated on 04th Jun 2020, Blog, Interview Questions

About author

Rakesh (Senior Project Manager )

Delegates in Corresponding Technical Domain with 9+ Years of Experience. Also, He is a Technology Writer for Past 6 Years & Share's this Informative Blogs for us.

(5.0) | 16547 Ratings 7268

Angular 8 is a client-side TypeScript based framework which is used to create dynamic web applications. It is very similar to its previous versions except having some extensive features.Time-to-time (eg. news update webs applications).It supports TypeScript 3.4 and it is required to run the Angular 8 project.

1. Is the Angular and AngularJS different from each other?

Ans:

The simple differences that you should keep in mind about Angular and AngularJS are that:

  • Angular is the upgraded version of AngularJS.
  • Also angular reduces the workload of the developer with its upgraded framework as well as, also faster. Whereas, AngularJS makes it more time to complete the task.
  • Secondly, Angular uses language- ‘TypeScript’ and AngularJS use language- ‘JavaScript’ to develop a program.
  • Early, AngularJS didn’t have any mobile support but now Angular provides mobile support.

2. If you’re using Angular in your project, what are the advantages of that?

Ans:

Some advantages of using Angular in a project:

  • It supports two-way data-binding.
  • It follows MVC pattern architecture.
  • As well as Validations supported.
  • It supports static template and Angular template.
  • You can add a custom directive.
  • Also, supports RESTful services.
  • Support for dependency injection.
  • Client and server communication facilitated.
  • Has strong features like Event Handlers, Animation, etc.

3. For what, you mainly use the Angular in your application?

Ans:

Angular is a complete front-end framework that is really helpful in creating websites that are reliable, scalable, modular, easier to develop, and test. Secondly, Angular is a complete web-solution by itself from the initial stages of building to the final deployment of your app.

Since Angular uses TypeScript, it’s easier to scale and prevent silly and unexpected errors. And also it’s backed by Google.

4. What are the key features of Angular?

Ans:

Valiant features of the Angular:

  • Templates.
  • Model View Controller (MVC).
  • Dependency Injection (DI).
  • Directive.
  • Code splitting.
  • Validation.
  • Testing.
  • Child-Parent Relationship.
  • Data Binding.
  • Localization.

5. What are the benefits of Type Script in Angular?

Ans:

There are five major benefits of Type Script in Angular:

  • Consistency: Code consistency is an important goal to strive for in any code base. If you or your team have to support production applications then you understand how important consistency is and why it leads to better maintenance.
  • Productivity: Consistency brings productivity into the picture as well. Secondly, developers don’t have to worry as much about if they’re doing it the “right way”.
  • Maintainability: Easy to maintain, as well as it uses a framework backed by a full-time development team combined with a robust open source community is a key priority for most enterprises.
  • Molecularity: Angular is all about organizing code into “buckets”. Everything you create whether it’s components, services, pipes, or directives has to be organized into one or more buckets.
  • Catch Errors Early: Type Script in Angular, it quickly catches the errors.

6. What is a SPA?

Ans:

Single Page Application (SPA) is a type of web application or website that dynamically reloads selected page elements in line with user interactions in order to avoid fetching entire new pages from a server. This can dramatically improve the speed and overall flow of a digital experience.

Example of Single Page Application:

  • Netflix
  • Gmail
  • Facebook
  • Twitter

7. What is MVC Architecture?

Ans:

MVC Architecture

MVC Stands for “Model-View-Controller. The MVC model or “pattern” that is commonly used for developing modern user interfaces. It provides fundamental pieces for designing programs for desktop or mobile, as well as web applications. Also, MVC, one of the most frequently used industry-standard web development frameworks to create scalable and extensible projects.

8. What is the current version of angular?

Ans:

 The current version of Angular and its detail:

  • Version: Angular 8
  • Status: Active
  • Released: May 28, 2019

9. What’s the difference between an Angular component and module?

Ans:

s

Components control views HTML. They also communicate with other components and services to bring functionality to your app:

Modules consist of one or more components. As well as they do not control any HTML. As well as the modules declare which components can be used by components belonging to other modules, which classes will be injected by the dependency injector and which component gets bootstrapped. Secondly, Modules allow you to manage your components to bring molecularity to your app.

10. What port does angular run on?

Ans:

By default, Angular runs on port 4200 but it can configure as per demands.

11. Could you explain services in Angular?

Ans:

Singleton objects in Angular that get instantiate only once during the lifetime of an application, called services. As well as, An Angular service contains methods that maintain the data throughout the life of an application.

As well as, the primary intent of an Angular service is to organize it and also share business logic, models, as well as data and functions with different components of an Angular application. And the functions offered by it service can be invoked from any component, such as a controller or directive. 

12. What is ngOnInit ()? How to define it?

Ans:

ngOnInit ()- lifecycle hook that is called after Angular has finished initializing all data-bound properties of a directive. It defined as:

  • Interface OnInit {
  •         ngOnInit () : void
  •    } 

13. Explain the difference between an Annotation and a Decorator in Angular?

Ans:

In Angular, annotations are used to create an annotation array. They only metadata set of the class using the Reflect Metadata library. Decorators in Angular, design patterns used for separating decoration or modification of some class without changing the original source code.

14. What are directives in Angular?

Ans:

Directives are one of the core features of Angular. Also, they allow an Angular developer to write new, application-specific HTML syntax. And in actual, directives are functions that are executed by the Angular compiler when the same finds them in the DOM.

Directives are of three types:

  • Attribute Directives
  • Component Directives
  • Structural Directives

15. What is Angular Material?

Ans:

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

16. What is the AOT (Ahead-Of-Time) Compilation?

Ans:

Each Angular app gets compiled internally. The Angular compiler takes in the TypeScript code, compiles it and then produces some JavaScript code. As well as, this happens only when, once per occasion per user. It is known as AOT (Ahead-Of-Time) compilation.

17. What is NgRx?

Ans:

NgRx is a group of Angular libraries for reactive extensions. Ngrx/Store implements the Redux pattern using the well-known RxJS observables of Angular 2. It provides several advantages by simplifying your application state to plain objects, enforcing unidirectional data flow, and more. The Ngrx/Effects library allows the application to communicate with the outside world by triggering side effects.

18. What is NGXS?

Ans:

NGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application’s state, providing simple rules for predictable state mutations. As well as, NGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators.

19. What are observables?

Ans:

Observables are just that – things you wish to observe and take action on. Angular 2 uses the Observer pattern which simply means – Observable objects are registered, and other objects observe (in Angular 2 using the subscribe method) them and take action when the observable object is acted on in some way.

They are similar to promises, but with some differences. Promises execute once and then are done. Observables continue to be observed after the event occurs. Observables can also be canceled (you can stop observing an object during runtime). Promises cannot be canceled – which makes sense since you’re only executing the promise one time.

  • import { Observable } from ‘rxjs’;
  •   const observable = new Observable(observer => {
  •    setTimeout(() => {
  •         observer.next(‘Hello from a Observable!’);
  •    }, 2000);
  • });`

20. What does a Subscribe method do in Angular?

Ans:

It is a method which subscribes to an observable. Whenever the subscribe method is called, an independent execution of the observable happens. In Angular .subscribe() is a method on the Observable type. The Observable type is a utility that asynchronously or synchronously streams data to a variety of components or services that have subscribed to the observable. So every time the observable emits some data, the subscribe method is triggered.

    Subscribe For Free Demo

    21. What is an AsyncPipe in Angular?

    Ans:

    When an observable or promise returns something, we use a temporary property to hold the content. Later, we bind the same content to the template. Even, with the usage of AsyncPipe, the promise or observable can be directly used in a template and a temporary property is not required.

    22. Explain the differences between one-way binding and two-way binding?

    Ans:

    The one-way binding used to bind the data from the model to view without updating the HTML template or view automatically. Thus in order to update the HTML template, we need to write a custom code which updates the view every time whenever a data-bound from model to view. Secondly, whereas, two-way binding used to bind the data from the model to view and vice versa(i.e view to model) by automatically updating the HTML template without writing any custom code.

    23. What is the sequence of Angular Lifecycle Hooks?

    Ans:

    Angular Lifecycle Hooks

    24. What are Pure and Impure Pipes?

    Ans:

    Pure pipes are stateless that flow input date without remembering anything or causing detectable side-effects. Pipes are pure by default, hence most pipes are pure. As well as, we can make a pipe impure by setting its pure flag to false. Secondly, Angular executes a pure pipe only when it detects a pure change to the input value. Also, a pure change is either a change to a primitive input value or a changed object reference.

    Impure pipes are those which can manage the state of the data they transform. Also, a pipe that creates an HTTP request, stores the response and displays the output, is an impure or stateful pipe. Secondly, Stateful Pipes should be used cautiously. Angular provides AsyncPipe, which is stateful. In the following code, the pipe only calls the server when the request URL changes and it caches the server response.

    • @Pipe({
    • name: ‘fetch’,
    • pure: false
    • })
    • export class FetchJsonPipe implements PipeTransform {
    •  private cachedData: any = null;
    •  private cachedUrl = ”; 
    • constructor(private http: Http) {}
    • transform(url: string): any {
    •  if(url !== this.cachedUrl) {
    •   this.cachedData = null;
    •   this.cachedUrl = url;
    •   this.http.get(url)
    •   .map(result => result.json())
    •   .subscribe(result => this.cachedData = result);
    •   return this.cachedData;
    •  }
    • }

    25. What is Angular TestBed (ATB)?

    Ans:

    The Angular Test Bed (ATB) is a higher level Angular Only testing framework that allows us to easily test behaviors that depend on the Angular Framework. Secondly, it is a slightly easier way to create components, handle injection, test asynchronous behavior and interact with the application. As well as, the TestBed creates a dynamically-constructed Angular test module that emulates an Angular @NgModule.

    26. What are the Core Dependencies of Angular 7?

    Ans:

    There are two core dependencies, RxJS and TypeScript.

    • RxJS 6.3 – RxJS version 6.3 is used by Angular 7. As well as, it has no changes in the version from Angular 6.
    • TypeScript 3.1 – TypeScript version 3.1 is used by Angular 7. Also, it is the upgrade from version 2.9 of Angular 6.

    27. Demonstrate navigating between different routes in an Angular application.

    Here coding which helps to this question:

    • 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’]);
    •   }
    • }

    28. What is the difference between Structural and Attribute directives in Angular? 

    Ans:

    Structural directives are used to alter the DOM layout by removing and adding DOM elements. Also, it is far better in changing the structure of the view. Examples of Structural directives are NgFor and Nglf.

    Attribute Directives :These are being used as characteristics of elements. For example, a directive such as built-in NgStyle in the template Syntax guide is an attribute directive.

    29. What is Tree Shakeable in Angular? 

    Ans:

    The Tree Shakeable: Providers are used to define services and to be used by the dependency injection system in the Angular. It is used in a way that improves the performance of the angular application. Provider mechanism provides the benefits of tree shaking performance and dependency injection. The tree shaking mechanism refers to the process of removing unused code and including only the code that is needed for the application to run.

    30. Give the methods to handle events in Angular?

    Ans:

    There are various methods to handle events. Like:

    Binding to user input events:

    You are able to use the Angular event binding to answer a DOM event. User input triggers so many DOM events. As well as it is a very effective method to get input from the user. For example,

    • <button (click)=”onClickMe()”>Click me!</button>

    Get user input from the event object:

    DOM carries information that possibly is valuable for the components. Below given example make you clean:

    • src/app/keyup.components.ts (template v.1)
    • content_copy

    template: `

    • <input (keyup)=”onKey($event)”>
    • <p>{{values}} </p>

    Key event filtering:

    Every keystroke is heard by the (key-up) event handler. The enter keys matter the most, as it provides the sign of the user that he has done with the typing. As well as, the most efficient method of eliminating the noise is to look after every event.keyCode and the action is taken only when the enter key is pressed.

    Course Curriculum

    Gain In-Depth Knowledge in Angular 8 Training from MNC Experts

    • Instructor-led Sessions
    • Real-life Case Studies
    • Assignments
    Explore Curriculum

    31. As a developer, what is new in angular7 or 8?

    Ans:

    Angular Elements is enabled to support content projection with the help of web standard for custom elements.

  • Angular Material Gets Mini Updates
  • Firstly, Angular Material got better in the display that gives it an elegant look in the new update. Moreover, it also added a new homepage for the material, material.io. As well as, in this, you get tooling, design guidance, development components and stay up-to-date with the latest news. Secondly, if you are using an Angular Material v7 then you observe a visual difference as library make changes to itself with the updated version of the Material design.

  • More Better Accessibility
  • In the updated version, it includes a lot of new features to enhance accessibility for selects. Secondly, it adds a new feature of the native select inside mat-form-field. It is far better and outperformed than the mat- select. As well as, both the select and mat-select are available so you can choose what you want to do.

  • Virtual Scrolling
  • The Component Dev Kit (CDK) is available in the market with the great virtual scrolling capabilities that the user can apply by importing the `ScrollingModule`!

    • <cdk-virtual-scroll-viewport itemSize=”20″>  
    • <div *cdkVirtualFor=”let dog of dogsArray”> {{dog}}</div>
    • </cdk-virtual-scroll-viewport>
  • Drag & Drop
  • The CDK in the new update also now recommends Drag & Drop, which possess these great hallmarks.

  • Automated render as a user moves items
  • It is a new feature available only in Angular 7

  • Helper methods for reordering/transferring items in lists
  • For reordering or transferring items in lists, as well as a developer can use a helper method: moveItemInArray and transferArrayItem.

  • Enhancing Application Performance
  • You will get enhanced application performance in Angular 7. It is the advanced version of Angular.

  • A safeguard has come into play for the users of Angular 7
  • It gives a portent to new application builders when they are crossing the budget with their bundle size. Then the warning occurs on 2 MB whereas, an error occurs over 5 MB. Also, it can change the limits simply in an angular.json file. Secondly, the thing you have to do is add in a bit about the warnings and error sizes with budget details.

    • “budgets”: [
    •   {
    • “type”: “initial”,
    •     “maximumWarning”: “2mb”,
    •     “maximumError”: “5mb”
    •   }
    • ]

    32. Explain Angular Authentication and Authorization.

    Ans:

    The user login credentials are passed to an authenticated API, which is present on the server. As well as, Post-server-side validation of the credentials, a JWT (JSON Web Token) is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication. Secondly, Post-logging-in successfully, different users have a different level of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.

    34. Comparison between the service () and the factory() functions?

    Ans:

    Used for the business layer of the application, the service() function operates as a constructor function. As well as, 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. Secondly, the factory() functions are design patterns that help in creating objects.

    35. What are the various types of filters in an Angular?

    Ans:

    Filters in Angular, it is possible to add these filters to the controllers, directives, services, or templates. Angular also provides support for creating custom filters. Secondly, Organizing data in such a way so that it is displayed only when certain criteria are fulfilled is made possible using filters. 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

    36. What is routing in Angular?

    Ans:

    Angular provides a very powerful and simple routing mechanism. Since angular is a SPA no server requests are needed to navigate between routes which make the page loading instantaneous. Secondly, An Angular router provides functions like navigateByUrl(‘route’) for navigation which can also be used to pass some optional data. Angular also provides options for authorization while accessing various routes like AuthGuard(CanAct) and make the application safer.

    37. Why prioritize TypeScript over JavaScript in Angular?

    Ans:

    TypeScript is developed by Microsoft and it is a superset of JavaScript. As well as, the issue with JavaScript is that it isn’t a true OOP language. Secondly, the JavaScript code doesn’t follow the Prototype Pattern, the bigger the size of the code the messier it gets. Although, it leads to difficulties in maintainability as well as reusability. To offset this, TypeScript follows a strict OOP approach.

    38. What do you understand about the Traceur compiler in Angular?

    Ans:

    About the Traceur compiler in Angular

    Traceur is a compiler which takes ECMAScript and compiles it down to regular Javascript that runs in the browser. Traceur can be used in several ways like- typing or pasting the ES6 code into the read-eval-print-loop page, as well as, by including traceur in the web page and compiling ES6 code content on the fly, or many other ways. Even it is written in ES6, compiled to ES5.

    Secondly, the main goal of a traceur compiler is to inform the designs of Javascript features and allows us to write the code in a better manner. As well as, nowadays, traceur compilers are broadly used in Angular platform.

    39. What CLI stands for? Also, explain it in a few words.

    Ans:

    CLI is Command Line Interface, which can be used to create the Angular application. As well as, using CLI, it can also create a unit secondly, end-to-end tests for the Angular application.

    40. Can an Angular app be PWA? Or what is Angular PWA?

    Ans:

    Yes, Angular can be a PWA i.e a progressive web app secondly, it is very much configurable. As well as, Progressive Web Apps, that allow any web application to feel and behave very much like a native app on a mobile device: Offline caching with service workers so your app can work without an internet connection.

    41. What is Angular firebase?

    Ans:

    Firebase authentication, as well as all backend related tasks, can be easily implemented in an Angular project using Firebase functions. Secondly, Firebase is a good choice for web or mobile apps developed with Angular because it provides highly useful backend services like real-time database, storage, authentication, etc.

    42. Do you think Angular helps in SEO?

    Ans:

    Yes absolutely, With features like Server Side Rendering(SSR), service workers, PWA’s, AOT, MetaService, as well as TitleService Angular really helps in boosting up the SEO of an app as well as the website.

    43. What is state management in Angular?

    Ans:

    State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface. Secondly, in this user interface programming technique, the state of one UI control depends on the state of other UI controls.

    For example: a state management UI control such as a button will be in the enabled state when input fields have valid input values as well as the button will be in the disabled state when the input fields are empty or have invalid values.

    Libraries like NgRx and NGXS can be used for state management in Angular.

    45. Differentiate between constructor and ngOnInit?

    Ans:

    A constructor is a special method which will be called whenever we create new objects. And generally, it used initializing the class members. Also, it is a feature of the class(typescript) itself, an object-oriented design concept not Angular. Whereas, ngOnInit is a life cycle hook managed by Angular that being added to a prototype of the class created. As well as it is called by Angular when a component is initialized.

    46. How to make API calls in Angular?

    Ans:

    API calls in Angular can be executed by using the HttpClient which is an inbuilt package provided by Angular. All classes can be made by the HttpClient of Angular like getting Requests, Post Requests, Put Requests, Delete Requests. API (Application Programming Interface) in Angular, is a set of global JavaScript functions used to carry out the common tasks such as comparing objects, iterating objects, converting data.

    47. What is JIT?

    Ans:

    What is JIT

    JIT: Just-in-Time Compilation: JIT compilation as the name implies, compiles the application Just-in-Time in the browser at runtime. As well as, the vendor bundle contains the compiler along with the angular framework. Also, the compiler code is roughly half of the Angular framework.

    48. What is a service worker in Angular?

    Ans:

    Angular applications, as single-page applications, are in a prime position to benefit from the advantages of service workers. So, Starting with version 5 Angular ships with a service worker implementation.

    As well as, Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs. Secondly, an Angular service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content.

    49. What do you understand by Angular elements?

    Ans:

    Angular elements are Angular components packaged as custom elements (it is a web standard for defining new HTML elements in a framework). Angular Elements hosts an Angular component, providing a bridge between the data as well as logic defined in the component and standard DOM APIs, thus, providing a way to use Angular components.

    50. What is Angular DSL?

    Ans:

    A domain-specific language (DSL) is a computer language specialized to a particular application domain. As well as, Angular has its own Domain Specific Language (DSL) which allows us to write Angular specific HTML-like syntax on top of normal HTML. As well as, it has its own compiler that compiles this syntax to HTML that the browser can understand. This DSL is defined in NgModules such as animations, forms, and routing and navigation.

    There are 3 main syntaxes in Angular DSL

    • (): Used for Output and DOM events.
    • []: Used for Input and specific DOM element attributes.
    • *: Structural directives (*ngFor or *ngIf) will affect/change the DOM structure.

    52. What is Angular?

    Ans:

    Angular is an open-source front-end web framework. It is one of the most popular JavaScript frameworks that is mainly maintained by Google. It provides a platform for easy development of web-based applications and empowers the front end developers in curating cross-platform applications. It integrates powerful features like declarative templates, an end to end tooling, dependency injection and various other best practices that smoothens the development path.

    54. What is Angular mainly used for?

    Ans:

    Angular is typically used for the development of SPA which stands for Single Page Applications. Angular provides a set of ready-to-use modules that simplify the development of single page applications. Not only this, with features like built-in data streaming, type safety, and a modular CLI,  Angular is regarded as a full-fledged web framework.

     55. What are Angular expressions?

    Ans:

    Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript. These expressions are used to bind application data to HTML

    Syntax:

    • {{ expression }}

     56. What are templates in Angular?

    Ans:

    Templates in Angular are written with HTML that contains Angular-specific elements and attributes. These templates are combined with information coming from the model and controller which are further rendered to provide the dynamic view to the user.

     57. In Angular what is string interpolation?

    Ans:

    String interpolation in Angular is a special syntax that uses template expressions within double curly {{ }} braces for displaying the component data. It is also known as moustache syntax. The JavaScript expressions are included within the curly braces to be executed by Angular and the relative output is then embedded into the HTML code. These expressions are usually updated and registered like watches, as a part of the digest cycle.

    58. What is the difference between an Annotation and a Decorator in Angular?

    Ans:

    Annotations in angular are the “only” metadata set of the class using the Reflect Metadata library. They are used to create an “annotation” array. On the other hand, decorators are the design patterns that are used for separating decoration or modification of a class without actually altering the original source code.

    59. What do you understand by controllers in Angular?

    Ans:

     Controllers are JavaScript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

    60. What is scope in Angular?

    Ans:

    Scope in Angular is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in a hierarchical structure which mimics the DOM structure of the application. Scopes can watch expressions and propagate events.

    61. Enlist the major technologies used to create Angular 8 Projects?

    Ans:

     Some of the popular technologies used to create Angular 8 applications are:

    • Karma: It is a testing framework for Angular development that provides an environment to test your application on real browsers, phones, and tablets.
    • Protractor: It is also an end to end test framework that is built on top of WebDriver JS.
    • Ment.io : it is used to introduce mentions and macros widgets with no dependencies on jQuery.
    • Angular Kickstart: It speeds up the development process of your AngularJS application.
    • AngularFire: It is a flexible API that is used to create backends in your Angular application.

    62. What is data binding?

    Ans:

    In Angular, data binding is one of the most powerful and important features that allow you to define the communication between the component and DOM(Document Object Model). It basically simplifies the process of defining interactive applications without having to worry about pushing and pulling data between your view or template and component. In Angular, there are four forms of data binding:

    •  String Interpolation
    • Property Binding
    • Event Binding
    • Two-Way Data Binding

    63. What is the purpose of a filter in Angular?

    Ans:

     Filters in Angular are used for formatting the value of an expression in order to display it to the user. These filters can be added to the templates, directives, controllers or services. Not just this, you can create your own custom filters. Using them, you can easily organize data in such a way that the data is displayed only if it fulfills certain criteria. Filters are added to the expressions by using the pipe character |, followed by a filter.

     64. What are the differences between Angular and jQuery?

    Ans:

    Features jQuery Angular
    DOM Manipulation Yes Yes
    RESTful API No Yes
    Animation Support Yes Yes
    Deep Linking Routing No Yes
    Form Validation No Yes
    Two Way Data Binding No Yes
    AJAX/JSONP Yes Yes

    65. What is a provider in Angular?

    Ans:

     A provider is a configurable service in Angular. It is an instruction to the Dependency Injection system that provides information about the way to obtain a value for a dependency. It is an object that has a $get() method which is called to create a new instance of a service. A Provider can also contain additional methods and uses $provide in order to register new providers.

    66. Does Angular support nested controllers?

    Ans:

    Yes, Angular does support the concept of nested controllers. The nested controllers are needed to be defined in a hierarchical manner for using it in the View. 

    Course Curriculum

    Learn Angular 8 Certification Course with 24 Hrs of Sessions

    Weekday / Weekend BatchesSee Batch Details

    67. How can you differentiate between Angular expressions and JavaScript expressions?

    Ans:

    Angular Expressions JavaScript Expressions
    1. They can contain literals, operators, and variables. 1. They can contain literals, operators, and variables.
    2. They can be written inside the HTML tags. 2. They can’t be written inside the HTML tags.
    3. They do not support conditionals, loops, and exceptions. 3. They do support conditionals, loops, and exceptions.
    4. They support filters. 4. They do not support filters.

    68. List down the ways in which you can communicate between applications modules using core Angular functionality.

    Ans:

     Below are the most general ways for communicating between application modules using core Angular functionality :

    • Using events
    • Using services
    • By assigning models on $rootScope
    • Directly between controllers [$parent, $$childHead, $$nextSibling, etc.]
    • Directly between controllers [ControllerAs, or other forms of inheritance]

    69. What is the difference between a service() and a factory()?

    Ans:

     A service() in Angular is a function that is used for the business layer of the application. It operates as a constructor function and is invoked once at the runtime using the ‘new’ keyword. Whereas factory() is a function which works similar to the service() but is much more powerful and flexible. factory() are design patterns which help in creating Objects.

    70. What is the difference between $scope and scope in Angular?

    Ans:

    • $scope in Angular is used for implementing the concept of dependency injection (D.I) on the other hand scope is used for directive linking.
    • $scope is the service provided by $scopeProviderwhich can be injected into controllers, directives or other services whereas Scope can be anything such as a function parameter name, etc. 

    71. Explain the concept of scope hierarchy?

    Ans:

    The $scope objects in Angular are organized into a hierarchy and are majorly used by views. It contains a root scope which can further contain scopes known as child scopes. One root scope can contain more than one child scopes. Here each view has its own $scope thus the variables set by its view controller will remain hidden to the other controllers. The Scope hierarchy generally looks like:

    • Root $scope
    • $scope for Controller 1
    • $scope for Controller 2
    • $scope for Controller ‘n’

    72. What is AOT?

    Ans:

     AOT stands for Angular Ahead-of-Time compiler. It is used for pre-compiling the application components and along with their templates during the build process. Angular applications which are compiled with AOT have a smaller launching time. Also, components of these applications can execute immediately, without needing any client-side compilation. Templates in these applications are embedded as code within their components. It reduces the need for downloading the Angular compiler which saves you from a cumbersome task. AOT compiler can discard the unused directives which are further thrown out using a tree-shaking tool.

    73. Explain jQLite.

    Ans:

    jQlite is also known as jQuery lite is a subset of jQuery and contains all its features. It is packaged within Angular, by default. It helps Angular to manipulate the DOM in a way that is compatible cross-browser. jQLite basically implements only the most commonly needed functionality which results in having a small footprint.

    74. Explain the process of digest cycle in Angular?

    Ans:

    The digest cycle in Angular is a process of monitoring the watchlist for keeping a track of changes in the value of the watch variable. In each digest cycle, Angular compares the previous and the new version of the scope model values. Generally, this process is triggered implicitly but you can activate it manually as well by using $apply(). 

    Digest Cycle in Angular

    75. What are the Angular Modules?

    Ans:

    All the Angular apps are modular and follow a modularity system known as NgModules. These are the containers which hold a cohesive block of code dedicated specifically to an application domain, a workflow, or some closely related set of capabilities. These modules generally contain components, service providers, and other code files whose scope is defined by the containing NgModule.  With modules makes the code becomes more maintainable, testable, and readable. Also, all the dependencies of your applications are generally defined in modules only.

    76. On which types of the component can we create a custom directive?

    Ans:

    Angular provides support to create custom directives for the following:

    • Element directives: Directive activates when a matching element is encountered.
    • Attribute: Directive activates when a matching attribute is encountered.
    • CSS: Directive activates when a matching CSS style is encountered.
    • Comment: Directive activates when a matching comment is encountered

    77. What is Dependency Injection in Angular? 

    Ans:

    Dependency Injection (DI) is a software design pattern where the objects are passed as dependencies rather than hard-coding them within the component. The concept of Dependency Injection comes in handy when you are trying to separate the logic of object creation to that of its consumption. The ‘config’ operation makes use of DI that must be configured beforehand while the module gets loaded to retrieve the elements of the application. With this feature, a user can change dependencies as per his requirements.

    78. Differentiate between one-way binding and two-way data binding.

    Ans:

    In One-Way data binding, the View or the UI part does not update automatically whenever the data model changes. You need to manually write custom code in order to update it every time the view changes.

    One Way Binding

    Whereas, in Two-way data binding, the View or the UI part is updated implicitly as soon as the data model changes. It is a synchronization process, unlike One-way data binding.

    Two way Binding

    Angular Is Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

    79. What do you understand by dirty checking in Angular?

    Ans:

    In Angular, the digest process is known as dirty checking. It is called so as it scans the entire scope for changes. In other words, it compares all the new scope model values with the previous scope values. Since all the watched variables are contained in a single loop, any change/update in any of the variable leads to reassigning of the rest of the watched variables present inside the DOM. A watched variable is in a single loop(digest cycle), any value change of any variable forces to reassign values of other watched variables in DOM

    80. Differentiate between DOM and BOM.

    Ans:

    DOM BOM
    1. Stands for Document Object Model 1. Stands for Browser Object Model
    2. Represents the contents of a web page 2. Works a level above web page and includes browser attributes
    3. All the Objects are arranged in a tree structure and the document can be
    manipulated & accessed via provided APIs only
    3. All global JavaScript objects, variables & functions become members of the
    window object implicitly
    4. Manipulates HTML documents 4. Access and manipulate the browser window
    5. W3C Recommended standard specifications 5. Each browser has its own implementation

    81. What is Transpiling in Angular?

    Ans:

    Transpiling in Angular refers to the process of conversion of the source code from one programming language to another. In Angular, generally, this conversion is done from TypeScript to JavaScript. It is an implicit process and happens internally.

    82. How to perform animation in Angular?

    Ans:

    In order to perform animation in an Angular application, you need to include a special Angular library known as Animate Library and then refer to the ngAnimate module into your application or add the ngAnimate as a dependency inside your application module.

    83. What is transclusion in Angular?

    Ans:

    The transfusion in Angular allows you to shift the original children of a directive into a specific location within a new template. The ng directive indicates the insertion point for a transcluded DOM of the nearest parent directive that is using transclusion. Attribute directives like ng-transclude or ng-transclude-slot are mainly used for transclusion.

    84. What are events in Angular?

    Ans:

    Events in Angular are specific directives that help in customizing the behavior of various DOM events. Few of the events supported by Angular are listed below:

    • ng-click
    • ng-copy
    • ng-cut
    • ng-dblclick
    • ng-keydown
    • ng-keypress
    • ng-keyup
    • ng-mousedown
    • ng-mouseenter
    • ng-mouseleave
    • ng-mousemove
    • ng-mouseover
    • ng-mouseup
    • ng-blur

    85. List some tools for testing angular applications?

    Ans:

    • Karma
    • Angular Mocks
    • Mocha
    • Browserify
    • Sion

    86. How to create a service in Angular?

    Ans:

     In Angular, a service is a substitute object that is wired together using dependency injection. A service is created by registering it in the module it is going to be executed within. There are basically three ways in which you can create an angular service. They are basically three ways in which a service can be created in Angular:

    • Factory
    • Service
    • Provider

    87. What is a singleton pattern and where we can find it in Angular?

    Ans:

    Singleton pattern in Angular is a great pattern which restricts a class from being used more than once. Singleton pattern in Angular is majorly implemented on dependency injection and in the services. Thus, if you use ‘new Object()’ without making it a singleton, then two different memory locations will be allocated for the same object. Whereas, if the object is declared as a singleton, in case it already exists in the memory then simply it will be reused.

    88. What do you understand by REST in Angular?

    Ans:

    REST stands for REpresentational State Transfer. REST is an API (Application Programming Interface) style that works on the HTTP request. In this, the requested URL pinpoints the data that needs to be processed. Further ahead, an HTTP method then identifies the specific operation that needs to be performed on that requested data. Thus, the APIs which follow this approach are known as RESTful APIs.

    89. What is bootstrapping in Angular?

    Ans:

    Bootstrapping in Angular is nothing but initializing, or starting the Angular app. Angular supports automatic and manual bootstrapping.

    • Automatic Bootstrapping: this is done by adding the ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When Angular finds ng-app directive, it loads the module associated with it and then compiles the DOM.
    • Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your Angular application. It is useful where you want to perform any other operation before Angular wakes up and compiles the page.

     90. What is the difference between a link and compile in Angular?

    Ans:

    • Compile function is used for template DOM Manipulation and to collect all the directives.
    • Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.

    91. What do you understand by constants in Angular?

    Ans:

    In Angular, constants are similar to the services which are used to define the global data. Constants are declared using the keyword “constant”. They are created using constant dependency and can be injected anywhere in controller or services.

    92. What is the difference between a provider, a service and a factory in Angular?

    Ans:

    Provider Service Factory
    A provider is a method using which you can pass a
    portion of your application into app.config
    A service is a method that is used to create a service
    instantiated with the ‘new’ keyword.
    It is a method that is used for creating and configuring
    services. Here you create an object, add properties to it
    and then return the same object and pass the factory
    method into your controller.

    93. What are Angular Global APIs?

    Ans:

    Angular Global API is a combination of global JavaScript functions for performing various common tasks like:

    • Comparing objects
    • Iterating objects
    • Converting data

    There are some common Angular Global API functions like:

    • angular. lowercase: Converts a string to lowercase string.
    • angular. uppercase: Converts a string to uppercase string.
    • angular. isString: Returns true if the current reference is a string.
    • angular. isNumber: Returns true if the current reference is a number.

    94. In Angular, describe how you will set, get and clear cookies?

    Ans:

    For using cookies in Angular, you need to include a  module called ngCookies angular-cookies.js.

    To set Cookies: For setting the cookies in a key-value format ‘put’ method is used.

    cookie.set(‘nameOfCookie’,”cookieValue”);

    To get Cookies: For retrieving the cookies ‘get’ method is used.

    cookie.get(‘nameOfCookie’);

    To clear Cookies: For removing cookies ‘remove’ method is used.

    cookie.delete(‘nameOfCookie’);

    95.  If your data model is updated outside the ‘Zone’, explain the process how you will view the view?

    Ans:

    You can update your view using any of the following:

    • ApplicationRef.prototype.tick(): It will perform change detection on the complete component tree.
    • NgZone.prototype.run(): It will perform the change detection on the entire component tree. Here, the run() under the hood will call the tick itself and then the parameter will take the function before the tick and execute it.
    • ChangeDetectorRef.prototype.detectChanges(): It will launch the change detection on the current component and its children.

    96. Explain ng-app directive in Angular.

    Ans:

     ng-app directive is used to define Angular applications which let us use the auto-bootstrap in an Angular application. It represents the root element of an Angular application and is generally declared in <html> or <body> tag. Any number of ng-app directives can be defined within an HTML document but just a single Angular application can be officially bootstrapped implicitly. Rest of the applications must be manually bootstrapped. 

    Example:

    • <div ng-app=“myApp” ng-controller=“myCtrl”>
    • First Name :
    • <input type=“text” ng-model=“firstName”>
    • <br />
    • Last Name :
    • <input type=“text” ng-model=“lastName”>
    • <br>
    • Full Name: {{firstName + ” ” + lastName }}
    • </div>  

    97. What is the process of inserting an embedded view from a prepared TemplateRef?

    Ans:

    •    @Component({
    • selector: ‘app-root’,
    • template: `
    •      <ng-template #template let-name=’fromContext’><div>{{name}}</ng-template>
    • `
    • })
    • export class AppComponent implements AfterViewChecked {
    • @ViewChild(‘template’, { read: TemplateRef }) _template: TemplateRef<any>;
    • constructor() { }
    • ngAfterViewChecked() {
    •      this.vc.createEmbeddedView(this._template, {fromContext: ‘John’});
    • }
    • }

    98. How can you hide an HTML element just by a button click in angular?

    Ans:

    An HTML element can be easily hidden using the ng-hide directive in conjunction with a controller to hide an HTML element on button click.

    View:

    • <div ng-controller=”MyController”>
    •   <button ng-click=”hide()”>Hide element</button>
    •   <p ng-hide=”isHide”>Hello World!</p>
    • </div>

    Controller:

    • controller: function() {
    • this.isHide = false;
    • this.hide = function(){
    • this.isHide = true; }; }

    99.What is Angular CDK?

    Ans:

    Angular CDK (Component Development Kit) is comprised of tools, services, components, classes, and modules that are used by the developers to build components of the web. It represents an abstraction of the functionalities in the Angular material themes. So, it can be used to leverage the features of the Angular Material without adopting the material design language.

    CDK is an open-source toolkit that is released under the @angular/CDK npm package.

    Are you looking training with Right Jobs?

    Contact Us
    Get Training Quote for Free