import { Component } from '@angular/core';

@Component({
  selector: 'ngx-cadastro',
  template: `
  <div class="container btns-listagem">
    <div class="row campoPesquisa">
      <div class="col-xs-12 col-sm-6 div-btnPesquisa">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Pesquisar" name="pesquisar" [(ngModel)]="pesquisar">
          <span class="input-group-btn">
            <button class="btn btn-secondary" id="btn-prequisa" type="button" data-toggle="tooltip" data-placement="top" title="Pesquisar">
              <i _ngcontent-c30="" class="ion-search"></i>
            </button>
          </span>
        </div>
      </div>
    <div class="col-xs-12 col-sm-6 btns-funil-novo">
      <span class="input-group-btn">
        <button type="button" class="btn btn-info" id="btn-funil" data-toggle="tooltip" data-placement="top" title="Filtro">
          <i _ngcontent-c30="" class="ion-funnel"></i>
        </button>
        <button (click)="novoCadastro()" type="button" class="btn btn-success border-right-0" data-toggle="tooltip" data-placement="top" title="Novo" id="btn-novo">
          <i _ngcontent-c30="" class="ion-plus-round"></i>
        </button>
      </span>
    </div>
  </div>
  </div>
  <router-outlet></router-outlet>`,
})

export class CadastroComponent {}

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

import { CidadeService } from './cidade.service';
import { CadastroComponent } from '../cadastro.component';

@Component({
    selector: 'ngx-lista-cidades',
    templateUrl: './cidade.component.html',
    providers: [ CidadeService ],
})

export class ListaCidadesComponent extends CadastroComponent implements OnInit {

    private cidades: object[];
    private coluna: string;

    constructor(private cidadeService: CidadeService) {
        super();
    }


    ngOnInit() {
        this.ListaTodasCidades();
    }

    novoCadastro() {
        console.log('aqui');
    }

    private ListaTodasCidades() {

        this.cidadeService.TodasCidades().then((response: object[]) => {
            this.cidades = response.sort(function(a: any, b: any) {
                return a.NOME < b.NOME ? -1 : a.NOME > b.NOME ? 1 : 0;
            });
        }, (error) => {
            console.log(error);
        });
    }

    private ordena(coluna) {

        if (this.coluna === coluna) {
            this.cidades.reverse();
        } else {
            this.cidades.sort((a, b) => {
                return a[coluna] < b[coluna] ? -1 : a[coluna] > b[coluna] ? 1 : 0;
            });
        }
        this.coluna = coluna;
    }
}