0
I have my template on a parent element and my child elements extending 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 of 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 new function ?
Makes sense the component
ListaCidadesComponent
extendCadastroComponent
?– André Roggeri Campos
What I want is to reuse the button in the template
CadastroComponent
, to trigger an action in the child element. I was trying to extend to try to get the button click event.– Erick Zanetti
Maybe it makes more sense to turn that button into a component and reuse it.
– André Roggeri Campos
Doing this the click function would still be associated with the class of the new component that I will create correctly ?
– Erick Zanetti
I think now I understand your doubt, you want to implement the parent class method in the child ? Or the other way around ?
– André Roggeri Campos
Yes, I want to implement the parent class method in the child. So that the button triggers this method in the child class.
– Erick Zanetti
I’m sorry if I’m confusing you, I’m used to Angularjs and other ways of programming, I migrated to Type Script a little while ago, so I’m sorry for my ignorance.
– Erick Zanetti