ngFor length in Angular 5

Question

I have three buttons :

All (Reals+ Fakes), Reals(total count), Fakes(total count)

I am trying to get the total count of my total feeds which will be shown in All.

And the total count of feed.feed_type != '' which will be shown Reals.

And the total count of feed.feed_type == '' which will be shown Fakes.

Feeds Model

export class Feeds {
  feed_id: string;
  feed_category: string;
  feed_title: any;
  feed_description: string;
  feed_terms: string;
  feed_type: string;
  checked: false;
  }

Feeds Component:

import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import { MyService } from '../shared/services/my-service.service';
import { FeedsService } from '../shared/services/feeds.service';
import { Feeds } from '../shared/services/feeds';
import { Feed } from '../shared/services/feed';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'app-feeds',
  templateUrl: './feeds.component.html',
  styleUrls: ['./feeds.component.scss']
})

export class FeedsComponent implements OnInit {

  feeds: Observable<Feed[]>;
  Reals: boolean;
  Fakes: boolean;
  selectedFeedType = '';


  constructor(private myService: MyService, private feedsService: FeedsService) {
    this.selectedFeedType = 'All';
    this.Reals = true;
    this.Fakes = true;
  }

  ngOnInit() {
    this.feeds = this.myService.feeds;
    this.myService.loadAll();
  }


  SelectedFeedsType(event: any) {
    this.selectedFeedType = event.target.value;
    if (this.selectedFeedType === 'All') {
      this.Reals = true;
      this.Fakes = true;
    } else if (this.selectedFeedType === 'Reals') {
      this.Reals = true;
      this.Fakes = false;
    } else if (this.selectedFeedType === 'Fakes') {
      this.Reals = false;
      this.Fakes = true;
    }
  }

}

MyService:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { environment } from '../../../environments/environment';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { FeedsService } from './feeds.service';
import { Feed } from './Feed';

@Injectable()
export class MyService {
  feeds: Observable<Feed[]>;
  private _feeds: BehaviorSubject<Feed[]>;
  private baseUrl: string;
  total = '';
  private dataStore: {
    feeds: any
  };

    constructor(private http: HttpClient) {
      this.baseUrl  = environment.API_ENDPOINT + 'feeds';
      this.dataStore = { feeds: [] };
      this._feeds = <BehaviorSubject<Feed[]>>new BehaviorSubject([]);
      this.feeds = this._feeds.asObservable();
    }

   

     loadAll() { 
        this.http.get(this.baseUrl).subscribe(feeds => { 
        this.dataStore.feeds = feeds;
        console.log(feeds.length);
        const Reals = feeds.filter(feed => feed.feed_type !== '').length; 
        console.log(Reals);
        const Fakes = feeds.length - Reals;
        console.log(Fakes);
        this._feeds.next(Object.assign({}, this.dataStore).feeds);},
        error => console.log('Could not load feeds.'));
      }

    change(feeds) {
      this._feeds.next(feeds);
    }

}

Feeds.Component.html

<ul>
  <li><input  type="radio"  name="feedType" value="All" checked (change)="SelectedFeedsType($event)">All</li>
  <li><input  type="radio"  name="feedType" value="Reals"  (change)="SelectedFeedsType($event)">Reals</li>
  <li><input  type="radio"  name="feedType" value="Fakes"  (change)="SelectedFeedsType($event)">Fakes</li>
</ul>

<table class="table table-bordered">
    <thead>
      <tr><th>Feeds</th></tr>
    </thead>
    <tbody>
      <tr><td>
        <div class="storetabContent"  *ngFor="let feed of feeds | async">
        <ng-container *ngIf="Reals && feed.feed_type != ''">
          <p>{{ feed.feed_title }}</p>
          <p>{{ feed.feed_category }}</p>
          <b>REAL</b>
        </ng-container>
        <ng-container *ngIf="Fakes && feed.feed_type == ''">
            <p>{{ feed.feed_title }}</p>
            <p>{{ feed.feed_category }}</p>
            <b>FAKE</b>
        </ng-container>
        </div>
      </td></tr>
    </tbody>

</table>

Any suggestions, help appreciated.

Answer 1

As per your comments, to retrieve the count of Feed_A and Feed_B, you can make use of Array#filter and Array#length:

const feedACount = feeds.filter(feed => feed.feed_type !== '').length;
const feedBCount = feeds.length - feedACount;