Execute one command after completing another command in Angular 9

I read the information of my provinces from Api and then I want to get the information of cities from Api, but when I want to apply for the city, the property state is still empty and this operation is not done, how can I solve my problem?

        export class StateComponent implements OnInit {
          constructor(public dialog: MatDialog, private _service: AssessmentServiceService) { }
         ngOnInit(): void {
        this.flagProgressBar = true;
        this._service.getDataStates().subscribe(
          (res: IState[]) => {
           this.state = res;
            
          }
        )
        for (const index in this.state) {
          this._service.getDataCitys(this.state[index].stateId).subscribe(
            (res: ICity[]) => {
              for (const indexC in res) {
                this.city.push(res[indexC]);
              }
            }
          )
        }
      }
      flagProgressBar: boolean = false;
      state: IState[] = [];
      city: ICity[] = [];
   }

Question 2: Which method starts working after ngOnInit is finished? I want to change the flagProgressBar after all operations are completed.

Source: Angular Questions