resulta que son nuevo en angular typescript y tengo el siguiente inconveniente.
Tengo dos lista desplegables (select) una me lista las regiones de un país (ej: norte, sur) y el otro me muestra una lista de ciudades. Lo que necesito es que cuando seleccione una región en el primer select, en el segundo select solo aparezcan las ciudades que pertenecen a la región seleccionada.
La información (id, nombre) de las regiones y ciudades están guardadas en tablas en mi base de datos de postgresql. Ya realice el select a mi base de datos y tengo la información de las regiones y ciudades guardadas en un array (regiones:Array=[];) y (ciudades:Array[];).
En el archivo html tengo un select en el cual se muestran los nombres de las regiones existentes en mi base de datos.
---- codigo html del primer select----------------------
<select [(ngModel)]="region.id_region (ngModelChange)="handleChange(region.id_region)">
<option *ngFor="let region of regiones" value="{{region.id_region}}">
{{region.nombre_region}}</option>
</select>
pero no se como hacer que en mi otro select se muestren las ciudades relacionadas con la región que elijo inicialmente. A mi método handleChange le esta llegando el id de la región que elijo en el primer select. Pero no se como condicionar dicho método para que se llene con las ciudades correspondientes a dicha región.
---------Codigo metodo handleChange (archivo .ts)---------
handleChange(id_region) {
this.ciudadRegion="resultado de la consulta select a mi base de datos dependiendo del id_region que recibe."
}
---- codigo html del segundo select--------------
<select>
<option *ngFor="let ciudad of ciudades" value="{{ciudad.id_ciudad}}">
{{ciudad.nombre_ciudad}}
</option>
</select>
Nota: No incluyo el código de usado para consultar las regiones y ciudades desde mi base de datos para no hacer demasiado extenso la pregunta.