Updated Angular 5 Interview Questions and Answers

Q1. What is Angular 5?

Ans

Angular 5 is an upgraded version of angular which is much faster, smaller, and easier to use. Some of its new features are Progressive Web Application Angular Universal State Transfer API and DOM Build Optimizer tool.

Q2. List the types of Data binding supported by Angular 5

Ans

Angular 5 supports four types of Data Binding They are

• String Interpolation
• Property Binding
• Event Binding
• Two-way-binding

Q3. How to run Angular 5 application locally during development?

Ans

ng serve command is used to run Angular5 application locally during development. To start development server on specific port ng serve -p aPortNumber command is used.

Q4. What’s new in Angular 5?

Ans

Certain tools are optimized in the new version of Angular, let us see what the tools are:

• Angular 5 supports Typescript version 2.4
• Angular 5 supports RxJS 5.5 which has new features like Pipeable Operators
• A build tool to make the js bundles (files) lighter
• Ahead of Time (AOT) is updated to be on by default
• Events like ActivationStart and ActivationEnd are introduced in Router

Q5. Differentiate between Components and Directives in Angular 5.

Ans

Components break up the application into smaller parts; whereas, Directives add behavior to an existing DOM element.

Q6. What is Routing in Angular 5?

Ans

Routing helps a user in navigating to different pages using links.

Q7. How to handle events in Angular 5?

Ans

Any activity (button click, mouse click, mouse hover, mouse move, etc) of a user on a frontend/web screen is termed as an event. Such events are passed from the view (.HTML) page to a typescript component (.ts).

Q8. What an Angular 5 component made of ? How do you generate a new component?

Ans

Angular5 component is made of a Component decorator and a component definition of a class.
ng generate component component_name command is used to generate a component in Angular5.

Q9. How do we import a module in Angular5 ?

Ans

Simply use below syntax to import a module in Angular5.
import { ModuleName } from 'someWhere';

Q10. Explain $event in Angular5?

Ans

In Angular5 $event is a reserved keyword that represents the data emitted by an event (event data).It is
commonly used as a parameter for event based methods.

Q11. What do Double curly brackets are used in Angular5?

Ans

Double curly brackets like are used form data interpolation in Angular5.

Q12. Explain NgModule?

Ans

NgModule is a decorator function in Angular that takes a single metadata object whose properties describe the module.

Q13. What Is Bootstrapping in Angular?

Ans

main.ts is the entry point of your application, compiles the application with just-in-time and bootstrap the application.The Bootstrap is the root AppComponent that Angular creates and inserts into the “index.html” host web page.The bootstrapping process creates the components listed in the bootstrap array and inserts each one into the browser (DOM).

Q14. How To Angular 5 generate Component, Directive, Pipe, Service, Class, and Module?

Ans

Q15. What Is the Angular Compiler? Why we need Compilation in Angular?

Ans

The Angular compiler converts our applications code (TypeScript) into JavaScript code + HTML before browser downloads and runs that code.

The Angular offers two ways to compile our application code-

• Just-in-Time (JIT) – JIT compiles our app in the browser at runtime (compiles before running).
• Ahead-of-Time (AOT) – AOT compiles our app at build-time (compiles while running).

Q16. What Is the difference between JIT compiler and AOT compiler?

Ans

JIT (Just-in-Time) 

• JIT compiles our app in the browser at runtime.
• Compiles before running
• Each file compiled separately
• No need to build after changing our app code and it automatically reflects the changes in your browser page
• Highly secure
• Very suitable for local development

AOT (Ahead-of-Time) 

1. AOT compiles our app code at build time.
2. Compiles while running
3. Compiled by the machine itself, via the command line (Faster)
4. All code compiled together, inlining HTML/CSS in the scripts
5. Highly secure
6. Very suitable for production builds

Q17. Explain the life cycle hooks of Angular 5 application

Ans

Some of the events are applicable for both component/directives while few are specific to components.

• ngOnChanges: Responds when angular sets its data-bound property which receives the current and previous object values.
• ngOnInit: Initializes the component/directive after first ngOnChange triggers. This is most frequently used method to retrieve the data for the template from a back-end service.
• ngDoCheck: Detect and act upon changes occurring outside Angular context. It is called when every change detection run.
• ngOnDestroy: Cleanup just before Angular destroys the directive/component. Unsubscribe observables and detach event handlers to avoid memory leaks.

Component-specific hooks:

• ngAfterContentInit: Component content has been initialized
• ngAfterContentChecked: After Angular checks the bindings of the external content that it projected into its view.
• ngAfterViewInit: After Angular creates the component’s view.
• ngAfterViewChecked: After Angular checks the bindings of the component’s view.

Q18. What are the core differences between Observables and Promises?

Ans

An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable, it doesn’t matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case. Observable also has the advantage over Promise to be cancelable. If the result of an HTTP request to a server or some other expensive async operation isn’t needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don’t need the notification or the result it provides anymore. Observable provides operators like map, forEach, reduce, … similar to an array. There are also powerful operators like retry(), or replay(), … that are often quite handy.

Promises vs Observables

• Promises:
  1. returns a single value
  2. not cancellable
• Observables:
  1. works with multiple values over time
  2. cancellable
  3. supports map, filter, reduce and similar operators
  4. proposed feature for ES 2016
  5. use Reactive Extensions (RxJS)
  6. an array whose items arrive asynchronously over time

Q19. Explain tsconfig.json file.

Ans

{ 
   "compilerOptions": { 
      "target": "es5", 
      "module": "commonjs", 
      "moduleResolution": "node", 
      "sourceMap": true, 
      "emitDecoratorMetadata": true, 
      "experimentalDecorators": true, 
      "lib": [ "es2015", "dom" ], 
      "noImplicitAny": true, 
      "suppressImplicitAnyIndexErrors": true 
   } 
}

• target: the language used for the compiled output
• module: the module manager used in the compiled output. system is for SystemJS, commonjs for CommonJS.
• moduleResolution: the strategy used to resolve module declaration files (.d.ts files). With the node approach, they are loaded from the node_modules folder like a module (require('module-name'))
• sourceMap: generate or not source map files to debug directly your application TypeScript files in the browser,
• emitDecoratorMetadata: emit or not design-type metadata for decorated declarations in a source,
• experimentalDecorators: enables or not experimental support for ES7 decorators,
• removeComments: remove comments or not
• noImplicitAny: allow or not the use of variables/parameters without types (implicit)

Q20. Explain systemjs.config.json file.

Ans

system.config.js is the one which allows to load modules(node modules) compiled using the TypeScript compiler.map refers to the name of modules to JS file that contains the JavaScript code.

Q21. Explain app.module.ts file.

Ans

This is root module that tells Angular how to assemble the application. Every Angular app has a root module class.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

@NgModule — takes a metadata object that tells Angular how to compile and launch the application.

Imports — the BrowserModule that this and every application needs to run in a browser.

Declarations — the application’s component.

Bootstrap — this is the root component tells which component to run first.

Q22. What is @Inputs in Angular5?

Ans

@Input decorator binds a property within one component (child component) to receive a value from another component (parent component). This is one-way communication from parent to child. The component property should be annotated with a @Input decorator to act as input property. A component can receive a value from another component using component property binding.It can be annotated at any type of property such as number, string, array or user-defined class. To use an alias for the binding property name we need to assign an alias name as .@Input(alias)

Q23. What is @Outputs in Angular5?

Ans

@Output decorator binds a property of a component to send data from one component (child component) to calling component (parent component). This is one-way communication from child to the parent component. @Output binds a property of the type of angular EventEmitter class. This property name becomes custom event name for calling component. @Output the decorator can also alias the property name as @Output(alias) and now this alias name will be used in custom event binding in calling component.

Q24. How can you handle errors in Angular 5 application?

Ans

The error in Angular 5 can be handled by

• Try – Catch functionality
• Observable Errors
• Promise Errors