Implement function in child element

Question

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 ?

Answer 1

It is necessary to create an abstract function in the parent class for you to implement the code in the daughters. For example:

@Component({
  selector: 'ngx-cadastro',
  template: `
    ...
        <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>

  ...`,
})

export class CadastroComponent {
    abstract novoCadastro();
}

Now in the daughter class just do the code implementation:

export class ListaCidadesComponent extends CadastroComponent implements OnInit {

    ...

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

}

Remembering that only works in the sense Father > Son, never the other way around.

Answer 2

Dude I don’t understand much why of extending Cadastral Component, if there is something to be reused you should create a separate component and use it. Regarding the execution of a parent class method take a look at the @Output() and EventEmitter. Here is an example on the page of the angle that shows how it works https://angular.io/guide/component-interaction#Parent-Listens-for-Child-Event