How do I refresh the Angular Primeng Automatic Dropdown?

Question

Be able to implement a Dropdown in a registration form as you can see in the figure below in the field Style;

If you stop to observe in the right corner of the field has an icon, when clicking on the icon it shows a small form that I call quick registration style see the image below;

There is nothing wrong with this small form in the middle of the screen, it was able to register successfully, but after registering it does not automatically insert the new record registered in the Dropdown field Style

See how it happens, I just typed Creating a Test

Managed to save successfully, but did not update from Dropdown automatically, see;

Only after I refreshed the page did he show the record on the dropdown list as you can see below;

I would like when entering the registration the Dropdown was updated automatically, I have no idea how to do it, someone could give me a help?

here is the code responsible;

 import { CervejaService } from './../cerveja.service';
import { ToastyService } from 'ng2-toasty';
import { FormControl } from '@angular/forms';
import { Cerveja, Estilo } from './../../core/model';
import { ErroHandlerService } from './../../core/erro-handler.service';
import { EstiloService } from './../../estilos/estilo.service';


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

@Component({
  selector: 'app-cevejas-cadastro',
  templateUrl: './cevejas-cadastro.component.html',
  styleUrls: ['./cevejas-cadastro.component.css']
})
export class CevejasCadastroComponent implements OnInit {

  estilos = [];
  cerveja = new Cerveja();
  estilo = new Estilo();

  origem: String = 'Nacional';

  sabor = [
    { label: 'Adocicada', value: 'ADOCICADA' },
    { label: 'Amarga', value: 'AMARGA' },
  ];

  display: Boolean = false;

  showDialog() {
      this.display = true;
  }

  hideDialog() {
      this.display = false;
  }

  constructor(
    private estiloService: EstiloService,
    private erroHandler: ErroHandlerService,
    private toasty: ToastyService,
    private cervejasService: CervejaService
   ) { }


  ngOnInit() {
   this.carregarEstilos();
  }

  salvar(form: FormControl) {
    this.cervejasService.adicionar(this.cerveja)
    .then(() => {
      this.toasty.success('Cerveja adicionado com sucesso!');
      form.reset();
      this.cerveja = new Cerveja();
    })
    .catch(erro => this.erroHandler.handle(erro));
   }

   salvarEstilos(form: FormControl) {
    this.estiloService.adicionar(this.estilo)
    .then(() => {
      this.toasty.success('Estilo adicionado com sucesso!');
      form.reset();
      this.estilo = new Estilo();
    })
    .catch(erro => this.erroHandler.handle(erro));
   }

  carregarEstilos() {
    return this.estiloService.listarTodas()
      .then(estilos => {
        this.estilos = estilos.map(c => ({ label: c.nome, value: c.codigo }));

      })
      .catch(erro => this.erroHandler.handle(erro));
  }
}

This section is responsible for loading the Dropdown

carregarEstilos() {
    return this.estiloService.listarTodas()
      .then(estilos => {
        this.estilos = estilos.map(c => ({ label: c.nome, value: c.codigo }));

      })
      .catch(erro => this.erroHandler.handle(erro));
  }

And this is saving:

 salvarEstilos(form: FormControl) {
    this.estiloService.adicionar(this.estilo)
    .then(() => {
      this.toasty.success('Estilo adicionado com sucesso!');
      form.reset();
      this.estilo = new Estilo();
    })
    .catch(erro => this.erroHandler.handle(erro));
   }

Answer 1

By the structure of your code, just call the method carregarEstilos within the method salvarEstilos

salvarEstilos(form: FormControl) {
    this.estiloService.adicionar(this.estilo)
    .then(() => {
      this.toasty.success('Estilo adicionado com sucesso!');
      form.reset();
      this.estilo = new Estilo();
      this.carregarEstilos(); // <------ Aqui
    })
    .catch(erro => this.erroHandler.handle(erro));
   }