CODEWITHSUNDEEP
javascriptangulartypescript
mightycode Newton
mightycode Newton

Reputation: 3949

Hide Angular component if value is null

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

Upvotes: 3

Views: 3904

Answers (1)

Massaget
Massaget

Reputation: 378

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

Upvotes: 3

Related Questions