How to work with ComboBox dependent on Angular?

This is the service file:

import { Estado, Cidade } from './../../core/model';
import { CidadesService } from './../cidades.service';
import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';


@Component({
  selector: 'app-cidades-pesquisa',
  templateUrl: './cidades-pesquisa.component.html',
  styleUrls: ['./cidades-pesquisa.component.css']

})
export class CidadesPesquisaComponent implements OnInit {

  cidades: Cidade[] = [];
  estados: Estado[] = [];
  constructor(
    private cidadesService: CidadesService
  ) { }

  ngOnInit() {
        this.carregarCidades();
        this.carregarEstados();
  }



  carregarCidades() {
    this.cidadesService.listarTodasCidades()
      .subscribe(dados => {
       this.cidades = dados;
      });
  }


  carregarEstados() {
    this.cidadesService.listarTodosEstados()
    .subscribe(dados => {
      this.estados = dados;
     });
  }


}

Within the services file this is the method responsible for listing the states:

 carregarEstados() {
        this.cidadesService.listarTodosEstados()
        .subscribe(dados => {
          this.estados = dados;
         });
      }

Thisisanothercity:

carregarCidades(){this.cidadesService.listarTodasCidades().subscribe(dados=>{this.cidades=dados;});}

ThisismyHTMLfile:

<divclass="container">
<form>
    <div class="ui-g">
        <div class="ui-g-3">
            <select name="estado" id="estado" [(ngModel)]="carregarEstados">
                <option  *ngFor="let estado of estados" [value]="estado.codigo">{{estado.nome}}</option>
              </select>
        </div>

        <div class="ui-g-3">
            <select name="cidade" id="cidade" [(ngModel)]="carregarCidades">
                <option  *ngFor="let cidade of cidades" [value]="cidade.codigoEstado">{{cidade.nome}}</option>
              </select>
         </div>

  </div>

</form>
</div>

What I am trying to do is to list all the states the second ComboBox can load all cities corresponding to the states, type if I select in the first ComboBox SP it will only bring all the cities of the state of Sao Paulo, I do not know if you can do this implementation only in HTML with * ngFor , I do not know if you have to create a method that does this implementation and then it complements with something in HTML, I do not know, I have no idea I made several unsuccessful attempts.

OBS: What could be done is to create a method in the service file that the state to be selected from the code attribute in the state entity is equal to the attribute code state of the city entity.

I look forward to suggestions