I have my template in a parent element and my child elements that extend the parent element class.
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 {}
Example child element:
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;
}
}
If you look at my parent element template has a button with the newCast function, would I have to implement this function in my child element?