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)