Angular

If one service is provided at different NgModule and Component here will be only one instance of that service A. True B. False

B False

In AOT compilation mode, Angular web application get shipped with angular compiler along with website content in browser. A. True B. False

B False

One component can be declared inside more than one NgModule A. True B. False

B False

Pipes modify underlying value of bound expression/variables A. True B. False

B False

Router service needs to be explicitly provided in angular module to use it in other component via DI A. True B. False

B False

To use HttpClient component you need to import below module A. HttpModule B. HttpClientModule C. Http D. None of the above

B HttpClientModule

Select type of pipe Angular executes during every change detection cycle of component A. Pure Pipe B. Impure Pipe

B Impure Pipe

Below construct provide modular structure to angular application A. Component B. NgModule C. Directives D. Pipes

B NgModule

HTTP service's get/put/post/delete function returns A. object of type "any" B. Observable C. Json data D. callback function

B Observable

Below module is required for building reactive forms A. FormsModule B. ReactiveFormsModule C. DynamicFormsModule D. None of the above

B ReactiveFormsModule

Which router function should be called in to feed route configuration for lazy routing approach A. RouterModule.forRoot B. RouterModule.forChild

B RouterModule.forChild

Using below directive you can modify inner HTML of DOM element A. Attribute directive B. Structural directive

B Structural Directive

A component can have child route defined using below property A. routes B. children C. routeCollection D. None of the above

B children

Observer sends data to multiple clients via below method A. send() B. next() C. emit() D. publish()

B next()

7. In Angular, you can pass data from child component to parent component using a. @Output() b. @Input() c. Input d. Output

a @Output()

Below service can be injected in your component to do dynamic route navigation a. Router b. Routing c. RouterService d. RoutingService

a Router

Angular Service can be injected at Root Module, Feature Module or Component level a. True False

a True

EventEmitter data type implementation uses generics concept of Typescript. a. True b. False

a True

You can update background color of <div> HTML tag using [ngStyle] a. True b. False

a True

ngFor can be applied on any HTML tag e.g.<div> and not just <li> a. True b. False

a True

What are the basic rules of Decorators?

a function which has annotation of @() with optional parameters

Angular web application can only be written using Typescript as code behind language a. True b. False

b

You can create local HTML reference of HTML tag using variable which starts with character a. @ b. # c. * d. &

b #

For standard HTML onclick event, we can have below Angular event a. (onclick) b. (click) c. (clickhandler) d. [click]

b (click)

In Angular, you can hide/remove HTML element using a. #ngIf b. *ngIf c. #hide d. *hide

b *ngIf

If you provide a service in two components' "providers" section of @Component decorator, how many instances of service shall get created? a. 1 b. 2 c. 3 d. 4

b 2

In Angular, you can pass data from parent component to child component using a. @Output() b. @Input() c. Input d. Output

b @Input()

Angular custom/built-in Directives cannot listen to standard HTML event raised on their host a. True b. False

b False

Decorator is a class? a. True b. False

b False

There can be more than one RootModule in Angular a. True b. False

b False

Using Template Driven Form, you can create dynamic form layout a. True b. False

b False

We can have constructor overloading in Typescript a. True b. False

b False

When you apply 'pipe', it changes value of underlying component's member variable as well. a. True b. False

b False

You can have more than one #local variable for an HTML element. E.g. <input #ref1 #ref2> a. True b. False

b False

You can modify DOM of target element using Pipe a. True b. False

b False

Optional parameter is marked using below syntax: a. Fun(name:string="balram") b. Fun(name?:string) c. Fun(...names:string[])

b Fun(name?:string)

We need to call below method of RouterModule for providing all routes in AppModule a. RouterModule.forChild b. RouterModule.forRoot c. RouterModule d. RouterModule.all

b RouterModule.forRoot

We can implement two-way data binding using a. [ngModel] b. [(ngModel)] c. (ngModel) d. ng-Model

b [(ngModel)]

In routing, below tag is used to show selected route component dynamically a. <router></router> b. <router-output></router-output> c. <router-outlet></router-outlet> d. <router-input></router-input>

c <router-outlet></router-outlet>

What is name of a special function of class which gets called when object is created and it's syntax in Typescript?

constructor — constructor(){}

data binding

coordinates communication between component and its template

observable call

x.subscribe(valueFn, errorFn)

promise call

x.then(valueFn, errorFn)

Directive object can be created and used in HTML without target host DOM element A. True B. False

B False

HTTP service is called even if observer doesn't have "subscribe" method A. True B. False

B False

dependency injection

- coding pattern in which a class receives the instances of objects it needs from an external source rather than creating them itself - vastly improves testability (through mocks)

observable laziness

observables are not executed (e.g. http link accessed) until they are subscribed to

root module example

- declarations: components contained in this module - imports: modules and components needed by this module - providers: services in this module for use by others - bootstrap: one of these for main app component

Angular DI

- injects services into objects through constructor

structural directive

- modify DOM - change/add/remove DOM elements - *ngIf, *ngFor

differences from AngularJS

- more strongly typed with TypeScript - AJS had templates drive design, but A2 has components

event binding

- one way, into component - typically slower - modify state

There can be more than one <router-outlet> element in angular application A. True B. False

A True

observables advanced operationos

- Mathematical aggregation - Buffering (getting results in batches) - Debounce - push back if too much too fast - Distinct - only deal with distinct values - Filter to the ones you want - Combine observables - Built in retry

We can chain multiple pipe in a single expression along with "async" pipe A. True B. False

A True

You can pass optional parameters to custom pipes A. True B. False

A True

Below compilation option create smaller in size and faster in performance angular distributed package A. JIT B. AOT

B AOT

*ngStyle

- attribute directive - affect styling / CSS

ES Modules

- code files that import/export things - organize code files - modularize code - promote code reuse

Angular modules

- code files that organize Angular apps in blocks of functionality - modularize app - promote code separation, app boundaries

By default, component's change detection strategy is set to A. OnPush B. Default

B Default

* => void transition animation gets applied when A. Element is entering B. Element is leaving

B Element is leaving

[()]

- "banana in a box" - two way binding - shorthand syntax

Angular vs Angular1(JS)

- Angular is faster than Angular1(JS). - Better use of typing with TypeScript. - Simplified API.

@NgModule providers array

- Any service provider added to the providers array is registered at the root - Don't add services to the providers array of a shared module ○ Consider building a Core Module for services and import once in AppModule - Routing guards must be added to the providers array of an Angular module

metadata parts

- Component decorator - Selector: Component name in HTML - Template: view's HTML (inline or separate files) - CSS: styles view (inline or separate files)

@NgModule boostrap array

- Every app must bootstrap at least one component, the root app component - The bootstrap array should only be used in the root app module (AppModule)

@NgModule declarations array

- Every c/d/p must belong to one and only one Angular module - Only declare c/d/p - Never re-declare c/d/p that belong to another module - All declared c/d/p are private by default ○ They are only accessible to other c/d/p in same module - The Angular module provides the template resolution env for component templates

@NgModule imports array

- Importing a module makes available any exported c/d/p from that module - Only import what a module needs - Importing a module does NOT provide access to its imported modules ○ Another way, imports are NOT inherited

component nesting

- parent / child components - parent template contains selector of child - can communicate with named objects - uses @Input and @Output on named objects to set variables - or uses methods calls on named object which themselves can set object variables

EventEmitter

- propagate events on child (e.g. mouse clicks) from child to parent - @Output() on event in child template - (eventname) on an element in the parent template

observables

- provide 0 or more immediate or future values (sync or async) - lazy - cancellable - supports map, filter, reduce and other operations - many other features

promises

- provide a single future value (async) - not lazy - not cancellable - help avoid xmas-tree / callback hell

filtering/sorting recommendation

- serious perf issues with Ang1 - mouse movement could cause this logic to fire - "The Angular team and many experienced Angular developers strongly recommend moving filtering and sorting logic into the component itself. " - now explicitly done by developer

*ngIf

- structural directive - modify DOM - evaluate logic, if truthy, DOM changed

*ngFor

- structure directive - modify DOM - iterates and adds DOM elements

pipe

- transforms data - e.g | currency - can be chained - can take params ( | currency: 'USD') - | json, | number, | date, | lowercase - can be custom (e.g. for sorting, filtering)

Write a syntax to bind custom CSS class (e.g. highlighted) to a <div> tag.

<div [class]="myclass">

property binding

<img [src]='product.imageUrl'> - change DOM object property - square brackets around property - one way binding

interpolation

<img src={{product.imageUrl}}> - doesn't change DOM - double curleys - one way binding - doesn't modify state

8. Write a syntax for ngFor with <li> example.

<li *ngFor="let item of allItems"> {{ item }} </li>

You can access HTML local reference alias in component's typescript code using ___________ decorator.

@ViewChild()

Below pseudo class represent void => * animation state A. :enter B. :leave

A :enter

Which routing guard is used to check whether routing can take place or not A. CanActivate B. Resolve C. CanLoad D. CanDeactive

A CanActivate

void => * transition animation gets applied when A. Element is entering B. Element is leaving

A Element is entering

Below tool is used for Static Code analysis of Angular application A. Linting B. Scanning C. Profiling D. Refactoring

A Linting

Angular can be used with different module bundle packages apart from WebPack like Systemjs, Commonjs etc A. True B. False

A True

Angular template can be defined inline as well as a separate html file A. True B. False

A True

Async Pipe subscribes to observer and update expression whenever there is data sent from observer A. True B. False

A True

OnPush is faster in performance than Default change detection strategy A. True B. False

A True

Below component represent "target/host" DOM element inside Directive's constructor A. Element B. ElementRef C. Host D. Target

B ElementRef

In Angular application there can be at most one <router-outlet> can be used for routing A. True B. False

B

Using below wild card we can define page not found route A. * B. ** C. 404 D. ''

B **

Directive can listen to host/target events using below decoarator A. @Listener() B. @HostListener() C. @TargetListener() D. @OnListener()

B @HostListener()

Which decorator is used for declaring class as a Service A. @Service B. @Injectable C. @Provider D. @DI

B @Injectable

Below service can be used to extract route parameters inside component A. Router B. Route C. ActivatedRoute

C ActivatedRoute

Pick incorrect type of pipe in angular A. Pure Pipe B. Impure Pipe C. Reactive Pipe

C Reactive Pipe

Below life cycle hook is executed when component is destroyed A. destructor B. delete C. destroy D. ngDelete

C destroy

To build application in production mode, use below command A. ng build B. ng serve C. ng build — prod D. ng lint

C ng build-prod

Below command is used to run Static Code analysis of Angular application A. ng build B. ng profile C. ng lint D. ng serve

C ng lint

In template driven form _________ object is created internally whenever we have below code <form #heroForm="ngForm"> whereas in reactive form, we have to create this object explicitly.

FormGroup

We must import ____________ module to use [(ngModel)].

FormsModule

Decorator

In Angular, is a function that adds metadata to class with following features: 1. Is prefixed with @. 2. Several are built-in to Angular: @Component, @Injectable, etc...

Component

Is a type of directive in Angular with following features: - It is formed by template, class (props and methods) and metadata. - It's part of Angular's core. - Contains metadata, template (1:1) and decorator (@Component)

TypeScript

Is typically used to build apps with following features: - Is created by MSFT. - Adds syntactic sugar for imports, exports and classes. - Transpiles to ES5. - Well instrumented in IDEs with Intellisense.

Angular

Is a JavaScript framework for building client-side apps. Using HTML, CSS and JS. It uses 2 way data binding.

Directive

Is a custom HTML element or attribute used to extend HTML. There are 3 types: component, structural and attribute.

App

Is a group of components on top of injectible services typically named single page apps.

Import ____________ module to use reactive form.

ReactiveFormsModule

If you do not know the number of arguments to be passed to function in advance, you should use _______ parameter type.

Rest parameter

You can define 404 route using below wild card route path a. ** b. / c. ## d. default

a **

What will be the output of below program? function fun(input: boolean) { let a = 100; if (input) { let b = a + 1; return b; } return b; } a. Undefined b. 101 c. Compilation error for a d. Compilation error for b

d. Compilation error for b

Choose correct form control class name which is set to true when value is modified a. .ng-valid b. .ng-invalid c. .ng-pending d. .ng-pristine e. .ng-dirty f. .ng-untouched g. .ng-touched

e ng-dirty

Fill in blank keyword used to implement inheritance in typescript ? <derived class>____________<baseclass>

extends

Choose correct form control class name which is set to true when blur event gets fired on control a. .ng-valid b. .ng-invalid c. .ng-pending d. .ng-pristine e. .ng-dirty f. .ng-untouched g. .ng-touched

g ng-touched

Write an example to define custom event with Boolean argument with code and passing data to parent component.

objEvent = new EventEmitter<boolean>();

unsubscribe from an observable

let sub = x.subscribe(valueFn, errorFn, completeFn) sub.unsubscribe()

OnChanges

lifecycle hook to perform action after change to input properties

OnDestroy

lifecycle hook to perform cleanup

OnInit

lifecycle hook to perform component initialization, retrieve data

_____ keyword is used to access class's member variables and functions inside class member function

this