I'm displaying information in buttons in my webpage. The buttons display several objects from a list and their fields (e.g. object.name, object.age, etc.). In some case, one of those fields are null. How can I go about checking if a value is null? If it's null, I would like to print 'Unknown' - as of now it prints nothing.

Here's is my ngFor loop (in my case, environment is sometimes null):

<button *ngFor="let object of objects; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary"
        Name: {{object.name}} <br /> Locations: {{object.date}} <br /> Environments: {{object.environment}}
</button>

I know I can manually set environment to 'Unknown' since it is a string value, but I would like to know if there is a way to do this via html.

I'm displaying information in buttons in my webpage. The buttons display several objects from a list and their fields (e.g. object.name, object.age, etc.). In some case, one of those fields are null. How can I go about checking if a value is null? If it's null, I would like to print 'Unknown' - as of now it prints nothing.

Here's is my ngFor loop (in my case, environment is sometimes null):

<button *ngFor="let object of objects; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary"
        Name: {{object.name}} <br /> Locations: {{object.date}} <br /> Environments: {{object.environment}}
</button>

I know I can manually set environment to 'Unknown' since it is a string value, but I would like to know if there is a way to do this via html.

• javascript
• html
• angularjs
• angular

• 3 This sounds like a good use for a pipe – Jarod Moser Commented Jul 5, 2016 at 15:55

3 Answers 3

Here is what your pipe could look like:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'unknown'})
export class Unknown implements PipeTransform {
  transform(value: any): any {
    return value ? value : 'Unknown'
  }
}

Inside your ponent you would need to include the pipe:

@Component({
...
pipes: [Unknown] // this is whatever you named your exported class

then in your html you would have

...
<br /> Environments: {{object.environment | unknown}} //this is whatever name you put in the @Pipe decorator

Personally I like pipes better since it leaves for cleaner more readable html and takes full advantage of the framework that you are coding in

The pipe is a good solution but if you want you can use *ngIf directly in html:

<button *ngFor="let object of objects; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary"
    Name: <span *ngIf="object.name">{{object.name}}</span> <span *ngIf="!object.name">Unknown</span>

     const newData = this.someNestedArray.map((some:any)=>{
    return  {...some,
      changeRequests:some.changeRequests.map((request:any)=>{
            return {
              ...request,
              name:request.name === null ? "empty" : request.name,
              type:request.type === null ? "empty" : request.type,
              description:request.description === null ? "empty" : request.description
            }
      })
    }
 })

this.filteredArray = newData

in your angular template

  <div class="" *ngFor="let item of filteredArray">
      <div>{{item.name}}</div>
      <div>{{item.type}}</div> 
      <div *ngFor="let list of  item.changeRequests">
         <li  *ngIf="list.name !== 'empty' ">{{list.name}}</li>
         <li  *ngIf="list.type !== 'empty' ">{{list.type}}</li>
         <li *ngIf="list.description !== 'empty' ">{{list.description}}</li>
      </div>
    </div>