Angular 6

Angular is a TypeScript-based open-source web application framework. It is one of the popular choice of web developer. So if you want to become a successful web developer, then you must require a sound knowledge of Angular. Practice these question and answers multiple time to prepare for your next job interview.

Q.1 What are the new features that comes with Angular6?
Some of the Key features of Angular 6 are -
1. There is added support for creating Custom Elements based on Angular Components.
2. There are animations expose element and params within transition matchers.
3. The Bazel - change ng_package rule to APF v6
4. The singleline, multiline and jsdoc comments are now supported
5. The compiler-cli add resource inlining to ngc
6. The support for TypeScript 2.7
7. Require node 8 as runtime engine
Q.2 What are the Ngmodule Metadata properties?

NgModule decorator identifies AppModule as a NgModule class. Such that the NgModule takes a metadata object that tells Angular how to compile and launch the application.

Some of the important NgModule metadata properties are – providers, declarations, imports, exports, entryComponents, bootstrap, schemas and id

Q.3 How do you define Zone in Angular?

Zones are a type of performance setting that empowers us to catch into our anachronistic tasks.

Primarily, Zones in angular APIs helps to increase the performance by executing our code exterior to the angular zone. Also Zone helps in preventing Angular from the governing unwanted alter detection assignments

Q.4 How can you generate a module in Angular?
In order to generate a module in Angular, cd to the current project directory and given command. ng g module module_name
Q.5 What do you understand by the term AOT?
AOT abbreviated as Ahead-of-Time compiler pre-compiles application components and their templates during the build process. Some of reason apps compiled with AOT launch faster for -
1. Application components execute immediately, without client-side compilation.
2. Templates are embedded as code within their components so there is no client-side request for template files.
3. We cannot download the Angular compiler, which is pretty big on its own.
4. The compiler discards unused Angular directives that a tree-shaking tool can then exclude.
Q.6 What is the difference between code snippet between “declarations”, “providers”, and “imports” in ng module for angular 6?
We shall now discuss about declaration, providers, and imports:

1. Declarations: One of the key features of Angular for available varieties components or pipes of a single directive for the current module to other directives of the current module. Therefore if someone is willing to use some same declare component in the current module from other directives then declaration should need to be done properly.
2. Imports: Helps of availability of other module components in a current module by importing the same.
3. Providers: It is helping DI for identifying and understanding of using services and values.
Q.7 Differentiate between “constructor” and “ngoninit” for angular JS 6 version?
One of the most general Angular 6 Interview Question asked in an interview.
1. Constructor: Constructor is one of the default declarations for any specific class or object, it can be referred every time when any class instantiated, also ensuring initialization properly of their subclasses and different instance variable fields.
2. Ngonint: It is one of the first initialize method used by Angular, mention in the first component of an angular life cycle. It mainly indicated that angular has been completed of creating entire require components properly. It is not mandatory to use but best practice to use.
Q.8 What's current In Angular 6? And what improvements are there in it?

The Angular Team are working on lots of bug fixes, new features and added/update/remove/ re-introduce/ and many more things.

Changes of Angular 6 can be explored step by step:
Included ng update - This CLI commands will update your angular project dependencies to their latest versions. The ng update is normal package manager tools to identify and update other dependencies.

Q.9 What Are The Ngmodule Metadata Properties?

AppModule is identified as NgModule class by the module director.
The NgModule takes a metadata object that instructs the Angular to how to compile and launch the application.
The NgModule importance metadata properties are:-


  • providers
  • declarations
  • imports
  • exports
  • entryComponents
  • bootstrap
  • schemas
  • id
Q.10 What are the Types Of Ngmodules?

There are four types of NgModules –

  • Features Module
  • Routing Module
  • Service Module
  • Widget Module
  • Shared Module
Q.11 What Is A Cookie?
A small piece of data sent from a website and stored on the user's machine by the user's web browsers while the user is browsing is known as a Cookie.
Q.12 What Is Pure Pipe?

When a pure change to the input value is detected then only Angular executes a pure pipe. A pure change can be primitive or non-primitive.

Primitive data are only single values, and they do not possess any special capabilities and the non-primitive data types are used to store the group of values.

@Pipe({name: 'currency'})

Q.13 What Is Impure Pipe?

During every component change detection cycle, Angular executes an impure pipe. An impure pipe is called frequently, as frequent as every keystroke or mouse-move.

An Id if you want to make a pipe impure that time you will allow the setting pure flag to false.
@Pipe({ name: 'currency', pure: false })

Q.14 What Is Parameterizing Pipe?

In order to achieve the output a pipe can accept any number of optional parameters. Any valid template expressions, can be the parameter value. Follow the pipe name with a colon (:) to add optional parameters. It looks like- currency: 'INR'


In the following example–

The birthday is - {{ birthday | date:"MM/dd/yy" }}

Q.15 What do you understand from a Chaining Pipe?

To perform the multiple operations within the single expression the chaining Pipe is used. This chaining operation will be chained using the pipe (I). In the following example, to display the birthday in the upper case- will need to use the inbuilt date-pipe and upper-case-pipe.


In the following example –
{{ birthday | date | uppercase}}

Q.16 Why You Use Browsermodule, Commonmodule, Formsmodule, Router module, And Httpclientmodule?
  • BrowserModule – The browser module is imported from @angular/platform-browser and it is used when you want to run your application in a browser.
  • CommonModule – The common module is imported from @angular/when you want to use directives common and it is used - NgIf, NgFor and so on.
  • FormsModule – The forms module is imported from @angular/forms and it is used when you build template driven forms.
  • RouterModule – The router module is imported from @angular/router and is used for routing RouterLink, forRoot, and forChild.
  • HttpClientModule –The HttpClientModule is imported from @angular/common/http and it used to initiate HTTP request and responses in angular apps. The HttpClient is more modern and accessible to use the alternative of HTTP.
Q.17 Is node js required for angular 6?

Angular does not need node.js directly. For all the build and development tools, Node js is used.

Angular is a framework and to program using Angular you may use typescript or javascript or dart programming language.

Q.18 What are the new features of angular 6?
  • Develop Single Page applications Angular is a perfect framework.
  • Service Worker Support. Basically service workers are the scripts which run in the web browser and manage to cache an application.
  • Template Element.
  • i18n.
  • Ivy New Rendering Engine.
  • ngModelChange.
  • ElementRef
  • Basel Compiler.
Q.19 What is Appcomponent in angular?

Angular is a platform and framework for building client applications in HTML and TypeScript.

NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a root module that enables bootstrapping, and typically has many more feature modules.

Q.20 Is angular 6 released?

Angular 6 was released on May 4th, 2018.

The highlights of Angular 6 include The Component Development KIT (CDK), the Angular Command Line Interface (CLI), and the Angular Material package update.

Q.21 Upgrade to Angular 6 — Within 15 Minutes
  • Add the new CLI. npm install @angular/cli@latest -g.
  • Upgrade the CLI locally in your project. ng update @angular/cli.
  • Upgrade Angular dependencies.
  • Upgrade Angular dev dependencies.
  • Upgrade Angular dependent dependencies.
  • Upgrade Angular dependent dev dependencies.
  • Install TypeScript 2.7.2.
  • Install RxJS 6+
Q.22 Why do we use angular 6?

Angular 6 also includes two very important superpowers to the CLI: Schematics and Libraries.

Schematics permits you to reduce your boilerplate code to a custom schematic that you can create for your own modules and components. While, the new library generator makes it much easier to contribute open-source modules.

Q.23 How do I upgrade AngularJS 4 to 6?
Step 1: Globally upgrade the Angular CLI from 1.x to 6. Then using Command Install the angular-cli 6 globally:
Step 2: Upgrade Angular CLI version in project. Go to project the source directory.
Step 3: Identify the packages that need an upgrade.
Step 4: Upgrade packages.
Step 5: Solve peer dependency issues.
Q.24 Should I use angular CLI?

My advice is to use the Angular CLI, If for your next project you choose Angular.

The Angular CLI is only a wrapper around Webpack. And especially when you are not a Webpack and Angular expert. But be prepared, that there is a very low chance that Angular CLI will not stay with your project until the end.

Q.25 What is angular and TypeScript?

Angular is a modern framework built entirely in TypeScript, and as a result, a seamless experience is provided by using Typescript with Angular.

The TypeScript isn't only used as a first-class citizen, but supported as the primary language by the Angular Documentation.

Q.26 What is the difference between angular 4 and 6?

Angular 2 and Angular 4 both are the enhanced size of AoT or ahead-of-time and have compiler generated code.

Due to compiler generated code, Angular 4 has become smoother and swift when compared to the Angular JS 2. Angular 2 supports TypeScript 1.8 version, whereas Angular 4 supports typescript 2.1 and 2.2 versions.

Q.27 What angular 6?

Angular6 is a Open source Javascript framework, to develop dynamic web applications.

Angular 6 eases development of web application as it uses HTML like syntax to declare various functionality of a web application.

Angular 6 features

  • Released on April 2018
  • Improvements in tool-chain
  • removed <template> tag with “<ng-template>”
  • Changed Registering provider
  • Changes in ngModelChange event
  • ng update <package> command in CLI for app update
  • ng add command in CLI for new capability to add to app
  • complete support of Angular Elements to create an Angular component and publish it as  web component
  • supports configuration of navigation URLs within the Service Workers
  • i18n is with runtime rendering
  • New rendering engine added - Ivy
  • Bazel compiler support
  • RxJS 6.0 support


Q.28 What is the use of angular 6?

Angular6 is a open source Javascript framework, to develop dynamic web software applications.

Angular6 is used for

  • is used to develop single page applications or SPA.
  • Makes it easy to build web Single Page Applications.
  • publish web component
  • Using Component Development Kit or CDK to build own UI components library
  • supports for Responsive Web Design.
  • Has Angular Command Line Interface (CLI) with ng-update and ng-add command
  • Use Angular Material Design Library to visualize tree structures in hierarchical order.
  • Use Bazel Compiler which offers optimized dependency, distributed caching, parallel execution,
  • Use Closure Compiler to build minimum JavaScript modules
  • Has Ivy Renderer

Q.29 Is AngularJS and angular 6 same?
No, AngularJS and angular 6 are not the same
Q.30 What is the angular latest version?
The latest in Angular is version 8 released in May, 2019 and the latest updated version of Angular is 8.2.13 as in October, 2019
Q.31 How do I create a project in angular 6?

Create a project in angular 6 by using Angular 6 CLI as

ng new project-name


A project structure is created.

Q.32 What is NPM in angular?

NPM in angular is used for package management.

Angular framework and CLI are NPM packages and distributed by NPM registry.

NPM expands to Node Package Manager and is the default package manager for Node.js.

Q.33 What are observables in angular 6?

Observables in Angular 6 are placeholder or an interface for asynchronous operations using RxJS.

It is like an subscription such that we process or take action, if something happens.

Angular's http client library returns observables by default. With reactive programming (like rxJS) we can make observables out of events like click events.

The HTTP module uses observables to handle AJAX requests and responses. We can define custom events that send observable output data from a child to a parent component.

Q.34 Is angular 6 released?
Yes, Angular 6 released on April 2018
Q.35 What are new features in angular 6?

Angular 6 features

  • Improvements in tool-chain
  • removed <template> tag with “<ng-template>”
  • Changed Registering provider
  • Changes in ngModelChange event
  • ng update <package> command in CLI for app update
  • ng add command in CLI for new capability to add to app
  • complete support of Angular Elements to create an Angular component and publish it as  web component
  • supports configuration of navigation URLs within the Service Workers
  • i18n is with runtime rendering
  • New rendering engine added - Ivy
  • Bazel compiler support
  • RxJS 6.0 support
Q.36 What AngularJS 7?

Angular 7 is open source Javascript framework.

Angular 7 features

  • Released on Oct, 2018
  • Angular 7 supports Typescript 3.1, RxJS 6.3 and Node 10.
  • CLI Prompts helps users to explore the in-built SCSS support, routing, etc.
  • Increased application performance by to automatically removing reflect-metadata from polyfills.ts file
  • Has virtual scrolling to bind a long list of elements in small packets
  • Support for dragging and dropping items in the list using CDK
  • Can set up a budget limit of final bundle size default lower limit is 2MB and higher is 5 MB
  • updates in Angular Elements
  • support for Node 10, TypeScript3.1, and the RxJS6.3
  • Angular 7 offers Do-Bootstrap and ngDoBootstrap
  • @Output has better error handling

Q.37 How do I create a project in angular 2?
  • Set Up the Development Environment. For building an Angular 2 project, you need to have the Angular CLI (command line interface). 
  • Create a New Project. Open a terminal window. ...
  • Serve the Application. Go to the project directory and install node modules in your project directory.
Q.38 How install angular from NPM?

Installing angular from NPM, is done by installing from Angular CLI.
Angular CLI needs Node.js as it is available as NPM package.

Steps to installing angular from NPM, are

  • Check Node.js is installed by giving the command – node –v
  • Install Angular CLI by command - npm install -g @angular/cli
  • Angular is installed, create new project by command - ng new <project or app name>

Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages.

Q.39 What is subscribe in angular 6?

Subscribe is an method in RxJS library and is used with observables.

The subscriber function defines how to obtain or generate values or messages to be published.

You create an Observable instance that defines a subscriber function, which is called  when a consumer calls the subscribe() method

To execute the observable you have created and begin receiving notifications, you call its subscribe() method, passing an observer. This is a JavaScript object that defines the handlers for the notifications you receive. The subscribe() call returns a Subscription object that has an unsubscribe() method, which you call to stop receiving notifications.

Q.40 What are observables in angular 7?

Observables in Angular 7 are placeholder or an interface for asynchronous operations using RxJS.

It is like an subscription such that we process or take action, if something happens.

Angular's http client library returns observables by default. With reactive programming (like rxJS) we can make observables out of events like click events.

The HTTP module uses observables to handle AJAX requests and responses. We can define custom events that send observable output data from a child to a parent component.

Q.41 Why We Use subscribe in angular 6?

Use of subscribe in angular 6, is done with usage of observables inn Angular 6.

Subscriber function defines how to obtain or generate values or messages to be published.

Subscribe is a method in RxJS library and is used with observables.

You create an Observable instance that defines a subscriber function, which is called  when a consumer calls the subscribe() method.

To execute the observable, you call its subscribe() method, passing an observer. The subscribe function returns a Subscription object with an unsubscribe() method for stopping the notifications.

Q.42 What is promise in angular?

Promise in Angular, is used with asynchronous tasks.

Promises return only a single value as

  • data or output if promise resolves
  • or error message if promise rejects

Request initiated by a promise is not cancellable. Promise was added in Angular from Angular 2.
An observable in comparison, handles multiple events similar to a stream.

Q.43 What is RxJS in angular?

RxJS in angular is a library for reactive programming using observables to easily compose asynchronous or callback-based code.

RxJS in Angular, gives an implementation of the Observable type.

RxJS expands to Reactive Extensions for JavaScript.

RxJS in Angular also gives many utility functions for creating and working with observables, like

  • Converting existing code for async operations into observables
  • Iterating through the values in a stream
  • Mapping values to different types
  • Filtering streams
  • Composing multiple streams

Q.44 What is HttpClient in angular?

HttpClient in Angular, is an client HTTP API.

HttpClient in Angular, is in @angular/common/http for Angular applications using the XMLHttpRequest interface.

HttpClient provides benefits to Angular, as HttpClient has

  • testability features
  • typed request and response objects
  • request and response interception
  • Observable apis
  • streamlined error handling
Get Govt. Certified Take Test