Angular 5 Interview Questions

Angular 5 Interview Questions


Name the building blocks of Angular:
Data Binding
Dependency Injection


Data Binding

Interpolation {{}}: This is the one-way binding of a component’s property to the template of the component. So, when the property in the components changes, the template is updated to reflect the new changes. This binding is one-way in the sense that, the Model’s property can only be updated from the Model side and the View is updated or the Model’s variables are kept up to date from the View. The data flow is in one direction either from Model-to-View or View-to-Model.
<li>Name: {{ }}</li>


Property Binding []: This a one-way binding of a Model’s data to the binding target. The binding target can be element properties, components properties or directives directives properties. In between the square brackets [] is the name of the Model’s property to be bound to the element.

input type=”email” [value]=””>


Component Binding: The Child component is rendered on the Parent markup. The Parent uses [] to bind data property of Child to its dataSource property. When the dataSource changes the data property in the child is updated to reflect the new changes. In Angular components use the @Input decorator to tell which property is open to the outside world.


Event Binding (): This while we have been dealing with passing data from parent-to-child. Now we will see how we can pass data upwards from child to parent. In the DOM, elements can raise events and we bind each event with an event handler, a function that is run when the event is emitted.

<button (click)=”cookPotato()”></button>


Banana in the Box [()]: This is a term coined from merging property binding with event binding: [()] to gain the two-way binding power.<input type=”email” [(ngModel)]=””>


What is Transpiling in Angular?
Transpiling is the process of converting typescript into javascript (it uses Traceur, a js compiler).

Differentiate between Components and Directives in Angular 5?
Components are application blocks where the data can be displayed in the HTML using some logic.
Directives add behaviors to existing DOM elements.

What are the Pipes?
It`s a feature used to format the data that will be displayed.

What is the use of @Input and @Output?
It`s used to communication between parent and child components, @Input is used to send data from parent to child. @Output is used to child send and event to the parent.

What is ng-content Directive?
Its used to render custom content in components. Its placeholder for custom HTML.

What does a router.navigate do?
It`s used to navigate to other components.

What is ViewEncapsulation?
It defines how the component styles will affect the entire application.
Emulated: styles from components spread to the component.
Native: styles from components do not spread to the component.
None: styles defined in a component are visible to all components.

What are Services in Angular and what command is used to create a service?
Services is a feature used to provide modularity and reusability avoiding code to be duplicated.
With the creation of the services you can use the same code in different components.

What is Dependency Injection in Angular?
One component is dependent on another component, service, pipe, etc… it will be provided through injection by the constructor during run-time.

What is Routing in Angular?
It helps the user to navigate to different pages using links.

How to handle Events in Angular 5?
Any DOM event is passed from HTML to a typescript event.

What is a RouterOutlet?
Its used to render components at a specific location of the page.

Explain the usage of {{}}?
Also Known as Interpolation, it`s used to display component data in the html.

In how many ways the Data Binding can be done?
Event Binding.
Data Binding.
Property Binding.

What is the sequence of Angular Lifecycle Hooks?

What is the purpose of using package.json in the angular project?
Manage project dependencies.

How is SPA (Single Page Application) technology different from the traditional web technology?
In Traditional Web apps the client requests a page and the server will respond with the HTML of the whole page, this process consumes a lot of time due to a lot of reloading.
In SPA app the maintain only one page even if the URL changes and only part of the page content changes.

What is Component in Angular Terminology?
Component is a block of code that can display data on the HTML with some logic usually written in typescript.

What are ngModel and how do we represent it?
NgModel is directive used for 2 way data binding and its represented by [()]

What does a Subscribe method do in Angular?
Observables need a subscription in order execute, the subscribe method will do that.

Differentiate between Observable and Promises.
Observable are lazy and an execution will happen only when a subscription is made. It may handle zero or more events.
Promises are eager and will be executed when its created. It handles only one event.

What is an AsyncPipe in Angular?
With AsyncPipe the promise or observable can be used direct in the HTML and in this case a temporary property is not required.

Explain Authentication and Authorization.
Authentication: The client send the user credentials to an api, the api will evaluate it and return a JWT in case of success, the JTW has the user claims and it will be used to identify the user.
Authorization: The process of checking if the user is authorized to access some data or resource.

What is AOT Compilation?
Every angular application gets compiled internally. The angular compiler takes javascript code, compiles it and produces javascript code again. Ahead-of-Time Compilation does not happen every time or for every user.

What is Redux?
It`s a library used to maintain the state of application.

Differentiate between ng-Class and ng-Style.
NgClass is used to set css classes.
NgStyle is used to set css styles.

Why Typescript with Angular?
Offers OOP concepts like Interfaces, Inheritance, Generics Arrow Functions:
Lovingly called the fat arrow (because -> is a thin arrow and => is a fat arrow) and also called a lambda function (because of other languages). Another commonly used feature is the fat arrow function ()=>something. The motivation for a fat arrow is:
You don’t need to keep typing function
It lexically captures the meaning of this
It lexically captures the meaning of arguments
It`s flexible and easy for programmers experienced with .net and java



Read More