Как сделать мой код динамическим (не жестко закодированным)?

Question

Мне нужно мнение о моем коде ниже, чтобы увидеть, жестко ли он написан или нет. И если это жестко запрограммировано, как я могу изменить это на динамическое? Я использовал Ionic 4 (внешний интерфейс) и Firebase-Cloud Firestore (внутренний интерфейс).

<!-- PRODUCT CATEGORY TO CHOOSE -->

  <ion-item>
    <ion-label>Product Category</ion-label>
    <ion-select formControlName="productCategory" placeholder="Select One">
      <ion-select-option value="food">Food</ion-select-option>
      <ion-select-option value="drinks">Drinks</ion-select-option>
      <ion-select-option value="fashion">Fashion</ion-select-option>
      <ion-select-option value="stickers">Stickers</ion-select-option>
      <ion-select-option value="accesories">Accessories</ion-select-option>
      <ion-select-option value="schoolsupp">School Supplies</ion-select-option>
      <ion-select-option value="gadgetsacc">Gadget's Accessories</ion-select-option>
    </ion-select>
  </ion-item>

Для вашей информации, первоначально категории не хранятся в firestore.

Я такжеподелиться снимком экрана с коллекцией товаров.

Как мне сделать его динамичным, чтобы категории можно было извлечь из пожарного магазина в форму, чтобы продавец (продавец) мог выбрать категорию своего товара при добавлении своих товаров?