import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

<% if (directory) { %>
import { fuseAnimations } from '../../../../../core/animations';    
import { FuseUtils } from '../../../../../core/fuseUtils';
<% } else { %>
import { fuseAnimations } from '../../../../core/animations';
import { FuseUtils } from '../../../../core/fuseUtils';
<% } %>

import { <%= Pages %>Service } from './<%= pages %>.service';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'fuse-<%= pages %>',
  templateUrl: './<%= pages %>.component.html',
  styleUrls: ['./<%= pages %>.component.scss'],
  encapsulation: ViewEncapsulation.None,
  animations : fuseAnimations
})
export class <%= Pages %>Component implements OnInit {

  <%= pages %>: any;
  selected: any;
  dataSource: FilesDataSource | null;
  displayedColumns = ['id', 'name'];

  constructor(private <%= pages %>Service: <%= Pages %>Service) { 
    this.<%= pages %>Service.on<%= Page %>Changed.subscribe(<%= pages %> => {
      this.<%= pages %> = <%= pages %>;
    });
    this.<%= pages %>Service.on<%= Page %>Selected.subscribe(selected => {
      this.selected = selected;
    });    
  }

  ngOnInit() {
    this.dataSource = new FilesDataSource(this.<%= pages %>Service);
  }

  onSelect(selected) {
      this.<%= pages %>Service.on<%= Page %>Selected.next(selected);
  }  
}

export class FilesDataSource extends DataSource<any>
{
    constructor(private <%= pages %>Service: <%= Pages %>Service) {
        super();
    }

    /** Connect function called by the table to retrieve one stream containing the data to render. */
    connect(): Observable<any[]> {
        return this.<%= pages %>Service.on<%= Page %>Changed;
    }

    disconnect() {
    }
}