Angular 4 Interview Questions and Answers

Q1. What is Angular 4?

Ans

Angular 4 is a Javascript framework for building apps in HTML, TypeScript, and JavaScript. It has built-in features for HTTP service, animation, and materials.

Q2. What is Unit Testing in Angular 4?

Ans

Private testing or unit testing is used to test the system’s components. It is the process to test small separate pieces of code. But when any unit testing depends on any of the external resources like networks, databases, and APIs, then it would not come under unit test.

Q3. What is binding?

Ans

The binding process in Angular 4 is the process of establishing synchronization between the View and Model Components which are different layers in the application.

Q4. Describe different types of binding in Angular 4?

Ans

The different kinds of binding in Angular 4 are Two Way Binding, Event Binding, and Property Binding. These data bindings are the important components of Angular. Event Binding is the process of updating values of a variable or attribute from the View Component layer to the Model Component Layer. Property Binding is the way of updating the values of a variable in the Model Component and displaying it in the View Component. Two Way Binding is the combination of Property Binding and Event Binding features.

Q5. What is dependency injection in Angular 4?

Ans

Dependency injection describes an important application design pattern that is used to enhance the effectiveness and modularity of an application. This is mainly a coding pattern where class requests for dependencies from the external or third-party sources rather than creating it.

Q6. What are the Modules in Angular 4?

Ans

A module is defined as a file where all the Components, Directives, Pipes, and Services are interlinked and grouped to make it a proper and perfect working application for Angular. Every Angular app has a root module that will be defined inside app.module.ts (a TypeScript file format). To define a module in Angular 4, NgModule is being used.

Q7. What are the NgModule Metadata Properties?

Ans

It is a method that takes a single metadata object to tell Angular how to compile the application.

Essential factors of Metadata:

• Imports
• Exports
• Schemas
• Providers
• Declarations
• entryComponents
• bootstrap
• id

Ans

Angular 4 is faster when compared to its previous version. Here are a few versions are given below:

• It decreases the size of generated code bundle up to 60%.
• It is backward compatible.
• The animation section shifted to a different package.

Q9. Describe the features of Angular 4?

Ans

Angular 4 has several new features. Most of the changes have been implemented to the background of the current version, not in the core functionality of coding. Some of the features are:

• Dynamic Components
• TypeScript Compatibility
• Source Maps for Templates
• AOT Compilation
• Router ParamMap
• Flat ES Modules
• Angular Universal
• Smaller and Quick
• Revamped *nglf and *ng
• Animations Package

Q10. Describe ElementRef in Angular 4?

Ans

ElementRef is a class used for abstraction. The Class structure mainly holds the native elements and ElementRef is used to access the native elements.

Q11. What is deep linking in Angular 4?

Ans

Deep Linking mainly takes a specific page directly without searching and traversing applications from the landing page of the website. It will ultimately help in generating and getting indexes so that such specific links can easily be searched by search engines. In Angular 4, deep linking use # for support.

Q12. How to install Angular 4?

Ans

There are so many different ways to install Angular 4:

• Install Angular CLI
• Create a project
• Serve the application

Q13. Describe the use of TypeScript in Angular 4?

Ans

It is a native language for Angular 4 Development. TypeScript has a Design-tome support system for tooling and Type Safety. It is mainly a superset of JavaScript.

Q14. What are the different types of component decorators in Angular 4?

Ans

There are 4 types of component decorators in Angular 4:

• Class Decorators
• Parameter Decorators: used for parameters inside the class constructors
• Property decorators: used for properties inside classes
• Method Decorators: used for methods inside classes

Q15. Explain Eager loading in Angular 4?

Ans

There are 3 types of loading – eager loading, lazy loading, and preloading. Eager loading is the module format that has to import into the Angular 4 application by introducing the metadata of the @ngmodule decorator. It is helpful for small size angular applications.

Q16. Difference between Angular 4 and Angular 5?

Ans

Angular 4 is fast and more compact whereas Angular 5 is widely used in building optimized applications. Angular 4 is Angular Universal and Angular 5 is Angular universal as well as State transfer. Angular 4 uses TypseScript 2.1 and TypeScript 2.2 but Angular 5 is using TypeScript 2.5.

Q17. What is Guard in Angular 4?

Ans

In the case of Angular 4, when functionalities, logic as well as code are executed before loading a route is called Guards. It checks the route access, any new features in a module, child route access, and response to the user of any unsaved changes.

Q18. What are Angular 4 Providers?

Ans

These are the injectors that inject the objects by the providers. There are different types of Angular 4 providers – Class provider, Factory Provider, Value Provider, and Alias Provider.

Q19. What is embedded view in Angular 4?

Ans

The embedded view is a hosting component that is used to define a template.

Q20. Explain reducers in Angular 4?

Ans

A reducer is a function to specify how a specific state changes in response to any event or action. Reducers are pure functions in nature and they produce the same output for a given input respectively. And they are without any side effects and handle each state transition synchronously. Each reducer function takes the latest Action dispatched from the component along with function arguments, the current state, and determines whether to return a newly modified state or the original state based upon the processed data. 

Q21. How to handle HTTP error response in Angular 4?

Ans

Here are the best practices for HTTP error handling on Angular:

• Using a client-side solution for error handling, like HTTP Client or HTTP Interceptor
• Using Rollbar to effectively track errors.
• Viewing the errors on Rollbar.
  

  class MyErrorHandler implements ErrorHandler {

    handleError(error) {

         // do something with the exception

      }

  }

  @NgModule({

      providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]

  })

  class MyModule {}

Q22. How do you create a custom pipe in Angular 4?

Ans

Here’s an example of creating a pipe which reverses the order of letter within a string. Following is the code to be found in the reverse-str.pipe.ts file.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'reverseStr'})
export class ReverseStr implements PipeTransform {
   transform(value: string): string {
      let newStr: string = "";
      for (var i = value.length - 1; i >= 0; i--) {
         newStr += value.charAt(i);
      }
      return newStr;
   }
}

Q23. How to send and set cookies in Angular 4?

Ans

We can use the ngx-cookie-service node package to save cookies in Angular 4.

Use the following steps:

• Install the node package with the following syntax:
  npm install ngx-cookie-service –save
• Now, we have to add the cookies service to app.module.ts as a provider.
  @NgModule({
    ...,
    providers: [ CookieService ]
})
• Further, continue by importing and injecting it into a component.
  import { CookieService } from 'ngx-cookie-service';
constructor( private cookieService: CookieService ) { }
ngOnInit(): void {
this.cookieService.set( 'Test', 'Hello World' );
this.cookieValue = this.cookieService.get('Test');
}

Q24. How to add external js file in angular 4?

Ans

To add an external js file into Angular 4, follow these steps:

• Refer the scripts inside the angular-cli.json file like this:
  "scripts": [ "../path" ];
• Add this into typings.d.ts :
  declare var variableName:any;
• Import the above onto your js file as:
  import * as variable from 'variableName';