Parent component receiving child component data

Question

It’s kind of confusing what I want more come on I have my parent component that contains some buttons and a search field, and I have my kids components, I want to implement the function of the search field in the parent element, and for that I need to receive the list that was loaded in the child element. I couldn’t explain it properly 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 city so I hope to receive the list of cities) and then do the search and return another list that will be rendered. I wanted to do this way, because I have several registration screen do not want to keep repeating the html code of the search field and filter code. Is it possible to do something like this, or has some other easier 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 of 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 daughter classes, and it works in parts, the problem is that they stay in different scopes, ie in my view is an instance of the class, and in my element is another instance, they do not connect.

Answer 1

In Angular we have something called @Input and @Output they allow to traffic data between components for example.

Component Pai

mandaDados: any;

this variable will receive the sample data a filter form.

Component Filho

@Input() recebeDados: any;

in the child component create a variable that will receive the remembering data with the @Input in front.

When to Call Html Child

when you call the html child or your componet in its tag you will have this variable that will receive a parameter as you can see in the image below

<seu-component-filho [recebeDados]="mandaDados"></seu-component-filho>

thus passing the data to the other component the idea is worth to @Output.

Answer 2

You could use @Output to transfer data from the child component to the parent or maybe Eventemitter in a service to make the data global.