MDT5_Angular/src/app/app.component.html

<app-header></app-header>
<h1>Einkaufszettel1</h1>
<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
<h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
<div>
  <form  (ngSubmit)="saveTask(form.value)" #form="ngForm">
    <div class="form-group">
      <div><label for="title">Titel* </label></div>

      <div>
        <input type="text" class="form-control" name="title" id="title" #title ngModel required/>
      </div>

    </div>

    <div class="form-group">
      <div><label for="image">Bild-URL* </label></div>

      <div>
        <input type="text" class="form-control" name="title" id="image" #image ngModel required/>
      </div>
    </div>

    <div class="form-group">
      <div><label>Kategorie* </label></div>
      <div>
        <input type="text" class="form-control" id="kategorie" #kategorie ngModel required/>
      </div>
    </div>

    <div class="form-group">
      <div><label for="menge">Menge* </label></div>
      <div>
        <input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
      </div>
    </div>

    <div class="form-group">
      <div><label for="kommentar">Kommentar: </label></div>
      <textarea id="kommentar" #kommentar cols="20" rows="3" #text>
    </textarea>
    </div>

    <div class="form-group">
      <button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
        Eintrag anlegen
      </button>
    </div>

    <div>
      <button (click)="deleteAllEntries()">
        Alle Einträge löschen
      </button>
    </div>
    <div>
      <button (click)="deleteLastEntry()">
        Letzten Eintrag Löschen
      </button>
    </div>

  </form>
</div>

<div class="container">
  <div class="row custom-wrapper">
    <div class="col-md-12">
      <!-- Form starts -->
      <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
        <div class="group-gap">
          <div class="d-block my-3">
            <div class="mb-3">
              <select class="custom-select" (change)="changeKategorie($event)" formControlName="kategorieName">
                <option value="">Wählen sie eine Kategorie</option>
                <option *ngFor="let kategorie of Kategorien" [ngValue]="kategorie">{{kategorie}}</option>
              </select>
              <!-- error block -->
              <div class="invalid-feedback" *ngIf="isSubmitted && kategorieName.errors?.required">
                <sup>*</sup>Bitte geben sie eine Kategorie ein!
              </div>
            </div>
          </div>
        </div>
        <!-- Submit Button -->
        <button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
      </form><!-- Form ends -->
    </div>
  </div>
</div>

<app-footer></app-footer>