Is it possible to load an angle function after closing another component?

Question

import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { DbService } from 'src/app/db.service';
import { InputAddCliente, OutPutCliente, OutputGetEsfera, OutputGetCidade, OutPutGetCep } from './cliente.class';
import { Router } from '@angular/router';
 
 @Component({
    selector: 'app-novo-cliente',
    templateUrl: './novo-cliente.component.html',
    styleUrls: ['./novo-cliente.component.scss']
})
export class NovoClienteComponent implements OnInit {

    form: FormGroup;
    listaEsfera: OutputGetEsfera[] = [];
    listaCidade: OutputGetCidade[] = [];
    itemCep: OutPutGetCep;
    NovaOportunidadeComponent: any;

    constructor(
        public modalRef: BsModalRef, private dbService: DbService,private router: Router,
    ) {

        this.form = new FormGroup({

            nmFantasia: new FormControl('', Validators.required),
            razaoSocial: new FormControl('', Validators.required),
            idEsfera: new FormControl('', Validators.required),
            idCidade: new FormControl('', Validators.required),
            cnpj: new FormControl('', Validators.required),
            uf: new FormControl('', Validators.required),
            endereco: new FormControl(''),
            cep: new FormControl(''),
            nmBairro: new FormControl('')

        });

    }

    ngOnInit() {

        this.loadEsfera();
        this.loadCidade();

    }

    fnCep(cep: string) {

        cep = cep.replace(/ /gi, '');
        cep = cep.replace(/\-/gi,'');

        if (cep.length == 8) {
            
            this.dbService.getCep('viacep.com.br/ws/' + cep + '/json/').subscribe((result: OutPutGetCep) => {
                this.itemCep = result;

                this.form.patchValue({

                    endereco: this.itemCep.logradouro,                    
                    nmBairro: this.itemCep.bairro,
                    uf: this.itemCep.uf,
                    idCidade: this.listaCidade.filter(f => f.nmCidade == this.itemCep.localidade)[0].idCidade

                });

            });
        }
    }

    fnSalvar() {
        // Valida formulário        
        if (!this.form.valid) {
            // Exibe erros
            for (let ctrl in this.form.controls) { this.form.controls[ctrl].markAsTouched(); }
        }
        else {
            let cliente = new InputAddCliente();

            cliente.nmFantasia = this.form.controls['nmFantasia'].value;
            cliente.razaoSocial = this.form.controls['razaoSocial'].value;
            cliente.idEsfera = this.form.controls['idEsfera'].value;
            cliente.idCidade = this.form.controls['idCidade'].value;
            cliente.cnpj = this.form.controls['cnpj'].value;
            cliente.uf = this.form.controls['uf'].value;
            cliente.endereco = this.form.controls['endereco'].value;
            cliente.cep = this.form.controls['cep'].value;
            cliente.nmBairro = this.form.controls['nmBairro'].value;

            this.dbService.post('cliente/AddCliente', cliente).subscribe((result: OutPutCliente) => {
                if (result.result === true) {
                    this.modalRef.hide();          
                    
                }
            });
        }
    }

import { Component, OnInit } from '@angular/core';
import { DbService } from 'src/app/db.service';
import { SessionService } from 'src/app/session.service';
import { Router } from '@angular/router';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { NovoClienteComponent } from '../novo-cliente/novo-cliente.component';
import { GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';
import { process, State } from '@progress/kendo-data-query';
import { OutputGet } from './cliente.class';



@Component({
    selector: 'app-cliente',
    templateUrl: './cliente.component.html',
    styleUrls: ['./cliente.component.scss']
})
export class ClienteComponent implements OnInit {
    modalRef: BsModalRef;
    cliente: OutputGet;
    gridData: GridDataResult;
    palavra: string = "";

    listaCliente: OutputGet[];
    state: State = {
        skip: 0,
        take: 6
    };

    constructor(private router: Router,
        private dbService: DbService,
        public sessionService: SessionService, private modalService: BsModalService) { }

    ngOnInit() {
        this.load();
    }

    fnEditarCliente(id: number) {
        this.router.navigate(['/editarCliente/' + id]);
    }

    dataStateChange(state: DataStateChangeEvent): void {
        this.state = state;
        this.gridData = process(this.listaCliente, this.state);
    }

    load() {
        this.dbService.get("Cliente/ListaCliente").subscribe((result: OutputGet[]) => {
            //Guarda objetos
            this.listaCliente = result;
            this.gridData = process(this.listaCliente, this.state);
        });
    }


    openCli() {
        this.modalRef = this.modalService.show(NovoClienteComponent, { class: 'modal-xl modal-dialog-centered' });
    }

    pesquisarCliente() {

        this.palavra = (document.getElementById("pesq") as HTMLInputElement).value;
        
        if (this.palavra != "") {

            this.dbService.get("Cliente/PesquisaCliente/" + this.palavra).subscribe((result: OutputGet[]) => {

                    this.listaCliente = result;

                    this.gridData = process(this.listaCliente, this.state);

                });

        }

    }

}

I have a Componente1 with a Grid, and a Componente2 which is a modal, can after closing the modal (componente2 that appears on the Component1) perform a function of Componente1 without refreshing the page?

Answer 1

I found the answer to your question in Stackoverflow: ngx-bootstrap modal: How to get a Return value from a modal?.

Solution brief:

• declare a Subject (onClose, for example) in the modal component (Novoclientecomponent);
• and, through Bsmodalref in the calling component (Clientecomponent), subscribe to receive notification of modal closure including the information you want;
• in the method close of the Novoclientecomponent, before the .hide(), calling onClose.next() passing the value you want;
• Under Clientecomponent, when notified, perform the actions/methods necessary to update screen data.