Angular Notes

RxJS

How to Convert one return type to another

In the example below this.mowocConfig.getBaseUrl() returns Observable<string>, but our method needs to return Observable<BlobData[]>. We use flatMap call to convert one observable return type to another:

getBlobData(): Observable<BlobData[]> {
  return this.mowocConfig.getBaseUrl()
    .flatMap((baseUrl: string): Observable<BlobData[]> => {
      const url = baseUrl + '/api/blobs';
      console.log('url', url);
      return this.http.get<BlobData[]>(url);
    });
}

How to Convert Response Array to another

In this method http.get<BlobData[]>() returns Observable<BlobData[]>. Our goal is to transform BlobData object content. This example shows to make this transformation with Array response and not a single object. It works with web sockets due to Observable<BlobData[]>.

getBlobData(): Observable<BlobData[]> {
  return this.mowocConfig.getBaseUrl().
    flatMap((baseUrl: string): Observable<BlobData[]> => {
      const url = baseUrl + '/api/blobsWithDescription';
      console.log('url', url);
      return this.http.get<BlobData[]>(url).
        map(rows => {
          //console.log("received raw blobs", rows);
          let blobs: BlobData[] = [];
          for (let i = 0, len = rows.length; i < len; i++) {
            const d: BlobData = rows[i];
            blobs.push(new BlobData(d.blobId, d.data, d.dataType, d.received, d.sourceIP, d.description));
          }
          //console.log("converted blobs", blobs)
          return blobs;
        });
    });
}

Assets

Assets Documentation.

Cannot copy resource from outside of project

Outside of project configuration in .angular-cli.json file:

"apps": [
  {
    "root": "src",
    "outDir": "wwwroot",
    "assets": [
      "assets",
      "favicon.ico"
      {
        "glob": "**/*",
        "input": "../../MowocData/source",
        "output": "MowocData",
        "allowOutsideOutDir": true
      }
    ],

There is no good solution. Issue discussion.

References

  1. Using External Libraries with Angular 2 might be worth using.
  2. Caching With RxJS Observables In Angular is a good example how to do singleton in RxJS.
  3. Angular 2: HTTP, Observables, and concurrent data loading.

Search for Observable Array after a Change

  1. NgRx: Patterns and Techniques
  2. Learn Redux in Angular with NgRx Store (version 4) is good, but I am not interested.
  3. RxJS Array of Observable to Array.
  4. How to map a response from http.get to a new instance of a typed object in Angular 2.
  5. THREE THINGS YOU DIDN\’T KNOW ABOUT THE ASYNCPIPE good for overall understanding of data scenarios and observables.

Paging

  1. Great pager example Angular 25 - Pagination Example with Logic like Google.
  2. Corresponding GitHub Project.