Angular Interview Questions

Angular was introduced to create Single Page applications. This framework brings structure and consistency to web applications and provides excellent scalability and maintainability. 

Angular is an open-source, JavaScript framework wholly written in TypeScript. It uses HTML's syntax to express your application's components clearly. 

Decorators are a design pattern or functions that define how Angular features work. They are used to make prior modifications to a class, service, or filter. Angular supports four types of decorators, they are:

1. Class Decorators
2. Property Decorators
3. Method Decorators
4.  Parameter Decorators

Angular Templates are written with HTML that contains Angular-specific elements and attributes. In combination with the model and controller's information, these templates are further rendered to provide a dynamic view to the user

Annotations in Angular are used for creating an annotation array. They are the metadata set on the class that is used to reflect the Metadata library

Directives are attributes that allow the user to write new HTML syntax specific to their applications. They execute whenever the Angular compiler finds them in the DOM. Angular supports three types of directives. 

1. Component Directives

2. Structural Directives 

3. Attribute Directives

Components are the basic building blocks of the user interface in an Angular application. Every component is associated with a template and is a subset of directives. An Angular application typically consists of a root component, which is the AppComponent, that then branches out into other components creating a hierarchy

These pipes are pipes that use pure functions. As a result of this, a pure pipe doesn't use any internal state, and the output remains the same as long as the parameters passed stay the same. Angular calls the pipe only when it detects a change in the parameters being passed. A single instance of the pure pipe is used throughout all components.

NgModules are containers that reserve a block of code to an application domain or a workflow. @NgModule takes a metadata object that generally describes the way to compile the template of a component and to generate an injector at runtime. In addition, it identifies the module's components, directives, and pipes, making some of them public, through the export property so that external components can use them. 

Filters are used to format an expression and present it to the user. They can be used in view templates, controllers, or services. Some inbuilt filters are as follows.

• date - Format a date to a specified format.
• filter - Select a subset of items from an array.
• Json - Format an object to a JSON string.
• limitTo - Limits an array/string, into a specified number of elements/characters. 
• lowercase - Format a string to lowercase. 

AngularJS controllers control the data of AngularJS applications. They are regular JavaScript Objects. The ngcontroller directive defines the application controller. 

The scope in Angular binds the HTML, i.e., the view, and the JavaScript, i.e., the controller. It as expected is an object with the available methods and properties. The scope is available for both the view and the controller. When you make a controller in Angular, you pass the $scope object as an argument.

String Interpolation is a one-way data-binding technique that outputs the data from TypeScript code to HTML view. It is denoted using double curly braces. This template expression helps display the data from the component to the view.

{{ data }} 

Ahead of Time (AOT) compilation converts your code during the build time before the browser downloads and runs that code. This ensures faster rendering to the browser. To specify AOT compilation, include the --aot option with the ng build or ng serve command.

The Just-in-Time (JIT) compilation process is a way of compiling computer code to machine code during execution or run time. It is also known as dynamic compilation. JIT compilation is the default when you run the ng build or ng serve CLI commands.

Angular Services perform tasks that are used by multiple components. These tasks could be data and image fetching, network connections, and database management among others. They perform all the operational tasks for the components and avoid rewriting of code. A service can be written once and injected into all the components that use that service. 

While both the concepts deal with Asynchronous events in Angular, Promises handle one such event at a time while observables handle a sequence of events over some time.  

Promises - They emit a single value at a time. They execute immediately after creation and are not cancellable. They are Push errors to the child promises. 

Observables - They are only executed when subscribed to them using the subscribe() method. They emit multiple values over a period of time. They help perform operations like forEach, filter, and retry, among others. They deliver errors to the subscribers. When the unsubscribe() method is called, the listener stops receiving further values.

DOM (Document Object Model) treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document.

Angular uses the regular DOM. This updates the entire tree structure of HTML tags until it reaches the data to be updated. However, to ensure that the speed and performance are not affected, Angular implements Change Detection.

With this, you have reached the end of the article. We highly recommend brushing up on the core concepts for an interview. It’s always an added advantage to write the code in places necessary.

For example, to change the font size:

document.getElementById(“someElement").style.fontSize = "20";

@() with optional parameters. 

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

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

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. 

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

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.

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.

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. 

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

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.

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. 

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

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.

Example for using lazy loading modules:

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

Using the ApplicationRef.prototype.tick method, which will run change detection on the entire component tree.

1. 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.
2. Using the ChangeDetectorRef.prototype.detectChanges method, which will launch change detection on the current component and its children.

Dependency injection is an application design pattern that is implemented by Angular and forms the core concepts of Angular. 

Dependencies in Angular are services that simply have some functionality. Components and directives in an application may need these functionalities. Angular provides a smooth mechanism by which these dependencies are injected into components and directives.

Unlike the previous versions of Angular, the 7th major release comes with the splitting of @angular/core. This is done in order to reduce the size. Not every module is required by an Angular developer. Therefore, in Angular 7 each split of the @angular/core will have no more than 418 modules.

Angular 7 features drag-and-drop and virtual scrolling. Lastly, it also has a new and enhanced version of the ng-compiler.

The user login credentials are passed to an authenticated API, which is present on the server. 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.

Post logging in successfully, different users have different levels of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.

ng generate classDummy [options]

This will generate a class named Dummy.

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.

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 the passing of more than one event. A callback is made for each event in an observable.

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.

We create a decorator called Dummy:

functionDummy(target) {

 dummy.log('This decorator is Dummy', target);

 }

To put it 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 don’t spread to the component.
• None: Styles defined in a component are visible to all components of the application.

Ng stands for next generation, and it relates to built-in directives in Angular. Directives are classes that add behavior to elements.

There are a few advantages and features provided by the Angular Console.

• Build CLI Commands visually
• Internal terminal for the output
• Import the existing Angular project
• Trivial code generation
• Run the custom NPM scripts
• Install various extensions

Change detection is a mechanism in Angular. Change detection cares about view re-rendering in case data changes.

Bootstrapping is a method for loading or initializing Angular applications.

Every application must have at least one Angular module – the root module, which is required for the application to bootstrap on launch. This NgModule is named AppModule by convention and by default. A class with the @NgModule decorator follows the import declarations.

The constructor function is called when an object develops in TypeScript.

Syntax:

Constructor(){}

The @Input decorator in the Child component can be used to transmit data from the Parent to the Child component in Angular. The @Output decorator in the Child component can be used to transmit data from the Child to the Parent component.

The Angular CLI is a command-line interface tool for launching, developing, scaffolding, and maintaining Angular applications from a command shell.

Single Page Applications are online applications that load a single HTML page and update only a portion of the page rather than the complete page with each mouse click. During the procedure, the page does not reload or transfer control to another page. This step guarantees good performance and faster page loading.

Directives are classes that provide additional behavior to elements in Angular applications. Developers utilize Angular’s built-in directives to control forms, styles, lists, and what users view.

To separate the code into pieces, developers use a lazy module. The browser version of the app does not load all of the application code. The module must load the code into a browser during the transition to the route using lazy loading.

Example of lazy loading modules:

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