THE

WORLD

Useful Concepts

<ng-content> directive
Using :host and ::ng-deep for View Encapsulation

<ng-content/>

Next Gen Engine

Next-generation code compilation and rendering engine developed by Angular Team.

IVY

ng new my-app --enable-ivy

{
  "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Next Gen Engine

IVY

Improve Tree shakeable

Low memory Foot-prints

Next Gen Engine

IVY

INTRODUCTION

{Reactive programming}

Observables
Subjects
Subscription
Scheduler
Operators

FUNDAMENTALS

WHY

No More

fake

PROMISES

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

RxJS has a whole range of operators that helps you control how the events flow through your observables.
You can transform the values passed through your observables.

It allows you to specify the dynamic behavior of a value completely at the time of declaration.

WHY

What makes RxJS powerful is its ability to produce values using pure functions. That means your code is less prone to errors.
RxJS follows the functional programming paradigm.

WHY

REAL WORLD

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

Data-Table

REAL WORLD

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

Live-Search

OPERATORS

few

OPERATORS

few