Hide Angular component if value is null

Question

I have a Angular application and I want to hide(not loading) a component if a value(array) is null.

THis I have as template:

 <div *ngIf="item.isJson !== null" >
            <div class="correspondence-item-p correspondence-item-message">
        <i class="fa fa-file-text-o  font-darkest"></i>
                <div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
          <iframe [src]="safeHTMLUrl"></iframe>
        </div>

                <ng-template #summaryIsJson>
          <app-dossier-entry-summary class="correspondence-item-text" [dossierEntry]="item"></app-dossier-entry-summary>
        </ng-template>
      </div>
   </div>

And this is the ts file:

export class DossierEntry {
  dossierEntryId: number;
  date: string;
  name: string;
  referenceId: string;
  summary: string;
  jsonSummary: Array<DossierEntryHeader>;
  isJson: boolean;
  hasFile: boolean;
  file: Blob;
  fileName: string;
  type: string;
}

And the ngOnit code:

 ngOnInit() {
    console.log(this.item.jsonSummary);
    if (!this.item.isJson) {
      if (window.btoa) {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
          'data:text/html;base64,' + btoa(this.item.summary)
        );
      } else {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl('data:text/html;utf-8,' + this.item.summary);
      }
    }
  }

So in the console I get:

null
dossier-correspondence-item.component.ts:36 [{…}]
dossier-correspondence-item.component.ts:36 [{…}]

So the first item is null.

But I still see the component in the view when the value is null

So how to fix this? Thank you

if I do it like this:

 isJson: boolean = false;

and this:

 <div *ngIf="isJson" >
            <div class="correspondence-item-p correspondence-item-message">
        <i class="fa fa-file-text-o  font-darkest"></i>
                <div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
          <iframe [src]="safeHTMLUrl"></iframe>
        </div>

                <ng-template #summaryIsJson>
          <app-dossier-entry-summary class="correspondence-item-text" [dossierEntry]="item"></app-dossier-entry-summary>
        </ng-template>
      </div>
   </div>

Then the component is always not visible.

But it is the property:

JsonSUmmary:

see:


date: "2018-01-10T08:58:16.6610961+01:00"
dossierEntryId: 144
file: null
hasFile: true
isJson: true
jsonSummary: null
name: "6MWT"
referenceId: "62222050122220501"
summary: null
type: "attachments"
__proto__: Object
dossier-corresponden…tem.component.ts:37 
{dossierEntryId: 142, type: "attachments", date: "2018-01-10T08:56:02.7163505+01:00", name: "X-ECG", summary: null, …}

========================================================================
date: "2018-01-10T08:56:02.7163505+01:00"
dossierEntryId: 142
file: null
hasFile: true
isJson: true
jsonSummary: Array(1)
0: {name: "", order: 1, items: Array(26)}
length: 1
__proto__: Array(0)
name: "X-ECG"
referenceId: "272222050122220501"
summary: null
type: "attachments"
__proto__: Object

When JsonSummary is null then not sowing.

I have it now like this:

<div *ngIf="item.isJson" >
            <div class="correspondence-item-p correspondence-item-message">
        <i class="fa fa-file-text-o  font-darkest"></i>
                <div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
          <iframe [src]="safeHTMLUrl"></iframe>
        </div>

                <ng-template #summaryIsJson>
          <app-dossier-entry-summary class="correspondence-item-text" [dossierEntry]="item"></app-dossier-entry-summary>
        </ng-template>
      </div>
   </div>

and this:

ngOnInit() {
    console.log(this.item);

    if (this.item.jsonSummary !== null)
    {this.isJson = true;}
    if (!this.item.isJson) {
      if (window.btoa) {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
          'data:text/html;base64,' + btoa(this.item.summary)
        );
      } else {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl('data:text/html;utf-8,' + this.item.summary);
      }
    }
  }

But the component is still visible

item.isJson is boolean. So try *ngIf="item.isJson" instead — Harun Yilmaz
– Harun Yilmaz, Commented Sep 12, 2019 at 11:25

Massaget · Accepted Answer · 2019-09-12 11:29:53Z

3

In TS file make isJson: boolean = false and in html <div *ngIf="isJson"> then after you get value for it change isJson to true

answered Sep 12, 2019 at 11:29

Massaget

3782 gold badges6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Massaget Over a year ago

@TAHASULTANTEMURI was typing the answer so didnt see. He wrote faster than me :)

TAHA SULTAN TEMURI Over a year ago

best of luck for next time

Harun Yilmaz Over a year ago

@mightycodeNewton not *ngIf="isJson". You should do it *ngIf="item.isJson"

Massaget Over a year ago

@HarunYilmaz there is no item object declared

Harun Yilmaz Over a year ago

@Massaget item is a property of the component (this.item). isJson is the property of item

|

Collectives™ on Stack Overflow

Hide Angular component if value is null

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related