How to work with dynamic select in angular 4?

Watch the video:

Angular 5 - Select Dynamic

My real goal is to be able to implement a dynamic select of states and cities as shown in the 21 minutes and 38 seconds of this video but I'm having trouble for lack of experience, I do not know how to implement the html page, I do not know how to mount the logic in the components and nor in the services file, I'm totally lost, but searching on sites like StackOverFlow and facebook and blog communicates can accomplish these attempts below, that someone could help me complete this implementation.

Watch the HTML page

<div class="container">
  <select name="estado" id="estado" [(ngModel)]="codigo" (change)="buscarCidadePorEstado()">
    <option *ngFor="let estado of estados" [value]="estado.codigo">{{estado.nome}}</option>
  </select>

  <select name="cidade" id="cidade" [(ngModel)]="buscarCidadePorUF">
    <option *ngFor="let cidade of cidades" [value]="cidade.codigo">{{cidade.nome}}</option>
  </select>

  <br>
  <br>
  <br> UF Selecionada: {{codigo}}

  <br>
  <br> IBGE Selecionado: {{cidadePorEstado}}
</div>

This is my services file:

import { Cidade, Estado } from './../core/model';
import { Injectable } from '@angular/core';
import { Http, URLSearchParams, Headers } from '@angular/http';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class CidadesService {

  cidadesUrl = 'http://localhost:8080/cidades';
  estadosUrl = 'http://localhost:8080/cidades/estados';

  constructor(private http: HttpClient) { }

  listarTodasCidades() {
    return this.http.get<any[]>('${this.cidadesUrl}');
  }

  listarTodosEstados() {
    return this.http.get<any[]>('${this.estadosUrl}');
  }

}

This is my component:

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 {


  e: Array<any>;
  codigo: string;

  estados: Estado[] = [];
  cidades: Cidade[] = [];

  constructor(
    private cidadesService: CidadesService
  ) { }

  ngOnInit() {
    this.pesquisarEstados();

    this.pesquisarCidades();
    this.buscarCidadePorEstado();
  }

  pesquisarCidades() {
    this.cidadesService.listarTodasCidades()
      .subscribe(dados => {
        console.log(this.cidades = dados);
      });
  }


  pesquisarEstados() {
        this.cidadesService.listarTodosEstados()
        .subscribe(dados => { this.estados = dados;
          console.log(this.estados.map((e) => <any>e.codigo));

      });
  }


  buscarCidadePorEstado() {
    this.cidadesService.listarTodosEstados()
    .subscribe(dados => {
      this.estados = dados;
      this.estados.map((e) => <any>e.codigo);
    });
    if (this.estados.map((e) => <any>e.codigo === 'codigoEstado') {
      console.log('valores' + this.estados.map((e) => <any>e.codigo));
      return this.pesquisarEstados();

    }
  }

}

This snippet of code is able to bring in all cities:

 pesquisarCidades() {
    this.cidadesService.listarTodasCidades()
      .subscribe(dados => {
        console.log(this.cidades = dados);
      });
  }

YoucanseefromtheimageabovethatthejsonlistisbringingtheforeignkeyfromthestatecodewiththeStatusCodeattributes.

ThiscodesnippetreturnsallstatesandImadesuretobringallstatesbutonlydisplayingthestatecode,butifyounoticedintheimagebelowtheHTMLfileisabletoloadthestates.

pesquisarEstados(){this.cidadesService.listarTodosEstados().subscribe(dados=>{this.estados=dados;console.log(this.estados.map((e)=><any>e.codigo));});

WhatI'mneedingandcompletingtheprogramminglogicinthecomponentfileandputtingaconditionalthatloadsthecode1statusofthecodeitdoesacomparisonwiththeforeignkeyoftheentitycitywiththeattributecodeSTATUS:

Itriedwiththiscodesnippetbelow,butitdidnotworkoutandI'minneedofhelp.

buscarCidadePorEstado(){this.cidadesService.listarTodosEstados().subscribe(dados=>{this.estados=dados;this.estados.map((e)=><any>e.codigo);});if(this.estados.map((e)=><any>e.codigo==='codigoEstado'){console.log('valores'+this.estados.map((e)=><any>e.codigo));returnthis.pesquisarEstados();}}