title: Calling observables synchronously one after another in Angular
body: <p><strong>I have the following service calls available:</strong><br>
  productService.GetAllProducts()<br>
  productService.DeleteProduct()<br>
  productService.GetCategories()<br>
  productService.DeleteCategory() </p>
  
  <p><strong>In sudo code I need to do the following in my component:</strong></p>
  
  <ol>
  <li><p>Get a list of products using productService.GetAllProducts().</p></li>
  <li><p>Loop through the list of products and call productService.DeleteProduct() for each product.</p></li>
  <li><p>Once I can confirm the above deletes are all complete (due to db constraints) I need to then get a list of categories using productService.GetCategories(). Loop through each category and call productService.DeleteCategory().</p></li>
  </ol>
  
  <p>I am aware that my life would be a lot easier if I had better backend calls to do bulk deletes, but I do not have a choice in this case. I need to follow the pattern of getting a list, looping through it, doing an individual delete one each item.</p>
  
  <p>Is it even possible doing what I am trying to do using flatMap and the observable complete param? My biggest problem is knowing when the code is finished deleting all of the products before searching for and deleting all of the categories.</p>