ANGULAR4 Interview Questions and Answers

ANGULAR4 is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript. Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete,navigation,toolbar, etc.

1) What is component decorators in Angular 4?

The main objectives of decorators is to add some metadata to the class that will tell Angular 4 how to process a class. Or in another words, Decorators are functions that modify JavaScript classes. Angular has many decorators that attach metadata to classes so that it knows what those classes mean and how they should work.

If we consider Component in Angular 4, we will have following options to configure.

  • selector: define the name of the HTML element in which our component will live.
  • template or templateUrl: It can be inline string or link an external html file. It allows us to tie logic from our component directly to a view.
  • styles: the styles array for our specific component. We can also link external CSS by styleUrls.
  • directives: another component directives we want to use inside our components.
  • providers: This is the place we are passing the services that we need insider our components.

Immediately after this decorator or right to it, we need to export a class where our variables and functions reside that our component uses.

2) What is compilation in Angular 4? And what are the types of compilation in Angular 4?

An Angular application consists largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by the Angular compiler.

There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. There are two types of compilation Angular 4 provides.

  1. in-time (JIT) compilation: This is a standard development approach which compiles our Typescript and html files in the browser at runtime, as the application loads. It is great but has disadvantages. Views take longer to render because of the in-browser compilation step. App size increases as it contains angular compiler and other library code that won’t actually need.
  2. Ahead-of-time (AOT) compilation: With AOT, the compiler runs at the build time and the browser downloads only the pre compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first. This compilation is better than JIT because of Fast rendering, smaller application size, security and detect template errors earlier.

3) What is NgModule?

An NgModule class describes how the application parts fit together. Every application has at least one NgModule, the root module that we bootstrap to launch the application.

4) What are all the metadata properties of NgModule? And what are they used for?

NgModule accepts a metadata object that tells Angular how to compile and launch the application. The properties are:

  1. imports – Modules that the application needs or depends on to run like, the BrowserModule that every application needs to run in a browser.
  2. declarations – the application's components, which belongs to the NgModuleclass. We must declare every component in an NgModule class. If we use a component without declaring it, we'll see a clear error message in the browser console.
  3. bootstrap – the root component that Angular creates and inserts into the index.html host web page. The application will be launched by creating the components listed in this array.

5) What is Template reference variables?

A template reference variable (#var) is a reference to a DOM element within a template. We use hash symbol (#) to declare a reference variable in a template.

6) What are structural directives?

Structural directives are responsible for HTML layout. They shape or reshape the DOM’s structure, typically by adding, removing, or manipulating elements. Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in this example.

<li *ngFor="let country of countries">{{country}}</li>

The ngFor directive iterates over the component's countries array and renders an instance of this template for each country in that array.

Some of the other structural directives in Angular are ngIf and ngSwitch.

7) What is Directive in Angular 4? How it differs from Components?

Directives allow us to attach behavior to elements in the DOM, for example, doing something on mouse over or click. In Angular, a Directive decoraor (
) is used to mark a class as an Angular directive and provides additional metadata that determines how the directive should be processed. Below are the metadata properties of a directive.

  1. selector - css selector that identifies this component in a template
  2. host - map of class property to host element bindings for events, properties and attributes
  3. inputs - list of class property names to data-bind as component inputs
  4. outputs - list of class property names that expose output events that others can subscribe to
  5. providers - list of providers available to this component and its children
  6. queries - configure queries that can be injected into the component
  7. exportAs - name under which the component instance is exported in a template

A Component is a directive with a template. So we should use a Component whenever we want reusable set of DOM elements with behaviors of UI. And we should use a Directive whenever we want reusable behavior to supplement the DOM.

8) What are all the types of Directives?

There are three types of directives in Angular. They are attribute directivesstructural directives, and components.

  1. Structural directives change the DOM layout by adding and removing DOM elements. For example, *ngIf and *ngFor
  2. Attribute directives change the appearance or behavior of an element. . For example, *ngStyle and *ngClass
  3. Components are basically directives with a template.

9) What are all the uses of a service?

Services encapsulates business logic and separates them from UI concerns or the controller concerns, which governs them both.

Services focus on functionality thus benefits in maintainability. The separation of UI logic from business logic is intended to reduce the coupling between the UI layer and the Model layer, leading to a cleaner design that is easier to develop, test, and maintain.

10) What is Pure and Impure Pipes?

Pure pipes are stateless that flow input date without remembering anything or causing detectable side-effects. Pipes are pure by default, hence most pipes are pure. We can make a pipe impure by setting its pure flag to false. Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value or a changed object reference.

Impure pipes are those which can manage the state of the data they transform. A pipe that creates an HTTP request, stores the response and displays the output, is a impure or stateful pipe. Stateful Pipes should be used cautiously. Angular provides AsyncPipe, which is stateful.