title: How to display Yes/No instead of 1/0 in Angular
body: <p>I am using Angular7 to get endpoints from Laravel API. I display the result on a table in Angular. A particular field called is_subscribe(Subscribe) is either 1 or 0. I don't know how to change 1 to True and 0 to False</p>
  
  <p>I have written the service.ts, component.ts and component.html and everything is working fine.</p>
  
  <p>model.ts</p>
  
  <pre><code>export class Cloudsubscriptions {
  
      constructor(
        public _id: number = 0,
        public msisdn: string,
        public is_subscribe: number,
        public package_id: number,
        public transaction_id: string,
        public platform_transaction_id: number,
        public status: string,
        public amount: string,
        public transaction_type: string,
        public channel: string,   
        public service_name: string    
  
      ) {}
  
      toString(): string {
        return JSON.stringify(this)
      }
    }
  </code></pre>
  
  <p>service.ts</p>
  
  <pre><code>const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
  };
  const apiUrl = "http://localhost/cloudengine-sandbox/cloudsandboxbackend/public/api/cloudsubscriptions";
  
  @Injectable({
    providedIn: 'root'
  })
  export class CloudsubscriptionsService {
  
    constructor(private http: HttpClient) { }
  
    getCloudsubscriptions (): Observable&lt;Cloudsubscriptions[]&gt; {
      return this.http.get&lt;Cloudsubscriptions[]&gt;(apiUrl)
        .pipe(
          tap(cloudsubscriptions =&gt; console.log('Fetch Cloud subscriptions')),
          catchError(this.handleError('getCloudsubscriptions', []))
        );
    }
  
    getCloudsubscription(id: number): Observable&lt;Cloudsubscriptions&gt; {
      const url = `${apiUrl}/${id}`;
      return this.http.get&lt;Cloudsubscriptions&gt;(url).pipe(
        tap(_ =&gt; console.log(`fetched Cloudsubscription id=${id}`)),
        catchError(this.handleError&lt;Cloudsubscriptions&gt;(`getCloudsubscription id=${id}`))
      );
    }
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>export class PremiumSmsProductListComponent implements OnInit {
  
    displayedColumns: string[] = ['msisdn','is_subscribe','package_id','status','amount','channel','service_name'];
    data: Cloudsubscriptions[] = [];
    isLoadingResults = true;    
  
    constructor(private api: CloudsubscriptionsService) { }
  
    ngOnInit() {
  
      this.api.getCloudsubscriptions()
        .subscribe(res =&gt; {
          this.data = res;
          console.log(this.data);
          this.isLoadingResults = false;
        }, err =&gt; {
          console.log(err);
          this.isLoadingResults = false;
        });
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>                &lt;div class="box-body"&gt;
                    &lt;table id="example2" class="table table-bordered table-hover table-striped table-condesed"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th width="5%"&gt;#&lt;/th&gt;
                        &lt;th&gt;MSISDN&lt;/th&gt;
                        &lt;th&gt;Subscribe&lt;/th&gt;
                        &lt;th&gt;Package&lt;/th&gt;
                        &lt;th&gt;Status&lt;/th&gt;   
                        &lt;th&gt;Amount&lt;/th&gt;
                        &lt;th&gt;Channel&lt;/th&gt;    
                        &lt;th&gt;Service Name&lt;/th&gt;                                      
                        &lt;th&gt;Actions&lt;/th&gt;                   
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                        &lt;tr  *ngFor="let datas of data| filter:filter | paginate: { itemsPerPage: 5, currentPage: p }; let i = index"&gt;
                          &lt;td&gt;{{i + 1}}&lt;/td&gt;
                          &lt;td&gt;{{datas.msisdn}}&lt;/td&gt;
                          &lt;td&gt;{{datas.is_subscribe}}&lt;/td&gt;
                          &lt;td&gt;{{datas.package_id}}&lt;/td&gt;
                          &lt;td&gt;{{datas.status}}&lt;/td&gt;  
                          &lt;td&gt;{{datas.amount}}&lt;/td&gt;  
                          &lt;td&gt;{{datas.status}}&lt;/td&gt;  
                          &lt;td&gt;{{datas.amount}}&lt;/td&gt;                                          
                        &lt;td&gt;
                            &lt;!-- &lt;button class="btn btn-info" (click)="updateService(service)"&gt;Edit&lt;/button&gt; --&gt;
                            &lt;button class="btn btn-info" routerLink="/cloudsubscriptionsupdate/{{channel}}"&gt;Edit&lt;/button&gt;
                            &lt;button class="btn btn-danger" (click)="deleteCloudsubscription(service)" style="margin-left: 20px;"&gt; Delete&lt;/button&gt;
                        &lt;/td&gt;                                  
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
  
                    &lt;/table&gt;
                    &lt;pagination-controls (pageChange)="p = $event"&gt;&lt;/pagination-controls&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>I want </p>
  
  <blockquote>
    <p>{{datas.is_subscribe}}</p>
  </blockquote>
  
  <p>to be True when 1 and False when 0</p>