Useful Concepts
<ng-content/>
Next Gen Engine
Next-generation code compilation and rendering engine developed by Angular Team.
ng new my-app --enable-ivy
{
"compilerOptions": { ... },
"angularCompilerOptions": {
"enableIvy": true
}
}
Next Gen Engine
Next Gen Engine
INTRODUCTION
{Reactive programming}
FUNDAMENTALS
WHY
No More
fake
Let's
RxJS
😏
😎
Lazy Execution
Cancellable
😴
🛑
WHY
The keyword here is asynchronous.
Most libraries/frameworks already allow you to write reusable and configurable code, but can it be easily invoked from asynchronous actions?
WHY
ReactiveX combines the Observer pattern with the Iterator pattern to fill the need for an ideal way of managing sequences of events.
WHY
It allows you to specify the dynamic behavior of a value completely at the time of declaration.
WHY
WHY
REAL WORLD
in
REAL WORLD
in
Data-Table
public getAll<T>(
url: string,
options: any = {},
sortKey: string = '',
authenticated: boolean = false
): Observable<T> {
url = this.buildQueryUrl(url, options); // builds url with supplied parameters
return this.http.get<T>(url, this.buildHttpHeaders(authenticated))
.pipe(switchMap(res => of(res)));
}
private buildQueryUrl(url: string, options: any, id: string = ''): string {
if (id) url = url.concat('/', id);
let queryParams = '';
if (options && Object.keys(options).length > 0) {
for (let key in options) {
queryParams = queryParams.concat(
encodeURIComponent(key),
'=',
encodeURIComponent(options[key]),
'&'
);
}
url = url.concat('?', queryParams.substring(0, queryParams.length - 1));
}
return url;
}
REAL WORLD
in
Data-Table
REAL WORLD
in
Live-Search
export class HeroSearchComponent implements OnInit {
heroes$: Observable<Hero[]>;
private searchTerms = new Subject<string>();
constructor(private heroService: HeroService) { }
// Push a search term into the observable stream.
search(term: string): void {
this.searchTerms.next(term);
}
ngOnInit(): void {
this.heroes$ = this.searchTerms.pipe(
// wait 300ms after each keystroke before considering the term
debounceTime(300),
// ignore new term if same as previous term
distinctUntilChanged(),
// switch to new search observable each time the term changes
switchMap((term: string) => this.heroService.searchHeroes(term))
);
}
}
REAL WORLD
in
Live-Search
OPERATORS
few
OPERATORS
few
For more details: https://rxjs-dev.firebaseapp.com/guide/operators
OPERATORS
few
{ switchMap | mergeMap | concatMap }
BEST PRACTICES
BEST PRACTICES