50 Angular interview questions you must master (Collection)

This article will share with you 50 Angular interview questions that you must master. These 50 interview questions will be analyzed from three parts: beginner-intermediate-advanced and will help you understand them thoroughly!

We have compiled a list of the top Angular interview questions divided into three parts:

• Angular Interview Questions – Beginner Level
• Angular Interview Questions – Intermediate
• Angle Interview Questions – Advanced

[Related tutorial recommendations: "angular Tutorial"]

Beginner Level – Interview Questions

#1. Differentiate between Angular and AngularJS.

AngularSupport MVC design modelUse components and directivesRecommended language: JavaScriptRecommended language: TypeScriptPictures/properties and events require specific ng directivesUse () to bind events, Use [] for attribute bindingDoes not provide any mobile support Provide mobile support$ routeprovider.when() for routing configuration @RouteConfig {(…)} is used for routing configurationDoes not support the concept of dependency injection Hierarchical dependency injection supporting tree-based one-way change detection Hard to manageSimplified structure makes development and maintenance of large applications easier With two-way data binding, development effort and time are reduced Upgrading features is faster than AngularJS No more support or new updatesActive support and frequent new updates

2. What is Angular?

Angular is an open source front-end web framework. It is one of the most popular JavaScript frameworks and is mainly maintained by Google. It provides a platform to easily develop web-based applications and enables front-end developers to manage cross-platform applications. It integrates powerful features such as declarative templates, end-to-end tooling, dependency injection, and various other best practices that make the development path smoother.

3. What are the advantages of using Angular?

Listed below are some of the major advantages of using Angular framework:

• Supports two-way data binding
• It follows the MVC pattern architecture
• It supports static templates and Angular templates
• You can add custom directives
• It also supports RESTfull service
• Supports authentication
• Customers Communication between client and server is facilitated
• Supports dependency injection
• Has powerful features such as event handlers, animations, etc.

4. What is Angular mainly used for?

Angular is often used for the development of SPAs that represent single-page applications. Angular Provides a set of ready-made modules to simplify the development of single-page applications. Not only that, Angular is considered a mature web framework with built-in features of data flow, type safety, and modular CLI.

5. What is an angle expression?

Angular expressions are JavaScript-like snippets of code that are typically placed within bindings such as {{expression}}. These expressions are used to bind application data to HTML

Syntax: {{expression}}

6. Templates in Angular What is it?

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

7. What is string interpolation in Angular?

String interpolation in Angular is a special syntax that uses template expressions in double curly braces **{{}} to display component data. It is also called Mustache syntax. **JavaScript expressions are enclosed in curly braces, executed by Angular, and the relative output is then embedded in the HTML code. These expressions are typically updated and registered like tables as part of a digest loop.

8. What is the difference between Annotation and Decorator in Angular?

Using the Reflect Metadata library, Angular annotations are the "only" set of metadata for a class. They are used to create "annotations" arrays. Decorators, on the other hand, are a design pattern used to decorate or modify a class in isolation without actually changing the original source code.

9. How much do you know about controllers in Angular?

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

10. What is the scope of Angular?

A scope in Angular is an object that references the application model. It is the execution context of the expression. Scopes are arranged in a hierarchy that mimics the application DOM structure. Scopes can monitor expressions and propagate events.

11. What are directives in Angular?

A core feature of Angular is directives, which are attributes that allow you to write new application-specific HTML syntax. They are essentially functions that are executed when the Angular compiler finds them in the DOM. Angular directives are divided into three parts:

• Component directives

• Structural directives

• Attribute directives

#12. What is data binding?

In Angular, data binding is one of the most powerful and important features that allows you to define the communication between components and the DOM (Document Object Model). It radically simplifies the process of defining interactive applications without having to worry about pushing and pulling data between views or templates and components. In Angular, data binding comes in four forms:

• String interpolation

• Property binding

• Event binding

• Two-way data binding

13. Using filters in Angular What is the purpose?

Filters in Angular are used to format the value of an expression so that it can be displayed to the user. These filters can be added to templates, directives, controllers or services. Not only that, you can also create your own custom filters. Using them, you can easily organize your data so that it only appears when certain conditions are met. Add the filter to the expression by using the pipe character |, followed by the filter.

14. What is the difference between Angular and jQuery?

##Features	AngularJS
Building
Language
Expression syntax
Mobile support
routing
Dependency Injection
Structure
Speed
Support

## Angular isYes##RESTful APIAnimation supportdeep link routing##Form verificationisProviders are configurable services in Angular. This is an instruction to the dependency injection system that provides information about the way to obtain dependency values. It is an object with

##Features	jQuery
DOM operations
No	Yes
Yes	is
No	##Yes
No	Yes	##Two-way data binding
No## is		##AJAX/JSONP
is		##15 . What are providers in Angular?

##g

e

t() method, This method is called to create a new instance of the service. Providers can also contain other methods and objects using the $e$（

Yes, Angular does support the concept of nested controllers. The nested controller needs to be defined hierarchically in order to use it in the view.

17. How to distinguish Angular expressions and JavaScript expressions?

Angular Expression

JavaScript Expression

1. They can contain literals, operators and variables. 1. They can contain literals, operators and variables. 2. They cannot be written within HTML tags. 3. They do not support conditions, loops and exceptions. 3. They do support conditions, loops and exceptions. 4. They support filters. 4. They don't support filters.

18. List the ways to communicate between application modules using core Angular functionality.

The following are the most common ways to communicate between application modules using core Angular functionality:

• Using events
• Using services
• Directly between controllers by assigning the model on **$ rootScope**
• [$ parent, $childHead**, **$etc] Directly between controllers [ControllerAs
or other forms of inheritance]

19.

service() and What is the difference between factory()? service() in Angular is a function used in the business layer of the application. It runs as a constructor and is called once at runtime using the 'new' keyword. Factory() is a function similar to service(), but more powerful and flexible. factory() is a design pattern that helps in creating objects.

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

$

scope

in Angular is used to implement the concept of Dependency Injection (DI), on the other hand,
• scope is used Link to command.
• $\ast \ast scope\ast \ast is\text{** The scope** is}$21.Explain the concept of scope hierarchy?

$sco\mathrm{p\#\#\; in\; Angular}\#eObjects\; are\; organized\; into\; a\; hierarchy\; and\; are\; used\; primarily\; by\; views.\; It\; contains\; a\; root\; scope,\; which\; can\; further\; contain\; scopes\; called\; subscopes.\; A\; root\; scope\; can\; contain\; multiple\; child\; scopes.\; Here,\; each\; view\; has\; its\; own$Root $scope

Controller1 $scope

• • Controller2 $scope

  • ..

  • controller 'n' $scope

  22. What is AOT?

AOT stands for Angular-Ahead-of-Time compiler. It is used to precompile application components and their templates during the build process. Angular applications compiled with AOT have shorter startup times. Likewise, the components of these applications can be executed immediately without any client-side compilation. Templates in these applications are embedded as code within their components. It reduces the need to download the Angular compiler, saving you from tedious tasks. The AOT compiler can discard unused instructions, which are further discarded using tree-shaking tools.

23.Explain jQLite.

jQlite is also known as jQuery lite is a subset of jQuery and includes all its features. By default, it is packaged in Angular. It helps Angular manipulate the DOM in a compatible cross-browser manner. jQLiteBasically only implements the most commonly used functions, so it takes up little space.

24.Explain the summary loop process in Angular?

The summary cycle in Angular is the process of monitoring a watchlist to track changes in the value of a watch variable. In each digest loop, Angular compares the previous version of the scope model value with the new version. Normally, this process is triggered implicitly, but you can also activate it manually using $apply().

25. What is an Angular module?

All Angular applications are modular and follow a modular system called NgModules. These containers hold cohesive blocks of code dedicated to an application domain, workflow, or a set of closely related functions. These modules typically contain components, service providers, and other code files, the scope of which is defined by the containing NgModule. With modules, code becomes more maintainable, testable and readable. Likewise, all dependencies of an application are typically defined only in modules.

26. On which type of component can we create custom directives?

Angular supports creating custom directives for:

• Element Directives - When a matching element is encountered, the directive will activation.
• Attributes - The directive will activate when a matching attribute is encountered.
• CSS- directive will be activated when a matching CSS style is encountered.
• Comments - The directive will activate when a matching comment is encountered

27. What are the different types of filters in Angular ?

The following are the various filters supported by Angular:

• Currency: Format numbers into currency format.
• Date: Format the date to the specified format.
• filter: Selects a subset of items from an array.
• json: Format the object into a JSON string.
• **limit:** Limit an array/string to a specified number of elements/characters.
• Lowercase: Format the string to lowercase.
• number: Format a number into a string.
• orderBy: Sort the array by expression .
• uppercase: Format the string as uppercase.

28. What is dependency injection in Angular?

Dependency Injection (DI) is a software design pattern in which objects are passed as dependencies instead of being hard-coded in components. The concept of dependency injection comes in handy when you try to separate the logic of object creation from the logic of using the object. The "config" operation uses DI, which must be pre-configured when loading a module to retrieve elements of the application. Using this feature, users can change dependencies as per their requirements.

29. Distinguish between one-way binding and two-way data binding.

In One-way data binding, whenever the data model is changed, the "View" or "UI" part will not update automatically. You'll need to manually write custom code to update it every time the view changes.

And in two-way data binding, once the data model is changed, the View or UI part is implicitly updated. Unlike one-way data binding, this is a synchronous process.

#30. What are the life cycle hooks of components and directives?

Angular components have a discrete life cycle that contains different stages of transition from birth to death. To have better control over these stages we can connect them using:

• Constructor: This is called when a component or directive is created by calling new on the class.
• **ngOnChanges:** This is called whenever any input property of the component changes or is updated.
• **ngOnInit:** This is called every time a given component is initialized. After the first ngOnChanges, the hook is called only once in its lifetime.
• **ngDoCheck:** This is called whenever the change detector for a given component is called. This allows you to implement your own change detection algorithm for the provided components.
• ngOnDestroy: Called immediately before Angular destroys the component. You can use this hook to unsubscribe from observables and detach event handlers to avoid any kind of memory leak.

#31. What do you learn by dirty checking Angular?

In Angular, the digest process is called Dirty Checking. It's called because it scans the entire range for changes. In other words, it compares all new scope model values ​​to previous scope values. Since all watch variables are contained within a single loop, any change/update of any variable will cause the rest of the watch variables present in the DOM to be reassigned. The monitored variables are in a single loop (summary loop) and any value change of any variable will reassign the values ​​of other monitored variables in the DOM

32. Distinguish between DOM and BOM.

	2. They can be written within HTML tags.

##Bill of Materials1. Represents the document object model2. Represents the content of the web page3. All objects are arranged in a tree structure and the document can only be manipulated and accessed through the provided API 4. Process HTML documents5. Standard specifications recommended by W3C

33.What is Transpiling in Angular?

Compilation in Angular refers to the process of converting source code from one programming language to another. Typically, in Angular, this conversion is from TypeScript to JavaScript. This is an implicit process that happens internally.

34. How to perform animation in Angular?

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

35.What are includes in Angular?

Inclusions in Angular allow you to move the original children of a directive to a specific location within a new template. The ng directive indicates that the insertion point of the contained DOM of the nearest parent directive of the contained directive is being used. Attribute directives such as ng-transclude or ng-transclude-slot are mainly used for inclusion.

36. What are events in Angular?

Events in Angular are specific directives that help customize the behavior of various DOM events. 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

37. List some tools for testing angular apps?

• Karma

• Angular Mocks

• Mocha

• Browserify

• #Sion

38. How to create a service in Angular?

In Angular, services are replaceable objects that are wired together using dependency injection. Create a service by registering it in a module where it is to be executed. Basically, you can create an angular service in three ways. Basically, they are the three ways to create a service in Angular:

Factory
• Service
• Provider

39.What is singleton pattern and where can it be found in Angular?

The Singleton pattern in Angular is a great pattern that restricts a class from being used multiple times. The Singleton pattern in Angular is mainly implemented in dependency injection and services. So if you don't use "new Object()" without making it a singleton, you will be assigned two different storage locations for the same object. Whereas if you declare the object as a singleton, it will simply be reused if it already exists in memory.

40. What do you know about REST in Angular?

REST means

REAppearance小小大老NiubiTransfer (BOT). REST is an API (Application Programming Interface) style for HTTP requests. In this case, the requested URL pinpoints the data that needs to be processed. The HTTP method will then identify the specific operation that needs to be performed on the requested data. Therefore, APIs that follow this approach are called RESTful APIs.

41. What is bootstrapping in Angular?

Bootstrap in Angular is just about initializing or starting the Angular application. Angular supports automatic and manual bootstrapping.

***Autobootstrapper:***This is done by adding the ng-app directive to the root of your application, usually on the tag or markup (if you want angular automatically boot the application). When Angular finds the ng-app directive, it loads the module associated with it and then compiles the DOM.
• Manual bootstrapping: Manual bootstrapping gives you more control over how and when your Angular application is initialized. This is useful if you want to perform any other operations before Angular wakes up and compiles the page.

42. What is the difference between linking and compiling in Angular?

The compilation function is used for template DOM manipulation and collects all directives.
• The link function is used to register DOM listeners and instance DOM operations, and is executed after cloning the template.

43. What do you know about constants in Angular?

In Angular, constants are similar to services used to define global data. Constants are declared using the keyword "constant". They are created using constant dependencies and can be injected anywhere in a controller or service.

44. What is the difference between Angular providers, services and factories?

##DOM
1. Represents the browser object model
2. Works above the web page and includes browser properties
3. All global JavaScript objects, variables and functions implicitly become members of the window object
4. Access and manipulate browser windows
5. Each browser has its own implementation

Provider	Service	Factory
A provider is a way to pass part of an application into app.config	A service is a way to create something with 'new' Method of the service instantiated by the keyword.	This is the method used to create and configure services. Here you create an object, add properties to it and then return the same object and pass the factory method into the controller.

45. What is Angular Global API?

The Angular Global API is a combination of global JavaScript functions used to perform a variety of common tasks, such as:

• Compare objects
• Iterate Object
• Convert data

There are some common Angular Global API functions, such as:

• ** Angular. Lowercase: **Convert the string to lowercase.
• Horned. Uppercase: Convert a string to uppercase.
• Horned. isString: Returns true if the current reference is a string.
• **Horned. isNumber: **Returns true if the current reference is a number.

Advanced Level – Interview Questions

#46. In Angular, describe how to set, get and clear cookies?

In order to use cookies with Angular, you need to include a module called ngCookies angular-cookies.js.

Set Cookies – To set Cookies in key-value format, use the “put” method.

cookie.set("nameOfCookie","cookieValue");

**Getting Cookies –**To get Cookies, the “get” method is used.

cookie.get（"nameOfCookie"）;

**Clear Cookies –** Use the “Delete” method to delete cookies.

cookie.delete（"nameOfCookie"）;

#47. If your data model is updated outside the "area", please explain the process, how will you view the view?

You can use any of the following to update the view:

• ApplicationRef.prototype.tick() : it Change detection will be performed on the entire component tree.

• **NgZone.prototype.run(): **It will perform change detection on the entire component tree. Here run() under the hood will call the tick itself and then the parameters will get the function before the tick and execute it.

• **ChangeDetectorRef.prototype.detectChanges(): **It will start change detection on the current component and its subcomponents.

#48. Explain ng-app directive in Angular.

The ng-app directive is used to define an Angular application, allowing us to use auto-bootstrapping in Angular applications. It represents the root element of an Angular application and is usually declared near the or tag. Any number of ng-app directives can be defined in an HTML document, but only an Angular application can be officially bootstrapped implicitly. The remaining applications must be booted manually.

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>

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

@Component({
    selector: 'app-root',
    template: `
        <ng-template #template let-name=&#39;fromContext&#39;><div>{{name}}</ng-template>
    `
})
export class AppComponent implements AfterViewChecked {
    @ViewChild(&#39;template&#39;, { read: TemplateRef }) _template: TemplateRef<any>;
    constructor() { }

    ngAfterViewChecked() {
        this.vc.createEmbeddedView(this._template, {fromContext: &#39;John&#39;});
    }
}

50. How to hide an HTML element just by clicking the corner button?

HTML elements can be easily hidden using the ng-hide directive with a controller to hide HTML elements when a button is clicked.

View

<div ng-controller ="MyController">
  <button ng-click ="hide()">欢迎关注全栈程序员社区公众号</ button>
  <p ng-hide ="isHide">欢迎关注Java架构师社区公众号！</ p>
</ div>

Controller

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

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of 50 Angular interview questions you must master (Collection). For more information, please follow other related articles on the PHP Chinese website!