CODEWITHSUNDEEP
typescriptangular
Malik Kashmiri
Malik Kashmiri

Reputation: 5851

Change Boolean values to text in angular 2 client side

Detail

I am trying to get data from api and show into the table on of the column contains status attribute which return true or false value but I want to show on client side Active or Block instead of this. How can I able to achieve this in angular 2.

enter image description here

Upvotes: 11

Views: 25128

Answers (4)

Rajitha Alluri
Rajitha Alluri

Reputation: 117

Simple way is use conditional operator inside td element 

<td>{{user.status ? 'Active' : 'Block'}}</td>

Upvotes: 5

Dinistro
Dinistro

Reputation: 5730

I would suggest a pipe that returns either active or blocked according to the boolean.

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

@Pipe({name: 'activeBlocked'})
export class ActiveBlockedPipe implements PipeTransform {
    transform(value) {
        return value ? 'Active' : 'Blocked';
    }
}

Then you can use it like this in you components template:

{{value | activeBlocked}}

In my opinion this is the easiest to reuse.

Upvotes: 30

Des Horsley
Des Horsley

Reputation: 1888

You could do it directly in the view:

<td>{{user.IsActive && 'Active' || 'Block'}}</td>

Upvotes: 9

basarat
basarat

Reputation: 276199

How can I able to achieve this in angular 2

Just use javascript/typescript: 

const valueFromServer = false; // Assuming
const toShow = valueFromServer ? 'Active' : 'Blocked';

Upvotes: 7

Related Questions