Hola buenas noches comunidad estoy intentando implementar el data table en angular 4 y estoy muriendo en el intento no entiendo q hago mal


mi componente: 

    export class ViewComponent implements OnInit{
    	public title : string;
    	public rol : Roles;
    	// public data: any[];
    	public filterQuery = "";
      	public rowsOnPage = 5;
      	public sortBy = "denominacion";
      	public sortOrder = "asc";
     
    
    constructor(
    	private _router: Router,
    	private _route : ActivatedRoute,
    	private _service : StrService
    
    
    	){
    
    	this.title='List Roles';
    	this.rol = new Roles('');
    
    }
    
    ngOnInit()
    {
    	console.log('View Roles initialized');
    	this.Roles();
    }
    
    
    
    
    Roles()
    {
    	this._service.getRoles().subscribe(
    
    		response=>{
    			if (response.code==200)
    			{
    				this.rol=response.datos
    				console.log(JSON.stringify(response.datos));
    			}
    		},error=>{
    			console.log(<any>error)
    
    		});
    }
    
     public confirmado;
    
      borrarConfirm(id){
        this.confirmado = id;
      }
    
      cancelarConfirm(){
        this.confirmado = null;
      }
    
      onDeleteProducto(id){
        this._service.deleteroles(id).subscribe(
          response => {
            if (response.code == 200) {
              this.Roles();
            } else {
              alert('Error al borrar el producto.');
            }
          },
          error => {
            console.log(<any>error);
          }
        );
      }
    
    
    
    
    
    	
    }

Mi html 


    <div class="col-md-12">
    
     <table
        class="table table-striped"
        [mfData]="rol | dataFilter : filterQuery"
        #mf="mfDataTable"
        [mfRowsOnPage]="rowsOnPage"
        [(mfSortBy)]="sortBy"
        [(mfSortOrder)]="sortOrder"
      >
        <thead>
        <tr>
          <th style="width: 20%">
            <mfDefaultSorter by="id">Id</mfDefaultSorter>
          </th>
          <th style="width: 50%">
            <mfDefaultSorter by="denominacion">Denominacion</mfDefaultSorter>
          </th>
          <th style="width: 10%">
            <mfDefaultSorter by="action">Action Delete</mfDefaultSorter>
          </th>
          <th style="width: 20%">
            <mfDefaultSorter by="action">Action edit</mfDefaultSorter>
            </th>
        </tr>
        <tr>
          <th colspan="5">
            Filter by Denominacion:
            <input class="form-control" [(ngModel)]="filterQuery"/>
          </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of rol">
          <td>{{item.id}}</td>
          <td>{{item.denominacion}}</td>
          <td>
            <div class="botones" *ngIf="confirmado != item.id">
              <a (click)="borrarConfirm(item.id);" class="btn btn-md btn-danger">Borrar</a>
            </div>
    
            <div class="botones" *ngIf="confirmado== item.id">
                <a (click)="onDeleteProducto(item.id);" class="btn btn-md btn-danger">Quiero eliminarlo</a>
                <a (click)="cancelarConfirm();" class="btn btn-md btn-warning">Cancelar</a>
             </div>
                    </td>
                    <td>
                     <div class="botones" >
                        <a [routerLink]="['/dashboards/editrol', item.id]" class="btn btn-md btn-warning">Editar
                        </a>
                    
                    </div>
                      
                    </td>
        </tr>
        </tbody>
       <tfoot>
        <tr>
            <td colspan="4">
                <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
            </td>
        </tr>
        </tfoot>
      </table>
    </div>
    <!-- 
                  <table class="table table-hover margin bottom">
                    <thead>
                    <tr>
                      <th style="width: 1%" class="text-center">No.</th>
                       <th>Name rol</th>
                            <th>Action delete</th>
                            <th>Action edit</th>
                    </tr>
                    </thead>
                    <tbody >
    			                <tr align="left" *ngFor="let producto of rol">
    			                <td>
    			                	{{producto.id}}
    			                </td>
    				              	<td>{{producto.denominacion}}</td>
    					        	<td>
    						        	<div class="botones" *ngIf="confirmado != producto.id">
    					        			<a (click)="borrarConfirm(producto.id);" class="btn btn-md btn-danger">Borrar</a>
    					        		</div>
    
    					        		<div class="botones" *ngIf="confirmado== producto.id">
    					        		    <a (click)="onDeleteProducto(producto.id);" class="btn btn-md btn-danger">Quiero eliminarlo</a>
    							            <a (click)="cancelarConfirm();" class="btn btn-md btn-warning">Cancelar</a>
    					        		 </div>
                                	</td>
                                	<td>
    					                   <div class="botones" >
                                            <a [routerLink]="['/dashboards/editrol', producto.id]" class="btn btn-md btn-warning">Editar</a>
                                        
                                       		 </div>
                                		
                                	</td>
    
    
    				        
    					    </tr>     
    	                </tbody>
                  </table>
    
     -->


lo tengo importado en el modulo y todo pero no me busca no filtra solo muestra la tabla y ya