Top 28 Angular 4 Interview Questions You Must Prepare 17.Apr.2024

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML syntax to express your application’s components clearly and succinctly. AngularJS data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in.

Services in angular js are used to organize and share code across your application. These are the suitable objects which are wired together with the help of dependency injection. The angular js services are lazily instantiated. The service is only instantiated by angular js only when the application component depends on it. In angular js, new services can be made or can even be used in other built-in services. Over 30 built-in services are present in angular js.

The for Root is a static method and it’s very easy for developers to configure the modules and the best example is – RouterModule.for Root.

The Router Module also offers a for Child. It’s also a static method and use to configure the routes of lazy-loaded modules. The for Root and for Child are the traditional names for methods that configure services in root.

Components are just simple classes which are declared as components with the help of component decorators.

It becomes easy to create an application which already works, with the help of angular CLI commands. “Ng generate” is used to generate components, routes, services, and pipes. Simple test shells are also created with the help of this CLI command. For generating a component in angular4 with the help of CLI command.

you need to follow the following syntax-

• ng generate component component name;

It generates the component and adds the component to module declarations.

Features in Angular version 4.3 are:

• Introducing Http Client, a smaller, easier to use, and more powerful library for making HTTP Requests.
• New router life cycle events for Guards and Resolvers. Four new events: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the existing set of life cycle event such as NavigationStart.
• Conditionally disable.

On 13 December 2016 Angular 4 was announced, skipping 3 to avoid confusion due to the misalignment of the router package’s version which was already distributed as v3.3.@The final version was released on March 23, 20@Angular 4 is backward compatible with Angular 2.

Angular version 4.3 is a minor release, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.

We can add the declarable classes like components, directives and pipes in the module’s declarations list and we can add only – components, directives and pipes classes in the @NgModule.

Angular 2 – ngFor vs. ngFor:

1. The [ngFor] is not a type safe.
2. The [NgForOf] is a type Safe.
3. The [NgFor] directive instantiates a template once per item from iterate.
4. The [ngFor] and [ngForOf] are actually the selectors of the [NgForOf] directive and it is not two distinct things.
5. The [ngFor] will be works like as collections.
6. The [ngForOf] will be works like as generics.

A decorator is the core concept when developing an angular framework with version 2 and above. It may become a core language feature for JavaScript soon. In angular 4, decorators are used extensively and are also used to compile a code.

There are 4 different types of decorators:

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

A decorator is a function that is invoked with a prefix “@” symbol and is immediately followed by a class, parameter, method, or property. A decorator returns the same thing which was given as an input but in an augmented form.

• No problem! We can import the same module twice but Angular does not like modules with circular references.
• So do not let Module “X” import Module “Y” which already imports Module “X”.
• When four modules all import Module “X”, Angular estimate Module “X” once, the first time face it and does not do again. Actually, the modules help us to organize an application into associative blocks of functionality.

Angular was a ground-up rewrite of AngularJS and has many unique features.

• Angular does not have a concept of “scope” or controllers; instead it uses a hierarchy of components as its main architectural concept
• Angular has a different expression syntax, focusing on “[ ]” for property binding, and “( )” for event binding
• Mobile development – desktop development is much easier when mobile performance issues are handled first
• Modularity – much core functionality has moved to modules, producing a lighter, faster core
• Modern browsers only – reducing the need for browser compatibility workarounds
• Angular recommends the use of Microsoft’s Typescript language, which introduces the following features:
• Class-based Object Oriented Programming
• Static Typing
• Generics

Typescript a superset of ECMAScript 6 (ES6), and is backwards compatible with ECMAScript 5 (i.e.: JavaScript).

Angular also includes the benefits of ES6:

• Lambdas
• Iterators
• For/Of loops
• Python-style generators
• Reflection
• Improved dependency injection– bindings make it possible for dependencies to be named
• Dynamic loading
• Asynchronous template compilation
• Simpler Routing
• Replacing controllers and $scope with components and directives – a component is a directive with a template.
• Reactive programming support using RxJS.

JSON Web Token (JWT) is an open standard which used for securely trmitting information between parties as a JSON object.

The JWTs can be signed with –

1. HMAC algorithm
2. RSA algorithm

There are some scenarios where we can used JSON Web Tokens –

1. Authentication
2. Information Exchange

The ngIf is a built-in template directive which is used to add or remove some parts of DOM. This addition or removal depends on the expression being true or false.

If the expression is evaluated to false, then the ngIf directive removes the HTML element. If the expression is evaluated to be true, then the element gets added to the DOM.

Syntax- *ngIf=”<condition>”

Example- <ul *ngFor=”let person of people”

*ngIf=”person.age < 30”>

<li>{{person.name}}</li></ul>

NgRoute module is used when you want to navigate through different pages of your application but you also want your application to be a single page application. This ngRoute module navigates through different pages of your application without reloading the entire application. The angular js route module should be included to make your application ready for routing. The ngRoute is added as a dependency in the application. The routing engine captures the specific url requested by the user and renders the view based on the defined routing rules.

The ngFor directive instantiates a template for every element of the given iterator. The different local variables of the ngFor directive can be used in iterations. The ngFor directive can even be used with the HTML elements. It also performs various changes in DOM. Several exported values can be aliased to local variables with the help of ngFor directive. It allows us to build data presentation lists and tables in our HTML templates.

Here’s an example of ngFor directive with the help of HTML:

<tr *ngFor=”hero of heroes”>

<td>({hero.name})</td></tr>

The HTTP Interceptors are used to Set Http Headers Request in Angular 4 using the import from “@angular/common/http”. The HTTP Interceptors are available in Angular 4.x versions.

The HTTP Interceptors are not supported in Angular @We are creating the Http Client Injectable class to achieve this. You can see the below examples for set http headers request with and without HTTP interceptors.

The Interceptors is a common used to set default headers for all responses.

In angular js, there are differences between the meta-data annotations. Some of the differences are:

• A directive is used to add behavior to an existing element. Whereas, a component is used to create a component with attached behavior.
• “@directive” is used to create a directive. Whereas, “@component” is used to create a component.
• A directive is used to attach different behaviors to an existing DOM element. Whereas, with the help of component, we can break our application into smaller components.
• A directive is used to create reusable behavior. Whereas, a component is used to create reusable components.
• A directive does not require a view. Whereas, a component needs a view via @view.

In Annular, the following Steps are used to building authentication and authorization for RESTful APIs and applications. It might help you –

1. The users send their credentials to the server which is verified by the database credentials. If everything is verified successfully, the JWT is sent back to them.
2. The JWT is saved in the user’s browser in local storage or in a cookie and so on.
3. The presence of a JWT saved in the browser is used as an indicator that a user is currently logged in.
4. The expiry time of JWT is continually checked to maintain an authenticated state in the Angular applications.
5. The client side routes are protected and access by authenticated users only.
6. When user sends the XHR requests for APIs, the JWT gets sent an Authorization header using your cookies or Bearer.
7. When XHR requests coming on the server, before send back the responses it’s validated first with configured app’s secret keys. If everything is looking good then returns successfully responses other send the back to the bad request.

There are several open source libraries are available for angular which are helps with JWTs and has the ability to Decode the JWT, Authorization header to XHR requests and so on.

As the name implies, unit test is all about testing individual units of code. In order to wer some questions, isolating the unit of code under test is really important. When we do this, we are not forced into creating related pieces such as DOM elements for sorting. With the help of isolated unit tests, it becomes easier to implement everything. To simulate the requests, dependency injections are also provided. The individual sort function can be tested in isolation. And not only the sort function, any function can be tested in isolation.

Angular (commonly referred to as “Angular 2+” or “Angular 2“):

Is a TypeScript-based open-source front-end web application platform bed by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer’s workflow while building complex web application. Angular is a complete rewrite from the same team that built AngularJS.

Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

The JSON Web Tokens consist of three parts separated by dots (.), which are:

1. Header
2. Payload
3. Signature

The impedance mismatch between dynamic applications and static documents is often solved with:

A library – a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.

Frameworks – a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific. 

E.g., durandal, ember, etc.

AngularJS takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. AngularJS teaches the browser new syntax through a construct we call directives.

Examples include:

• Data binding, as in {{}}.
• DOM control structures for repeating, showing and hiding DOM fragments.
• Support for forms and form validation.
• Attaching new behavior to DOM elements, such as DOM event handling.
• Grouping of HTML into reusable components.

We do not declare – Module, Service, objects, strings, numbers, functions, entity models, configurations, business logic, and helper classes in the module’s declarations.

Basically property binding me passing data from the component class and setting the value of a given element in the view. It is a one way binding in which the data is passed from component to the class. It allows us to control the element property values from component to class. Property binding in angular can take place by three ways:

Interpolation can be used to define a value, as long as the value being defined is a string.

Wrapping brackets around the element property and binding it to the component property is the most common type of property binding.

The third way is by adding “bind” before the element property.

Here are the elements which are present in the component directory structure anf modules: –

Module.ts- in this, the angular module is declared. @NgModule decorator is used which initializes the different aspects of angular applications. AppComponent is also declared in it.

Components.ts- it simply defines the components in angular and this is the place where the app-root sector is also defined. A title attribute is also declared in the component.

Component.html- it is the template file of the application which represents the visual parts of our components.

Two types of error:

1. If the backend returned an unsuccessful response like – 404, 500 and so on.
2. If something goes wrong in the client side like -network error etc.

In the both cases – We are using Http Error Response and return the useful information on what went wrong in this call!