Updating an Observable in Angular 4 using HttpClient's get method

Question

Updating an Observable in Angular 4 using HttpClient's get method

Seeking assistance in updating an observable retrieved in html format from an API call.

If anyone has any insights on how to achieve this, your help would be greatly appreciated.

The corresponding html (in another component) is:

<common-content [theme]="theme" ></common-content>

and the respective component code is as follows:

import { Component, OnInit, Input } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ThemeModel } from '../../models';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'common-content',
  template: `<div innerHTML = "{{innerHtml}}"></div>`
})

export class CommonContentComponent implements OnInit {
    @Input() page: string;
    @Input() theme: ThemeModel;
    innerHtml: string;

    constructor(private http: Http) {
    }

    ngOnInit() {
        this.populatePage();
    }

    populatePage(){
        let thisUrl = 'myPage.html';
        this.http.get(thisUrl).subscribe(f => {
            var content = <string>f['_body'];
            this.innerHtml = content.replace("{{theme.Name}}", this.theme.name);
            }, (error) => {
                let e = error;
            }, () => {
        });
    }
}

The goal is for the observable to update automatically instead of using "replace". Attempts have been made with both subscribe and promises, but syntax issues persist.

If you have any suggestions or solutions, please share them. Your assistance is appreciated.

Thank you.

angular typescript angular2-template angular2-observables

Answer 1

Answer №1

1) It's not clear what your goal is. From what I can gather, you want to update the DOM upon success. 2) Avoid using innerHTML and consider using interpolation or ngModel along with a sanitizer instead. 3) Another option would be to develop a custom reusable directive for this purpose.

One possible approach:

1) Create a sanitization pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
  
  constructor(private sanitizer: DomSanitizer) { }
  
  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
  }
}

2) Utilize it as follows:

<div class="card_description" [innerHTML]="scenarioStepDataDesc | safeHtml"></div>

where scenarioStepDataDesc represents your HTML content.

3) Implement a shared module for pipes and other reusable components/directives

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material/material.module';
import { BlockUIModule } from 'ng-block-ui';
import { AutoCompleteComponent } from './components/autoComplete/autoComplete.component';
import { DialogDataComponent } from './components/dialog/dialog.component';
import { SafeHtmlPipe } from './pipes/safeHtml.pipe';

@NgModule({
  imports: [CommonModule, FormsModule, MaterialModule, BlockUIModule, ReactiveFormsModule],
  exports: [
    CommonModule,
    FormsModule,
    MaterialModule,
    BlockUIModule,
    ReactiveFormsModule,
    AutoCompleteComponent,
    DialogDataComponent,
    SafeHtmlPipe
  ],
  declarations: [AutoCompleteComponent, DialogDataComponent, SafeHtmlPipe]
})
export class SharedModule { }

Enjoy :)

Answer 2

1) It's not clear what your goal is. From what I can gather, you want to update the DOM upon success. 2) Avoid using innerHTML and consider using interpolation or ngModel along with a sanitizer instead. 3) Another option would be to develop a custom reusable directive for this purpose.

One possible approach:

1) Create a sanitization pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
  
  constructor(private sanitizer: DomSanitizer) { }
  
  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
  }
}

2) Utilize it as follows:

<div class="card_description" [innerHTML]="scenarioStepDataDesc | safeHtml"></div>

where scenarioStepDataDesc represents your HTML content.

3) Implement a shared module for pipes and other reusable components/directives

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material/material.module';
import { BlockUIModule } from 'ng-block-ui';
import { AutoCompleteComponent } from './components/autoComplete/autoComplete.component';
import { DialogDataComponent } from './components/dialog/dialog.component';
import { SafeHtmlPipe } from './pipes/safeHtml.pipe';

@NgModule({
  imports: [CommonModule, FormsModule, MaterialModule, BlockUIModule, ReactiveFormsModule],
  exports: [
    CommonModule,
    FormsModule,
    MaterialModule,
    BlockUIModule,
    ReactiveFormsModule,
    AutoCompleteComponent,
    DialogDataComponent,
    SafeHtmlPipe
  ],
  declarations: [AutoCompleteComponent, DialogDataComponent, SafeHtmlPipe]
})
export class SharedModule { }

Enjoy :)

Answer 3

Answer №2

If you want to update your code snippet, consider changing <string> f['_body']; to <string>f.text(), and also updating innerHTML = "{{innerHtml}}" to [innerHTML]="view". You can refer to the Plnkr link provided below to see an example of how it works.

this._http.get(link).subscribe(f => {
     this.loading = false;
            var content = <string>f.text();
            this.view = content.replace("{{theme.Name}}", this.theme.name);
            }, (error) => {
              this.loading = false;
              console.error(error);
                alert(error);
            });

This is what the template looks like:

content <button (click)="open('external.html')">Open Page</button>
      <strong *ngIf="loading">LOADING...</strong>
      <div [innerHTML]="view"></div>

The contents of external.html are simple:

me playing around with this theme with name 
<b>
  {{theme.Name}}
</b>

You can access the running Plnkr here

For processing String interpolation as if the content were in the same parent template, and binding it to the template scope (similar to Angular 1's ng-include), check out this helpful answer for Angular 4 and above versions.

using Angular 4.0.0-beta.6's ngComponentOutlet.

Answer 4

If you want to update your code snippet, consider changing <string> f['_body']; to <string>f.text(), and also updating innerHTML = "{{innerHtml}}" to [innerHTML]="view". You can refer to the Plnkr link provided below to see an example of how it works.

this._http.get(link).subscribe(f => {
     this.loading = false;
            var content = <string>f.text();
            this.view = content.replace("{{theme.Name}}", this.theme.name);
            }, (error) => {
              this.loading = false;
              console.error(error);
                alert(error);
            });

This is what the template looks like:

content <button (click)="open('external.html')">Open Page</button>
      <strong *ngIf="loading">LOADING...</strong>
      <div [innerHTML]="view"></div>

The contents of external.html are simple:

me playing around with this theme with name 
<b>
  {{theme.Name}}
</b>

You can access the running Plnkr here

For processing String interpolation as if the content were in the same parent template, and binding it to the template scope (similar to Angular 1's ng-include), check out this helpful answer for Angular 4 and above versions.

using Angular 4.0.0-beta.6's ngComponentOutlet.

Updating an Observable in Angular 4 using HttpClient's get method

Answer №1

Answer №2

Similar questions

Steps for updating the clientId and authority values in MSAL configuration after they have already been read

Calculate the total of JSON objects while eliminating duplicates in an array

The cache-control header is not being included in the response header in the express app

unable to log out firebase user

Conserving node.js native imports for Electron with rollup

Why would npm be unable to locate a file, potentially leading to an error? Could the lack of contents in my node_modules subfolder be the root cause of this issue?

Accessing instance variables from a chained observable function in Angular 2/Typescript

Bidirectional synchronization with Angular 6 reactive forms

In React TS, the function Window.webkitRequestAnimationFrame is not supported

Tips for updating values in an Angular model and pushing it to an array with the specified index

Merge mocha with Typescript, and include the watch feature

Managing simultaneous asynchronous updates to the local state

Conditions are in an angular type provider with AOT

Issue may arise when using custom directive in conjunction with mat-menu-item directive, potentially leading to malfunction. The root

How come the Handsontable CSS styles are not being used on my Angular frontend?

Is there a method to reference a class before it has been defined?

Various gulp origins and destinations

The Vue router fails to load when using create-vue@3

Activate the button when a checkbox within a looping structure is selected using Angular 5

Stop the MatSort feature from activating when the space key is pressed in Angular Material