Best Practices on Writing Angular UI Components - Lessons Learned from PrimeNG

1. HOW TO MESS UP
YOUR ANGULAR UI COMPONENTS
ÇAĞATAY ÇİVİCİ

2. ÇAGATAY ÇIVICI
▸ PrimeFaces, PrimeNG, PrimeReact, PrimeUI
▸ Java Champion
▸ Founder of PrimeTek
▸ Front-end developer
▸ Current Interests: Fitness and Spanish

3. JAVASERVER FACES

4. JQUERY

5. MODERN WEB DEV

6. ANGULAR JS TO ANGULAR 2

7. ANGULAR X

8. REACT

9. UI SUITES
OPEN SOURCE
(MIT)

10. PRIMENG - 80+ OPEN SOURCE UI COMPONENTS

11. TEMPLATES

12. ONE-WAY VS TWO-WAY BINDING
<my-component [size]="value">
export class MyComponent {
size: number;
}

13. ONE-WAY VS TWO-WAY BINDING
<my-component [(size)]="value">
<my-component [size]="value" (sizeChange)="value = $event">
export class MyComponent {
size: number;
sizeChange: EventEmitter<number> = new EventEmitter<number>();
zoomIn(event: Event) {
this.sizeChange.emit(this.size + 2);
}
}

14. NG-MODEL
<input type="text" [(ngModel)]="name">
export class MyComponent {
name: string;
}

15. HOW TO SUPPORT NG-MODEL
<my-calendar [(ngModel)]="date">
@Component({
selector: 'my-calendar',
template: '…'
})
export class MyCalendar {
value: Date;
}
CAN'T BIND TO NGMODEL SINCE IT ISN'T A KNOWN PROPERTY

16. CONTROLVALUEACCESSOR
interface ControlValueAccessor {
writeValue(obj: any) : void
registerOnChange(fn: any) : void
registerOnTouched(fn: any) : void
setDisabledState(isDisabled: boolean) : void
}

17. VALUE ACCESSOR
import {NG_VALUE_ACCESSOR,
ControlValueAccessor} from '@angular/forms';
STEP 1

18. VALUE ACCESSOR
export const MY_CALENDAR_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyCalendar),
multi: true
};
STEP 2

19. VALUE ACCESSOR
STEP 3
@Component({
selector: 'my-component',
template: '…',
providers: [MY_CALENDAR_VALUE_ACCESSOR]
})
export class MyCalendar implements ControlValueAccessor {
}

20. VALUE ACCESSOR STEP 4
export class MyCalendar implements ControlValueAccessor {
value: Date;
onModelChange: Function = () => {};
onModelTouched: Function = () => {};
@Input() disabled: boolean;
writeValue(value: any) : void { this.value = value; }
registerOnChange(fn: Function): void { this.onModelChange = fn; }
registerOnTouched(fn: Function): void { this.onModelTouched = fn; }
setDisabledState(val: boolean): void { this.disabled = val; }
}

21. BIND VALUE
writeValue(value: any) : void {
this.value = value;
}
onClick(event: Event) : void {
this.onModelChange(this.value);
}
READ
WRITE

22. STATE CLASSES
onBlur(value: any) : void {
this.onModelTouched();
}
new FormControl({value:'', disabled:true})
ng-touched
ng-untouched
disabled

23. CASE STUDY: CALENDAR

24. CONTENT PROJECTION
<my-dialog>
<header>Quote of the Day</header>
I’m so mean, I make medicine sick!
</my-dialog>
ITEM DETAILS
I’m so mean, I make medicine sick!
X

25. CONTENT RELOCATION
@Component({
selector: 'my-dialog',
template: `
<div class="my-dlg">
<div class="my-dlg-header>
<ng-content select="header"><ng-content>
</div>
<div class="my-dlg-content">
<ng-content><ng-content>
<div>
</div>
`
})
export class MyDialog {
}

26. CONTENT QUERY
<my-dialog>
<my-header>Item Details</my-header>
Item Content
</my-dialog>

27. CONTENT QUERY
@Component({
selector: 'my-dialog',
template: `
<div class="my-dlg">
<div class="my-dlg-header>
<ng-content select="my-header"><ng-content>
</div>
<div class="my-dlg-content">
<ng-content><ng-content>
<div>
</div>
`
})
export class MyDialog {
} MY-HEADER IS NOT A KNOWN ELEMENT

28. CONTENT QUERY
@Component({
selector: 'my-header',
template: '<ng-content></ng-content>'
})
export class MyHeader {}

29. CONTENT QUERY
@Component({
selector: 'my-dialog',
template: `
<div class="my-dlg">
<div class="my-dlg-header *ngIf="header">
<ng-content select="my-header"><ng-content>
</div>
<div class="my-dlg-content">
<ng-content><ng-content>
<div>
</div>
`
})
export class MyDialog {
@ContentChild(MyHeader) header;
}

30. CASE STUDY: DIALOG

31. CHANGES TO CHILDREN
<my-table>
<my-col field="name"></my-col>
<my-col field="age"></my-col>
<my-col *ngIf="test" field="gender"></my-col>
</my-table>

32. CONTENT QUERY
@Component({
selector: 'my-table',
template: ` <div class="my-table">
…
</div>`
})
export class MyTable implements AfterContentInit {
@ContentChildren(Col) cols: QueryList<Col>;
columns: Column[];
ngAfterContentInit() {
this.columns = this.cols.toArray();
this.cols.changes.subscribe(_ =>
this.columns = this.cols.toArray(); );
}
}

33. CASE STUDY: TABVIEW

34. TEMPLATING
<div *ngFor="let obj of value">
{{obj}}
</div>
<template ngFor let-obj [ngForOf]="value">
<div>{obj}</div>
</template>

35. TEMPLATING
<my-list [value]="cars">
<ng-template let-car>
{{car.brand}}
</ng-template>
</my-list>

36. TEMPLATING
@Component({
selector: 'my-list',
template: `
<ul class="my-list">
<template *ngFor="let obj of value" [ngForTemplate]="tmpl">
<template>
</ul>`
})
export class MyTable implements AfterContentInit {
@ContentChild(TemplateRef) tmpl: TemplateRef;
@Input value: any[];
}
<ul class="my-list">BMW Ford Mercedes…</ul>

37. TEMPLATING
<my-list [value]="cars">
<ng-template let-car>
<li>{{car.brand}}</li>
</ng-template>
</my-list>

38. TEMPLATE WRAPPER
@Directive({
selector: '[myTemplateWrapper]'
})
export class MyTemplateWrapper implements OnInit, OnDestroy {
@Input() item: any;
@Input('myTemplateWrapper') templateRef: TemplateRef<any>;
view: EmbeddedViewRef<any>;
constructor(public viewContainer: ViewContainerRef) {}
ngOnInit() {
this.view = this.viewContainer.createEmbeddedView(this.templateRef, {
'$implicit': this.item,
'index': this.index
});
}
ngOnDestroy() { this.view.destroy(); }
}

39. TEMPLATING
@Component({
selector: 'my-list',
template: `
<ul class="my-list">
<li *ngFor="let obj of value" (onClick)="…">
<ng-template [myTemplateWrapper]="tmpl"
[item]="obj"><ng-template>
<li>
</ul>`
})
export class MyList implements AfterContentInit {
@ContentChild(TemplateRef) tmpl: TemplateRef;
@Input value: any[];
}

40. *NGTEMPLATEOUTLET TO THE RESCUE
@Component({
selector: 'my-list',
template: `
<ul class="my-list">
<li *ngFor="let obj of value; let i = index" (onClick)="…">
<ng-container *ngTemplateOutlet="tmpl; context: {
$implicit: obj, index: }"><ng-container>
<li>
</ul>`
})
export class MyList implements AfterContentInit {
@ContentChild(TemplateRef) tmpl: TemplateRef;
@Input value: any[];
}

41. TEMPLATING
<my-list [value]="cars">
<ng-template let-car let-i=“index”>
{{i}} - {{car.brand}}
</ng-template>
</my-list>

42. CASE STUDY: DATAVIEW AND LISTBOX

43. NGCONTAINER
<div *ngIf=“item.visible” *ngFor=“let item of items”>
<p>{{item}}</p><input type=“text”>
</div>
<div *ngFor=“let item of items”>
<div *ngIf=“item.visible”>
<p>{{item}}</p><input type=“text”>
</div>
</div>

44. <div *ngFor=“let item of items”>
<ng-container *ngIf=“item.visible”>
<p>{{item}}</p>
</ng-container>
</div>
NGCONTAINER

45. CHANGE DETECTION
CD
CD CD
CD CD CD CD

46. CHANGE DETECTION
SETTER ONCHANGES DOCHECK

47. ONCHANGES
<my-comp [name]="value">
@Component({selector: 'my-comp', template: `...`})
class MyComponent implements OnChanges {
@Input() name: string;
ngOnChanges(changes: SimpleChanges) {
// changes.prop contains the old and the new value...
}
}

48. PROBLEM WITH NGONCHANGES
NOT INTUITIVE
ngOnChanges(changes: SimpleChanges) {
if(changes[‘totalRecords’]) //do this
else if(changes[‘rows’]) // do that
else if(changes[‘disabled’]) //come on!!!
}

49. NGDOCHECK
<my-list [value]="total">
@Component({selector: 'my-list',template: '…'})
export class MyList implements DoCheck {
@Input() value: any[];
differ: any;
constructor(differs: IterableDiffers) {
this.differ = differs.find([]).create(null);
}
ngDoCheck() {
let changes = this.differ.diff(this.value); //performance???
if(changes) {
//…
}
}
}

50. CASE STUDY: GOOGLE MAPS

51. SETTER
<my-paginator [totalRecords]="total">
@Component({
selector: 'my-paginator',
template: '…'
})
export class MyPaginator {
@Input() totalRecords: number;
}

52. SETTER
@Component({
selector: 'my-paginator',
template: '…<a href="#" *ngFor="let p of pageLinks" …>{{p}}}</a>…'
})
export class MyPaginator {
public pageLinks: number[];
public _totalRecords: number = 0;
@Input() get totalRecords(): number {
return this._totalRecords;
}
set totalRecords(val:number) {
this._totalRecords = val;
this.updatePageLinks();
}
updatePageLinks() { //calculate page links }
}

53. CASE STUDY: PAGINATOR

54. PROBLEM WITH SETTER
NOT CALLED WHEN AN ARRAY CHANGES
<my-comp [value]="arr">
this.arr.push('beer'); this.arr = […this.arr, 'beer'];

55. CHANGE DETECTION PERFORMANCE
CD
CD CD
CD CD CD CD

56. PUSH STRATEGY
@Component({
selector: 'my-component',
template: ‘<my-user [user]=“user”><my-user>’
})
export class MyComponent {
ngOnInit() {
this.user = //fetch user
}
changeUser() {
this.user.name = ‘Emir’;
}
}

57. PUSH STRATEGY
@Component({
selector: 'my-user',
template: ‘{{user.name}}’
})
export class MyUser {
@Input() user: User;
}
@Component({
selector: ‘my-user',
changeDetection: ChangeDetectionStrategy.OnPush
template: ‘{{user.name}}’
})
export class MyUser {
@Input() user: User;
}

58. PUSH STRATEGY
@Component({
selector: 'my-component',
template: ‘<my-user [user]=“user”><my-user>’
})
export class MyComponent {
ngOnInit() {
this.user = //fetch user
}
changeUser() {
this.user = new User();
this.user.name = ‘Emir’;
}
}

59. CHANGE DETECTOR CONTROL
import {Component,ChangeDetectorRef} from ‘@angular/core’;
@Component({
selector: 'my-component',
template: ‘<my-user [user]=“user”><my-user>’
})
export class MyComponent {
constructor(private cd: ChangeDetectorRef) {}
someMethod(event: Event) {
this.cd.detectChanges();
}
}

60. CASE STUDY: DROPDOWN

61. CHANGE DETECTION REVISITED
EVENTS
(CLICK)
XHR TIMERS

62. MONKEY PATCHING
A monkey patch is a way for a program to extend or
modify supporting system software locally
(affecting only the running instance of the program).
ZONE API

63. GAME OF ZONES - PERFORMANCE
<div draggable (dragover)=“handleDrag($event)”>

64. GAME OF ZONES - PERFORMANCE
dragOverListener: Function;
bindEvents() {
this.zone.runOutsideAngular(() => {
this.dragOverListener = this.onDragOver.bind(this);
this.el.nativeElement.addEventListener('dragover', this.dragOverListener);
});
}
ngOnDestroy() {
if (this.dragOverListener) {
document.removeEventListener('dragover', this.dragOverListener);
this.dragOverListener = null;
}
}

65. CASE STUDY: TURBOTABLE

66. GAME OF ZONES
@Component({selector: 'my-gmap',template: '…'})
export class MyGMap implements AfterViewChecked {
constructor(public cd: ChangeDetectorRef, public zone:NgZone) {}
ngAfterViewInit() {
this.map = new google.maps.Map(
this.el.nativeElement.children[0], this.options);
this.map.addListener('click', (event) => {
this.zone.run(() => {
this.onMapClick.emit(event);
});
});
}
}

67. CASE STUDY: GOOGLE MAPS

68. COMPONENT COMMUNICATION VIA SERVICE
<my-tree [value]="nodes1">
<my-tree [value]="nodes2">
<my-tree [value]="nodes3">

69. COMPONENT COMMUNICATION VIA SERVICE
@Injectable()
export class TreeDragDropService {
private dragStartSource = new Subject<TreeNodeDragEvent>();
private dragStopSource = new Subject<TreeNodeDragEvent>();
dragStart$ = this.dragStartSource.asObservable();
dragStop$ = this.dragStopSource.asObservable();
startDrag(event: TreeNodeDragEvent) {
this.dragStartSource.next(event);
}
stopDrag(event: TreeNodeDragEvent) {
this.dragStopSource.next(event);
}
}

70. COMPONENT COMMUNICATION VIA SERVICE
@Component
export class Tree implements OnInit {
constructor(@Optional() public dragDropService: TreeDragDropService) {}
ngOnInit() {
if(this.droppableNodes) {
this.dragStartSubscription = this.dragDropService.dragStart$.subscribe(
event => {
//get dragged node
});
this.dragStopSubscription = this.dragDropService.dragStop$.subscribe(
event => {
//get dropped node
});
}

71. CASE STUDY: CONFIRM DIALOG

72. CASE STUDY: TREE DRAG DROP

73. CASE STUDY: GROWL

74. CASE STUDY: TABLE

75. SERVICE HIERARCHY
TREE 1 TREE 2
MAIN
TREESERVICE TREESERVICE

76. SERVICE HIERARCHY
TREE 1 TREE 2
MAIN
TREESERVICE

77. ACCESS DOM
@Component({
selector: 'my-dialog',
template: '<div #containerEL><ng-content><ng/content></div>'
})
export class MyDialog implements AfterViewInit {
@ViewChild('containerEL') containerViewChild: ElementRef;
container: HTMLDivElement;
ngAfterViewInit() {
this.container = <HTMLDivElement> this.containerViewChild.nativeElement;
this.container.style.left = //
this.container.style.top = //
}
}

78. CASE STUDY: DROPDOWN

79. ACCESS DOM AFTER CHANGES TO DOM
@Component({
selector: 'my-dialog',
template: '<div #containerEL><ng-content><ng/content></div>'
})
export class MyDialog implements AfterViewChecked {
@ViewChild('containerEL') containerViewChild: ElementRef;
ngAfterViewChecked() {
this.containerViewChild.elementRef.style.left = //
this.containerViewChild.elementRef.style.top = //
}
}

80. CASE STUDY: AUTOCOMPLETE

81. GLOBAL EVENTS
@Component({selector: 'my-gmap',template: '…'})
export class MyGMap implements AfterViewChecked {
constructor(public cd: ChangeDetectorRef, public zone:NgZone) {}
ngAfterViewInit() {
this.map = new google.maps.Map(
this.el.nativeElement.children[0], this.options);
this.map.addListener('click', (event) => {
this.zone.run(() => {
this.onMapClick.emit(event);
});
});
}
}
@Component({selector: 'my-dialog',
template: '<div #containerEL><ng-content><ng/content></div>'
})
export class MyDialog implements AfterViewInit, OnDestroy {
constructor(public renderer: Renderer2);
public documentClickListener: any;
ngAfterViewInit() {
this.documentClickListener = this.renderer2.listenGlobal('body', 'click', () => {
//document clicked
}
}
ngOnDestroy() {
if(this.documentClickListener) this.documentClickListener();
}
}

82. CASE STUDY: DROPDOWN

83. PUSH CHANGE DETECTION STRATEGY
@Component({selector: 'my-dialog',
template: '<div #containerEL><ng-content><ng/content></div>'
})
export class MyDialog implements AfterViewInit, OnDestroy {
constructor(public renderer: Renderer2,private cd: ChangeDetectorRef);
public documentClickListener: any;
ngAfterViewInit() {
this.documentClickListener = this.renderer2.listenGlobal('body', 'click', () => {
//document clicked
this.cd.detectChanges();
}
}
ngOnDestroy() {
if(this.documentClickListener) this.documentClickListener();
}

84. CASE STUDY: DROPDOWN

85. TIPS
EXPRESSION WAS CHANGED AFTER IT WAS CHECKED
@Component({selector: 'my-dialog',
template: '{{test}}'
})
export class MyDialog implements AfterViewInit {
test: string;
ngAfterViewInit() {
this.test = 'PrimeNG';
}
}

86. 3DR PARTY INTEGRATION

87. CASE STUDY: SCHEDULE

88. THANK YOU
@prime_ng