title: Show message on empty table
body: <p>I'm new in Angular. I implemented  material table where I load data from service and call in component like this:</p>
  
  <pre><code> ngOnInit() {
      this.UsuariosService.getUser().subscribe(results =&gt; {
        if (!results) {
          return;
        }
        this.dataSource = new MatTableDataSource(results);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
  
      });
    }
  </code></pre>
  
  <p>It works correctly, but now I want to show message when table is empty so I try:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;mat-table&gt;
      //content there
  &lt;/mat-table&gt;
    &lt;div *ngIf="noResults$ | async"&gt; No results&lt;/div&gt;
  </code></pre>
  
  <p>then in component something like this:</p>
  
  <pre><code>ngOnInit() {
      this.UsuariosService.getUser().subscribe(results =&gt; {
        if (!results) {
          return;
        }
        this.dataSource = new MatTableDataSource(results);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
        var noResults$ = results.map(d =&gt; d.length === 0).startWith(false);
  
      });
    }
  </code></pre>
  
  <p>But I get 3 errors:</p>
  
  <p>Error 1 (Html):</p>
  
  <blockquote>
    <p>Identifier 'noResults$' is not defined. The component declaration,
    template variable declarations, and element references do not contain
    such a member</p>
  </blockquote>
  
  <p>I dont know why, because I declare noResults$ on component</p>
  
  <p>Error 2 (Component):</p>
  
  <blockquote>
    <p>message: 'Property 'length' does not exist on type 'User'.'</p>
  </blockquote>
  
  <p>Why 'length' search for property? Is supposed length is a method who looking for register in service</p>
  
  <p>Error 3 (Component):</p>
  
  <blockquote>
    <p>Property 'startWith' does not exist on type 'boolean[]'.</p>
  </blockquote>
  
  <p>I don't know nothing about this error</p>
  
  <p>Help is very appreciated. Regards</p>
  
  <p>Complete component:</p>
  
  <pre><code>import {
    Component,
    Input,
    OnInit,
    ViewEncapsulation,
    ViewChild,
    ElementRef
  } from "@angular/core";
  import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
  import { ScriptLoaderService } from "../../../../../_services/script-loader.service";
  import { ToastrService } from "ngx-toastr";
  
  import { UsuariosService } from "../../../../../_services/usuarios.service";
  import { Observable } from "rxjs/Observable";
  import {
    DataSource,
    CollectionViewer,
    SelectionModel
  } from "@angular/cdk/collections";
  import { BehaviorSubject } from "rxjs";
  import {
    MatSort,
    MatSortable,
    MatTableDataSource,
    MatPaginator,
    MatPaginatorIntl
  } from "@angular/material";
  
  
  import { SwalComponent } from "@toverux/ngx-sweetalert2";
  
  @Component({
    selector: "usuarios",
    templateUrl: "./usuarios.component.html",
    encapsulation: ViewEncapsulation.None
  })
  export class UsuariosComponent {
    @ViewChild(MatSort) sort: MatSort;
    @ViewChild("filter") filter: ElementRef;
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild("deleteSwal") private deleteSwal: SwalComponent;
  
    // Bootstrap switch
    public yes: string = "SI";
    public no: string = "NO";
    public green: string = "green";
    public gray: string = "gray";
    public disabled: boolean = false;
    public status: boolean = false;
    public normal: string = "small";
    //end Bootstrap switch
  
    public eliminar: string = "ELIMINAR";
    public cancelar: string = "CANCELAR";
    public red: string = "red";
  
  
    selection = new SelectionModel&lt;string&gt;(true, []);
    dataSource;
  
    applyFilter(filterValue: string) {
      filterValue = filterValue.trim(); // Remove whitespace
      filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
      this.dataSource.filter = filterValue;
    }
  
    displayedColumns = [
      "id",
      "nombre",
      "apellido",
      "email",
      "perfil",
      "ultimoLogin",
      "activo",
      "action"
    ];
  
    constructor(
      private _script: ScriptLoaderService,
      private toastr: ToastrService,
      private UsuariosService: UsuariosService
    ) {}
  
    ngOnInit() {
      this.UsuariosService.getUser().subscribe(results =&gt; {
        if (!results) {
          return;
        }
        this.dataSource = new MatTableDataSource(results);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
        var noResults$ = results.map(d =&gt; d.length === 0).startWith(false);
  
      });
    }
  
    onFlagChange(event, { id }) {
      const body: any = {
        usuarioId: id,
        activo: event
      };
      this.UsuariosService.postSwitch(body).subscribe(
        () =&gt; {
          //React to your HTTP request success
          this.toastr.success("El Usuario se ha actualizado correctamente.");
        },
        err =&gt; {
          this.toastr.error("Ocurrió un error al actualizar Usuario.");
          //React to your HTTP request error
        }
      );
    }
    deleteUser(userid) {
      debugger;
      this.UsuariosService.eliminar(userid).subscribe(
        () =&gt; {
          this.toastr.success("El usuario se ha eliminado con éxito.");
        },
        err =&gt; {
          this.toastr.error("Ocurrió un error al eliminar Usuario.");
        }
      );
    }
  }
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>First problem solved adding <code>noResults$</code> as  <code>public noResults$: any;</code></p>
  
  <p>and call in method as simple as:</p>
  
  <pre><code>this.noResults$ = results.map(d =&gt; d.length === 0).startWith(false);
  </code></pre>