Category: Angular Answers

Sometimes, we want to share the result of an Angular Http network call in Rxjs 5.

In this article, we’ll look at how to share the result of an Angular Http network call in Rxjs 5.

How to share the result of an Angular Http network call in Rxjs 5?

To share the result of an Angular Http network call in Rxjs 5, we can create our own service.

For instance, we write

@Injectable()
export class HttpCache {
  constructor(private http: Http) {}

  get(url: string): Observable<any> {
    let cached: any;
    if (cached === sessionStorage.getItem(url)) {
      return Observable.of(JSON.parse(cached));
    } else {
      return this.http.get(url).map((resp) => {
        sessionStorage.setItem(url, resp.text());
        return resp.json();
      });
    }
  }
}

to create the HttpCache service class that has the get method.

In get, we check if we stored the response in session storage.

If it is, then we return an observable that has the cached result.

Otherwise, we call this.http.get to make a GET request to the url.

And we call sessionStorage.setItem to store the response once we have it.

Conclusion

To share the result of an Angular Http network call in Rxjs 5, we can create our own service.

Sometimes, we want to create dynamic template to compile dynamic component with Angular.

In this article, we’ll look at how to create dynamic template to compile dynamic component with Angular.

How to create dynamic template to compile dynamic component with Angular?

To create dynamic template to compile dynamic component with Angular, we can use angular-elements.

To install it, we run

npm i @angular/elements

Then we create a service with

import { Injectable, Injector } from "@angular/core";
import { createCustomElement } from "@angular/elements";
import { IStringAnyMap } from "src/app/core/models";
import { AppUserIconComponent } from "src/app/shared";

const COMPONENTS = {
  "user-icon": AppUserIconComponent,
};

@Injectable({
  providedIn: "root",
})
export class DynamicComponentsService {
  constructor(private injector: Injector) {}

  public register(): void {
    Object.entries(COMPONENTS).forEach(([key, component]: [string, any]) => {
      const CustomElement = createCustomElement(component, {
        injector: this.injector,
      });
      customElements.define(key, CustomElement);
    });
  }

  public create(tagName: string, data: IStringAnyMap = {}): HTMLElement {
    const customEl = document.createElement(tagName);

    Object.entries(data).forEach(([key, value]: [string, any]) => {
      customEl[key] = value;
    });

    return customEl;
  }
}

In it, we have the register method that registers the custom components in components.

And then we add the create method to return the custom elements after creating it.

Next, we register our custom component in the component so we can use it within AppComponent.

@Component({
  selector: "app-root",
  template: "<router-outlet></router-outlet>",
})
export class AppComponent {
  constructor(dynamicComponents: DynamicComponentsService) {
    dynamicComponents.register();
  }
}

We inject the dynamicComponents service and call register to use itin AppComponent.

Then we create the dynamic component with

dynamicComponents.create("user-icon", {
  user: {
    //...
  },
});

And then we can use it in our code with

const html = `<div class="wrapper"><user-icon class="user-icon" user='${JSON.stringify(rec.user)}'></user-icon></div>`;
this.content = this.domSanitizer.bypassSecurityTrustHtml(html);

in our component code and with

<div class="comment-item d-flex" [innerHTML]="content"></div>

in the template of the component.

Conclusion

To create dynamic template to compile dynamic component with Angular, we can use angular-elements.

Sometimes, we want to bind HTML with Angular.

In this article, we’ll look at how to bind HTML with Angular.

How to bind HTML with Angular?

To bind HTML with Angular, we use [innerHTML].

For instance, we write

<div [innerHTML]="htmlString"></div>

to render the contents of htmlString as raw HTML.

We use [innerHTML] to make render htmlString as is instead of escaping the string before rendering it.

Conclusion

To bind HTML with Angular, we use [innerHTML].