Cards

HTML

<section class="filter">
  <div class="wrapper">
    <h1>{{ 'FILTER.TITLE' | translate }}</h1>

    <form [formGroup]="eventForm" class="filter">
      <select formControlName="selectedDate" (change)="onDateChange()">
        <option value="2023-11-22">2023. November 22.</option>
        <option value="2023-11-23">2023. November 23.</option>
        <option value="2023-11-24">2023. November 24.</option>
      </select>
    </form>

    <div class="output">
      <div class="card" *ngFor="let item of eventData">
        <h4 class="card-title">{{ item.title }}</h4>
        <ul class="card-list">
          <li class="card-list-item"><i class="icon icon-map"></i> {{ item.place }}</li>
          <li class="card-list-item"><i class="icon icon-date"></i> {{ item.date.date }}</li>
          <li class="card-list-item"><i class="icon icon-clock"></i> {{ item.date.from }} - {{ item.date.to }}</li>
        </ul>
      </div>
    </div>
  </div>
</section>