angular6

Transcript

1. Angular Marchenkov Danila, Software Developer
2. * Structural Directives
3. *ngIf *ngFor *ngSwitch
4. *ngFor
5. *ngFor microsyntax • let - template input variable. let hero => let-hero • of - iteration directive. of => ngForOf • trackby - which field to use to track if item is unique. trackby => ngForTrackBy • let i = index. Indicates index of item in array
6. <div *ngFor=" let item of collection; let i = index; let evenItem = even; let oddItem = odd; let firstItem = first; let lastItem = last; trackBy: someFunction;"> </div>
7. *ngIf
8. <p *ngIf="true"> Expression is true and ngIf is true. This paragraph is in the DOM. </p> <p *ngIf="false"> Expression is false and ngIf is false. This paragraph is not in the DOM. </p>
9. <div *ngIf="hero" > {{hero.name}} </div> <div template="ngIf hero”> {{hero.name}} </div> <ng-template [ngIf]="hero"> <div>{{hero.name}}</div> </ng-template>
10. Q: How to get reference to DOM, that’s not rendered yet A:
11. import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core'; @Directive({selector: '[ngIf]'}) export class NgIf { private _hasView = false; constructor(private _viewContainer: ViewContainerRef, private _template: TemplateRef<Object>) {} @Input() set ngIf(condition: any) { if (condition && !this._hasView) { this._hasView = true; this._viewContainer.createEmbeddedView(this._template); } else if (!condition && this._hasView) { this._hasView = false; this._viewContainer.clear(); } } }
12. Reverse NgIf import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; /** * Add the template content to the DOM unless the condition is true. */ @Directive({ selector: '[myUnless]'}) export class UnlessDirective { private hasView = false; constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { } @Input() set myUnless(condition: boolean) { if ( !condition && !this.hasView) { this.viewContainer.createEmbeddedView(this.templateRef); this.hasView = true; } else if (condition && this.hasView) { this.viewContainer.clear(); this.hasView = false; } } }
13. Overwriting *ngFor https://gist.github.com/Sprit3Dan/83827b55a21d810f488864e7e4fcb760
14. Decorators
15. Class Method Property Parameter Accessor
16. Class - decorators • @NgModule, @NgComponent … • executed just before class init
17. import { environment } from “../environments/environment"; export function NgLog() : ClassDecorator { return function ( constructor : any ) { if( !environment.production ) { const LIFECYCLE_HOOKS = [ 'ngOnInit', 'ngOnChanges', 'ngOnDestroy' ]; const component = constructor.name; LIFECYCLE_HOOKS.forEach(hook => { const original = constructor.prototype[hook]; constructor.prototype[hook] = function ( ...args ) { console.log(`%c ${component} - ${hook}`, `color: #4CAF50; font-weight: bold`, ...args); original && original.apply(this, args); } }); } } }
18. Method decorators • @HostListener • executed just before method call
19. function f() { console.log("f(): evaluated"); return function (target, propertyKey: string, descriptor: PropertyDescriptor) { console.log("f(): called"); } } function g() { console.log("g(): evaluated"); return function (target, propertyKey: string, descriptor: PropertyDescriptor) { console.log("g(): called"); } } class C { @f() @g() method() {} } Which would print this output to the console: f(): evaluated g(): evaluated g(): called f(): called
20. import t from 'lodash.throttle'; export function throttle( milliseconds : number = 500 ) : MethodDecorator { return function ( target : any, propertyKey : string, descriptor : PropertyDescriptor ) { const original = descriptor.value; descriptor.value = t(original, milliseconds); return descriptor; }; }
21. import { Injector, ReflectiveInjector } from '@angular/core'; import { Observable, BehaviorSubject, Subscriber } from 'rxjs/Rx'; import { SharedDataService } from './../services/shared-data.service'; const ShouldShowWaitBanner = (target, key, descriptor) => { const eventName = `${target.constructor.name}.${key}`; const originalMethod = descriptor.value; const stream = new BehaviorSubject<{ show: boolean }>({ show: true }); if (!target.shouldShowWaitBannerStreamArray) { target.shouldShowWaitBannerStreamArray = [{ name: eventName, stream }]; } else if (target.shouldShowWaitBannerStreamArray.findIndex(it => it.name === eventName) === -1) { target.shouldShowWaitBannerStreamArray.push({ name: eventName, stream }); } descriptor.value = function() { const args = []; stream.next({ show: true }); for (let i = 0; i < arguments.length; i++) { args[i - 0] = arguments[i]; } let output: Observable<any> = originalMethod.apply(this, args); output.subscribe(() => stream.next({ show: false })); return output; }; return descriptor; }; export { ShouldShowWaitBanner };
22. Property decorators • @Host, @Input, @Output… • executed on get/set operations
23. read-only props logging hook on get/set operations
24. export function log$( target : any, propertyKey : string ) { let propertyValue; function getter() { return propertyValue; } function setter( value : any ) { if( value instanceof Observable ) { propertyValue = value.do(res => { const isArrayOfObjects = Array.isArray(res) && typeof res[0] === 'object'; const logType = isArrayOfObjects ? 'table' : 'log'; console.groupCollapsed(propertyKey); console[logType](res) console.groupEnd(); }); } else { propertyValue = value; } } Object.defineProperty(target, propertyKey, { get: getter, set: setter, enumerable: true, configurable: true }); }
25. Parameter Decorators
26. function required(target: Object, propertyKey: string | symbol, parameterIndex: number) { let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || []; existingRequiredParameters.push(parameterIndex); Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey); }