Categories
Angular JavaScript UI

Angular Interview Questions Quiz with Key Answers

Angular Quiz :

1) Which command enables a number of optimizations that drastically reduces the size of the project?
A. ng build
B. ng build –optimize
C. ng build –prod
D. ng build –bundle

2) What Is an Angular Service?

A. It is the root AppComponent that Angular creates and inserts into the “index.html” host web page.
B. It is a tool to initialize, develop, scaffold and maintain Angular applications.
C. It is a class that encapsulates some HTTP methods and provides it result as a service for across your application.
D. It is a type of injection and attackers inject your web applications using the client side scripts and malicious code into web pages.

3) Which structural directive used to repeat a given HTML template once for each value in an array, each time passing it the array value as context for string interpolation or binding?
A. ngIf
B. ngFor
C. ngSwitch
D. ngRepeat

4) The format for defining Property Binding in a template is
A.
B.
C.
D.

5) Which is a tool to initialize, develop, scaffold and maintain Angular applications?
A. Service Worker
B. Angular CLI
C. Angular Bootstrap
D. Angular App

6) What are the main building blocks of Components?
A. Template
B. Class
C. Metadata
D. All of the above

7) Which is enables navigation from one view to the next as users perform application tasks?
A. Navigator
B. Router
C. Direction-finder
D. Path-finder

8) Which allows us to easily achieve data binding in two directions: from the view to the model and from the model to the view.
A. {{ngModel}}
B. [ngMode]
C. ([ngModel])
D. [(ngModel)]

9) The first animation-specific function that we use is _________. This allows us to define the name of the animation in the first parameter, and then an array of other animation-specific functions in the next.
A. transition()
B. animatronics ()
C. trigger()
D. animation()

10) Which is an animation-specific function that is designed to be used inside of Angular’s animation DSL language. If this information is new, please navigate to the component animations metadata page to gain a better understanding of how animations in Angular are used?
A. state()
B. transition()
C. animatronics ()
D. trigger()

11) What is Bootstrap?
A. Use to declare the application components.
B. Every application must import BrowserModule to run the app in a browser.
C. There are none to start.
D. This is a root AppComponent that Angular creates and inserts into the index.html host web page.

12) Which is the correct format for defining interpolation in a template?
A.
B.
C.
D.

13) Which allows you to define properties in a component class, and communicate these properties to and from the template?
A. Interpolation
B. Class Binding
C. Event Binding
D. Two way binding

14) List the types of Binding in Angular from the list :
A. Interpolation
B. Property Binding
C. Two-Way Data Binding
D. Event Binding

A. A,B,C
B. B,C,D
C. A,C,D
D. A,B,C,D

15) In some situation we want data values as boolean or other than string then we should go for _________ binding
A. Interpolation
B. Property
C. Template
D. Both A and B

16) True or False: The styles specified in @Component metadata apply only within the template of that component.
A. TRUE
B. FALSE

17) True or False: Component templates are not always fixed. An application may need to load new components at runtime.
A. TRUE
B. FALSE

18) The Bootstrap is the _______ AppComponent that Angular creates and inserts into the “index.html” host web page.
A. child
B. additional
C. root
D. module

19) Which defines the Layout of the View and defines what is rendered on the page. Without this, there is nothing for Angular to render to the DOM?
A. Selector
B. Class
C. Template
D. Style

20) ___________ configure the injector and the compiler and help organize related things together.
A. @NgModule
B. @Component
C. @Directive
D. @Module

Answers :

1)  C. ng build –prod
2)  C. It is a class that encapsulates some HTTP methods and provides it result as a service for across your application.
3) B. ngFor
4) B. [value]=”username”
5) B. Angular CLI
6) D.  All of the above
7) B. Router
8)  D.  [(ngModel)]
9)  C. trigger()
10) B. transition()
11) D. This is a root AppComponent that Angular creates and inserts into the index.html host web page.
12)  D. value={{username}}
13)  A. Interpolation
14)  B. B,C,D
15)  B. Property
16)  A. TRUE
17)  A. TRUE
18)  C. root
19)  C. Template
20) A. @NgModule

Categories
Angular CSS CSS3 HTML HTML5 JavaScript NodeJS UI

UI Developer / Lead / Architect Interview Question and Answers – Part 2

UI Developer / Lead / Architect Interview Question and Answers – Part 2

Type of components in Angular ? 

There are two types of components in Angular 


– Declarative components  

these components are  which are included in the template


– Entry components 

Any component that Angular loads imperatively and you’re not referencing it in the template. 



what is entry components in modules  ?


An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. 

You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition. 


There are two main kinds of entry components:


The bootstrapped root component.

A component you specify in a route definition.


Explain the process to do for popup in Angular material design ?   

The Angular Material library offers support for displaying modal dialogs in Material Design. 

To enable Angular Material Dialogs in your Angular application you need to import MdDialogModule in your main application module.

Next, make sure to also add MdDialogModule to the imports array of @NgModule

Make use of the MdDialog service which is part of MdDialogModule in our components

create a new component using cmd “ng g component DialogDemo”

which creates 4 files  html / css / ts / spec.ts  as below 


src/app/dialog-demo/dialog-demo.component.css

src/app/dialog-demo/dialog-demo.component.html

src/app/dialog-demo/dialog-demo.component.spec.ts

src/app/dialog-demo/dialog-demo.component.ts



In dialog-demo.component.html file add html code for modal popup display code using MdDialog, MdButton and MdCard elements and directives. 

import {MdCardModule} from ‘@angular/material’;

import {MdButtonModule} from ‘@angular/material’;

import {MdDialogModule} from ‘@angular/material’;


And add the types to the imports array also :

imports: [

BrowserModule,

BrowserAnimationsModule,

MdCardModule,

MdButtonModule,

MdDialogModule

  ],

  

  

add the component selector to the markup code of our main application component in file app.component.html. 

<app-dialog-demo></app-dialog-demo>

Now you can customize the code based on the actions/events/data sharing etc.. in the modal (Dialog) popup component/services in ts files. 



what is the criteria to choose on JS frameworks ? 

There are many criteria when it comes to choosing a JS framework like 

Functionality , Usability, Reliability, Efficiency, Maintainability and Portability 

and also finalize based on the 

Project requirements suitability 

Browser Support {typically with Safari on the Mac} 

Strength of development team supporting the framework.

Maturity of the framework

Frequency of public updates and releases.

Documentation quality.

Existence of an active community.

Benchmark tests on performance aspects

Extensibility of the framework with Plugin support 

API Style Support 

Commericial Support availablity 

and functionalitywise support like 


DOM navigation/manipulation

Basic UI components support

Advanced UI widget library

Themes and skinning support

Validations support

Ease of server interaction

Multiple data exchange formats support 

how to trigger LazyLoading feature in AngularJS ?

we need lazy loading to improve the performance of loading time of the application. 

Instead of loading all components at first time , in angular we can split this into children and load it whenever required.

Lazy Loading is load only what we need to use when first starting up the application. 

If user navigate to a new page, then the component for that page will load immediately.


Lazy loading is performed by allowing the router config to provide the module to load on route execution. 

To utilize lazy loading you must split your code into modules.

In the app.router.ts you will have the special router called loadChildren, this is used for lazy loading module 

and it accepts value as a string. 

The path of the loadChildren is based on src directory, you need to provide the full path of your feature module 

and put the ‘#’ sign then your export module class name.

Finally, we need to import the app.router.ts that is root router of the application to the app.module.ts.


how to do State Management in AngularJS  ? 

State Management OR Managing state means need to coordinate multiple backends, web workers, and UI components, all of which update the state concurrently. 

Patterns like Redux and Flux are designed to address this problem by making this coordination more explicit.

A typical web application has the following six types of state:


Server state

Persistent state

The URL and router state

Client state

Transient client state

Local UI state


Backend manages the server state, persistent state (the talks) and the client state (the filters).

The router manages the URL and the router state.

WatchService manages the transient client state (watched talks).

The individual components manage the local UI state.


and maintaining / synchronizing these states across the application using custom observers OR usnig tools like Redux. 


what is content in angular ?

Transclusion in AngularJS OR Content Projection in Angular is a way to let you define a fixed view template, and 

at the same time allow you to define a slot for dynamic content by using <ng-content> tag.

and using the type of selector like Attribute, HTML tag, or CSS class etc.. you can load the dynamic content in the ng-content directive section. 

Whenever some libraries conflict issues are coming , how do you solve ?

You can avoid the conflicts with other libraries using namespaces OR Alias like jQuery noConflict method. 

OR 

if libraries are managed using packages.json than using peerDependencies package attribute you can manage multiple versions of files.


Difference between routing and templating ? 

Routing -> To navigate to different pages in the application with no page reloading we use Angular Routing using ngRoute module.

The ngRoute module routes your application to different pages without reloading the entire application.


Templating -> templating allows you to create one master page for the structure and then just replace pieces of the page with different content based on the url.


AngularUI Router -> The UI-Router is a routing framework for AngularJS provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL. 



Difference between unidirectional data binding and bidirectional data binding ? 

One way binding is bind the data from model to view. 

Where as two way binding is bind the data from model to view and view to model. 

Data flows from the Scope/Controller to the View and from the View to the scope/controller). 

‘ng-model’ is an angular directive used for achieving two-way data binding.



Difference between responsive and adaptive design ? 

Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment , size, device etc…


Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). 

Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen. 

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design.


Adaptive design detects the device and other features and then

provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics 



Difference b/w Javascript vs ES5 or ES6 ? 

scripting language is a programming language designed specifically for acting on an existing entity or system. 

ECMA means European Computer Manufacturer’s Association  ECMAScript (ES)  –>  Is the specification defined in ECMA-262 for creating a general purpose scripting language. 

ECMAScript provides the rules, details, and guidelines that a scripting language must observe to be considered ECMAScript compliant.


JavaScript (JS)  –> A general purpose scripting language that conforms to the ECMAScript specification. 

JavaScript mostly implements the ECMAScript specification as described in ECMA-262. 


A JavaScript engine –> A program or interpreter that understands and executes JavaScript code. 

JavaScript engines are commonly found in web browsers, including V8 in Chrome, SpiderMonkey in Firefox, and Chakra in Edge. 


ECMAScript 5 –> 

It is the fifth edition of the ECMA-262 standard, and major features of the ECMAScript specification. 


ECMAScript 6  –> 

It is the sixth edition of the ECMA-262 standard, and features major changes and improvements to the ECMAScript specification.


Babel

A transpiler that can convert ES6 code to ES5 code.



Which is First ? Chicken or  Egg — ECMAScript or JavaScript 

A confusing bit of history is that JavaScript was created in 1996. It was then submitted to Ecma International in 1997 for standardization, which resulted in ECMAScript. At the same time, because JavaScript conformed to the ECMAScript specification, JavaScript is an example of an ECMAScript implementation.

ECMAScript is based on JavaScript, and JavaScript is based on ECMAScript.

To read more on this topic, here is the best article resource : https://www.toptal.com/angular/angular-components-overview-101