Angular2 - CP'ed

[()]

- "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

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

*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

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)

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

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 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

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

B @Injectable

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

B False

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

B False

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

B NgModule

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

B ReactiveFormsModule

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...

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.

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.

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 **

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

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

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

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

objEvent = new EventEmitter<boolean>();

observable laziness

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

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

this

observable call

x.subscribe(valueFn, errorFn)

promise call

x.then(valueFn, errorFn)