0

I have angular 8 application.

And I just want to show the text from api call in dialog mode.

So this is the api call in the component: FirstViewModalComponent

  • About your error use the safe navigation navigator (?) as result is undefined on the component initialisation : `{{result?.WelcomePopupBody}}` – Gérôme Grignon Aug 18 '20 at 07:52

1 Answers1

0

Add result of call to component property this.healthApiService.getWelcomePopupsByParticipant().subscribe(result => this.result);

Use it in view, html show with innerHtml binding and other properties with interpolation. Also you need to wrap template content so it won't render while results are undefined (Since you are making async call to backend I supose).

<app-modal [modalTitle]="modalTitle" [modalId]="modalId" (closeModal)="close.emit(false)">
  <ng-container *ngIf="results; else loading">
    <div class="modal modal-first-view">
      <div class="modal-text modal-text-first-view" [innerHtml]="result.welcomePopupBody">


      </div>
      <div class="first-view-button-wrap">
        <button (click)="buttonClicked()" type="button" class="button button-double-shadow button-first-view">
          {{ result.welcomePopupButtonText }}
        </button>
      </div>
      <div class="modal-img modal-img-first-view first-view-lady">
        <img src="/assets/img/Woman-coach.png" alt="Nice lady here to help" />
      </div>
    </div>
  </ng-container>

  <ng-template #loading>
    ...Loading
  </ng-template>
</app-modal>

You need to use *ngIf to ensure you access properties of result object after it was inicialized. Usage of ng-container and ng-template is just example.

Matus Jurika
  • 305
  • 1
  • 7
  • `
    {{result?.WelcomePopupBody}}
    ` Don't use both [innerHtml] binding and interpolation {{}}. Use only one. Either you want to bind proper HTML or text. Also consider upvoting or marking answer.     – Matus Jurika Aug 18 '20 at 08:30
  • oke, if I do this:
    I get lot of erros, and If I do this:
    {{result.WelcomePopupBody}}
    I dont get any errors, but nothing is showing. The text from api is: "welcomePopupBody": "

    jklhlkjlkj

    ",
     –  Aug 18 '20 at 08:48
  • first-view-modal.component.html:3 ERROR TypeError: Cannot read property 'WelcomePopupBody' of undefined at Object.updateRenderer (first-view-modal.component.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.js:30563) –  Aug 18 '20 at 08:58
  • ngOnInit() { this.updateScreenDimensions(); const test = this.healthApiService.getWelcomePopupsByParticipant() .subscribe(result => { console.log(result); this.result}); } –  Aug 18 '20 at 08:59
  • you need to define result property above constructor add result: any; and in ngoninit this.result = result – Matus Jurika Aug 18 '20 at 09:08
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/220021/discussion-between-nicetobebottleinfinity-and-matus-jurika). –  Aug 18 '20 at 09:10