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.

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?

##g

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$（

Angular Expression

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]

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.

$

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

• • 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.

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?

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?

Factory
• Service
• Provider

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

40. What do you know about REST in Angular?

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?

***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?

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

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!