how to display a list of fields and add fields dynamically

You need to create an array of objects that contain parameters you want to include in the inputs. To add/remove input, you just need to add/remove those objects and Angular will update the app view automatically. Here is an example:

HTML:

<div class="md-form" *ngFor="let input of inputs">
  <input mdbInput type="text" id="input.id" class="form-control">
  <label for="input.id" class="">{{ input.label }}</label>
</div>

<button (click)="add('test-4', 'Example label 4')" type="button" mdbBtn color="primary" mdbWavesEffect>Add input</button>
<button (click)="remove(inputs.length - 1)" type="button" mdbBtn color="primary" mdbWavesEffect>Remove input</button>

TS:

  inputs = [
    { id: 'test-1', label: 'Example label 1'},
    { id: 'test-2', label: 'Example label 2'},
    { id: 'test-3', label: 'Example label 3'}
  ];

  add(id: string, label: string): void {
    this.inputs.push({ id: id, label: label });
  }

  remove(index: number): void {
    this.inputs.splice(index, 1);
  }