Angular 4 Interview Questions

What is Angular 4?

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.0. The final version was released on March 23, 2017. 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.

What are the Features of Angular 4.3?

Features in Angular version 4.3 are:

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

What is Angular?

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

is a TypeScript-based open-source front-end web application platformled 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 applications. 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.

What is angular js?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s 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.

What do I have to do to trick the browser into doing what I want?

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.

What are the Differences between angular and angular JS?

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 TypeScriptlanguage, which introduces the following features:
    • Class-based Object Oriented Programming
    • Static Typing
    • Generics
  • TypeScriptis 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 programmingsupport using RxJS

What’s New in Angular 4? AND what are the Improvements in Angular 4?

Angular 4 contains some additional Enhancement and Improvement. Consider the following enhancements.

  1. Smaller & Faster Apps
  2. View Engine Size Reduce
  3. Animation Package
  4. NgIf and ngFor Improvement
  5. Template
  6. NgIf with Else
  7. Use of AS keyword
  8. Pipes
  9. HTTP Request Simplified
  10. Apps Testing Simplified
  11. Introduce Meta Tags
  12. Added some Forms Validators Attributes
  13. Added Compare Select Options
  14. Enhancement in Router
  15. Added Optional Parameter
  16. Improvement Internationalization

Why Angular 4? What’s New in Angular 4?

It Makes work easier compared with angular 2 and other models.

Writing code is lots of cleaner and lesser.

It Improve the execution performance for Data binding and so on.

It has included Animations features.

In Angular 4, no need to apply observable methods because Angular analyses every page’s DOM and it is automatically modifies to page’s DOM.

It is also supported by Visual Studio, IntelliJ, And NET IDES and so on.

Migration is really very soft and cleaner.

And So On…


Angular 2 apps will work using Angular 4 without changing anything. Angular 4 offers lots-of enhancements i.e.

  1. Smaller & Faster Apps
  2. View Engine Size Reduce
  3. Animation Package
  4. NgIf and ngFor Improvement
  5. Overriding Template
  6. NgIf with Else
  7. Use of AS keyword
  8. Pipes
  9. HTTP Request Simplified
  10. Apps Testing Simplified
  11. Introduce Meta Tags
  12. Added some Forms Validators Attributes
  13. Added Compare Select Options
  14. Enhancement in Router
  15. Added Optional Parameter
  16. Improvement Internationalization
  17. Meaningful errors handling methodology
  18. Animations

How to Set Http Request Header in Angular 4 and Angular 2?

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 2. We are creating the HttpClient Injectable class to achieve this. You can see the below examples for set http headers request with and without HTTP interceptors.

What Is the Use of Interceptors in Angular 4?

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

What Is the forRoot Method?

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

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

What Is the Difference Between `{`ngFor`}` and `{`ngForOf`}` in Angular 2?

Angular 2 – ngFor vs. ngForOf

  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

What classes should I add to module's declarations?

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.

What classes should I not add to module's declarations?

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

What Happen when I Import the same Module Twice in Angular 4?

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.

How To Get and Log an error in Angular 4?

Two types of errors –

  1. If the backend returns 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 HttpErrorResponse and return the useful information on what went wrong in this call!

How Are JWTs Used to Authenticate Angular 4 Applications?

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.

What is JSON Web Token?

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

The JWTs can be signed with –

  1. HMAC algorithm
  2. RSA algorithm

When should you use JSON Web Tokens?

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

  1. Authentication
  2. Information Exchange

What is the JSON Web Token structure?

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

  1. Header
  2. Payload
  3. Signature
Review Date
Reviewed Item
Very nice Angular 4 Interview Questions and Answers Kindly keep Updating More, Angular 4 Interview Questions and Answers.
Author Rating