Pipe for displaying '-' when no data received

[puddlejumper26]

Description

In the real project, when the browser recieves no data from the backend, it displays like 0 or `0.00 or `0.00% etc.

It would be better

• Only show 0 or `0.00 or `0.00% when receiving 0 from the backend.
• Should show - when receiving nothing from the backend.

Solution - self-made- Pipe

• DisplaySlashPipe -- selfmade pipe

  
  import { Pipe, PipeTransform } from '@angular/core';
  /*
  * Shows any non-visible value using its default or provided representation.
  * Non-visible values:
  *   - undefined
  *   - null
  *   - ' ' (empty string)
  * Usage:
  *   value | displaySlash:defaultRepresentation
  * Examples:
  *   {{ null | displaySlash}}
  *   formats to: -
  *
  *   {{ undefined | displaySlash:'N/A' }}
  *   formats to: N/A
  */
  @Pipe({name: 'displaySlash'})
  export class DisplaySlashPipe implements PipeTransform {
  
  public transform(value?: string | null, default: string = '-'): string {
      if (!value) {
          return default;
      }
      return value;
  }

}

Applications normally are in the table

```html
<div>{{ tableDataAttributeA | display-Slash }}</div>

And in the above HTML we could not directly add like percentage format after the pipe, we need to modify

• sample.component.html

  <div> {{ addPercentage(tableDataAttributeA) | display-Slash }} </div>

• sample.component.ts

  public addPercentage(data: DataStatisticDto) : string | null {
  if(data.tableDataAttributeA === undefined){
        return null;
  } else {
       return formatNumber(data.tableDataAttributeA*100, 'en', '1.2-4') +'%';
  }
  }

• sample.module.ts

@NgModule({ imports: [ DisplaySlashPipe, ], }) export class SampleModule{ }

- DataStatisticDto
```ts
export interface DataStatisticDto{
     tableDataAttributeA ?: number,
     tableDataAttributeB ?: number,
     tableDataAttributeC ?: number 
}