Angular 2+ Interview questions and answers – a quick guide

Angular:
  1. Angular is a Java script framework built around the concept of Components. And it uses TypeScript, ES6 Standards.
  2. Angular 1.x doesn’t have components and it doesn’t support completely Ecma6 script specifications where it has Controllers and Scope.
TypeScript: It is a super set of Javascript. Example : Objective C is super set of C language.

ECMA 5 & 6:

ECMAScript is a standard. JavaScript and ActionScript are well-known implementations of the ECMAScript standard.
JavaScript is a subset of ECMAScript. JavaScript is basically ECMAScript at its core but builds upon it. Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core. As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine… each of their exteriors is different though, and there have been several modifications done to each to make it unique.

HTML 4 & 5 Differences:
  1. No Doctypes.
  2. Better Web application features – Example –  <canvas><video>, and <audio>
  3. Improved Elements Semantic - Example: <article>, <section>, <header>, <aside>, and <nav>

CSS 2 and CSS 3 Differences: 
  • New CSS3 Selectors – It allows pesudo elements.
  • New Properties – Like box-shadow, box-radius.
  • Multiple Background elements
  • New border styles – eg: borer-radius, border-image-source.
  • Designer can use special fonts (Google fonts, Typecast) but CSS2 allows to Web safe fonts.

SASS – Syntactically awesome style sheets:
It is basically a preprocessor. And it helps to reduce duplication by USING variables, import, nesting and inheritance in CSS.

Bootstrap 3 & 4 Differences:
There are lot of difference, but below are significant changes.
  1. CSS Source file is updated to LESS (Leaner style sheets) to SASS (Syntactically awesome style sheets. )
  2. Changes in default font
  3. Responsive Tables.
  4. Tooltip changes

Webpack:
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Decorators:
It is basically a metadata to the class that will tell Angular how to process a class. Selectors, Template, Styles, Directives and Providers are the examples of Decorators in Angular.

Directives:
It is one of the decorator in Angular. It is helps us to attach behavior to DOM element. Any class can become a directive if we attach @Directive decorator.
Angular 2+ categorizes directives into 3 parts:
  1. Directives with templates known as Components
  2. Directives that creates and destroys DOM elements known as Structural Directives
  3. Directives that manipulate DOM by changing behavior and appearance known as Attribute Directives

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

Structural Directives:
Structural Directives are responsible for HTML Layout. It is precedes with asterisk. Eg: *ngIf, *ngFor, *ngSwitch

NgModules:  The purpose is to consolidate Components, Directives and Pipes. Every application has at least one NgModule, the root module that we bootstrap to launch the application.
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [],
declarations: [AppComponent]
})

Routing:
Routing enables navigation from one view to another view to perform tasks. It is an optional service and It uses its own library package @angular/router.

RxJS:  Reactive Programming is an asynchronous programming paradigm(Prototype). Observable, retry, Promise, Error handling are the tools in RxJs.

Redux:  Redux is an application state manager for JavaScript applications. @ngrx is a set of modules that implement the same way of managing state as well as some of the middleware and tools in the Redux ecosystem.
In other way, ngrx is a collection of reactive libraries for angular, containing a redux implementation and many other useful libraries.

Custom Attribute Directives: Angular is not limited one, still we can create our own Directives which we call it as Custom attribute directives.

Components:
Angular 2 categorizes directives into 3 parts:
  1. Directives with templates known as Components
  2. Directives that creates and destroys DOM elements known as Structural Directives
  3. Directives that manipulate DOM by changing behavior and appearance known as Attribute Directives

Pipes: Pipes is simple way to transform values in template. It has two categories one Pure and Impure. When transfer return true, then it is pure pipe.

Custom Pipes: We can create our custom pipes by calling @Pipe decorator.

HTTP Interceptors:
HTTP interceptors to set headers (JWT for example), redirect on error responses and so on, this will help you avoid a lot of code duplication

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.