Parent component receive child component data

It's a bit confusing, what I want is more, I have my parent component that contains some buttons and a search field, and I have my child components, I want to implement the function of the search field in the parent element, I need to receive the list that was loaded in the child element. I could not explain it right but I'll post the code to try to explain it better.

Parent element:

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">
          <span class="input-group-btn">
            <button class="btn btn-secondary" id="btn-prequisa" type="button"><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"><i _ngcontent-c30="" class="ion-funnel"></i></button>
        <button type="button" class="btn btn-success border-right-0" id="btn-novo"><i _ngcontent-c30="" class="ion-plus-round"></i></button>
      </span>
    </div>
  </div>
  </div>
  <router-outlet></router-outlet>',
})

export class CadastroComponent {}

Now comes the tricky part.

I want to receive the list of the child element that was opened (in this case it was a city so I hope to receive the list of cities) and then search and return another list that will be rendered. I wanted to do it this way, because I have several registration screen I do not want to be repeating the html code of the search field and the filter code. Is it possible to do something like this, or do you have some other easy solution

Routes:

    import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CadastroComponent } from './cadastro.component';
import { ListaCidadesComponent } from './cidade/cidade.component';
import { ListaSegmentosComponent } from './segmento/segmento.component';
import { ListaSubsegmentosComponent } from './subsegmento/subsegmento.component';
import { ListaUsuariosComponent } from './usuario/usuario.component';
import { ListaVendedoresComponent } from './vendedor/vendedor.component';

const routes: Routes = [{
    path: '',
    component: CadastroComponent,
    children: [
        {
            path: 'cidade',
            component: ListaCidadesComponent,
        },
        {
            path: 'segmento',
            component: ListaSegmentosComponent,
        },
        {
            path: 'subsegmento',
            component: ListaSubsegmentosComponent,
        },
        {
            path: 'usuario',
            component: ListaUsuariosComponent,
        },
        {
            path: 'vendedor',
            component: ListaVendedoresComponent,
        },
    ],
}];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class CadastroRouting { }

export const routedComponents = [
    CadastroComponent,
    ListaCidadesComponent,
    ListaSegmentosComponent,
    ListaSubsegmentosComponent,
    ListaUsuariosComponent,
    ListaVendedoresComponent,
];

Example child element

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

import { CidadeService } from './cidade.service';

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

export class ListaCidadesComponent implements OnInit {

    private cidades: object[];
    private coluna: string;
    constructor(private cidadeService: CidadeService) {}

    ngOnInit() {
        this.ListaTodasCidades();
    }

    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;
    }
}

I'm trying to extend the parent class to the child classes, and it works in parts, the problem and that they are in different scopes, ie in my view is an instance of the class, and in my element is another instance, they do not connect.