<div *ngFor="let list of lists | async">
  <div class="card" style="width: 100%; margin-top: 10px">
    <div class="card-body">
      <h1 class="card-title">{{list.title}}</h1>
      <p class="card-content">{{list.content}}</p>
      <p class="card-short-content">{{list.shortContent}}</p>
      <p class="card-start-date">{{list.startDate}}</p>
      <p class="card-end-date">{{list.endDate}}</p>
      <p class="card-main-image">{{list.mainImage}}</p>
      <p class="card-images">{{list.images}}</p>
      <p class="card-area">{{list.area}}</p>
      <!--<p class="card-groups">{{list.groups}}</p>-->
      <!--<div *ngFor="let group of list |async">-->
        <!--<p class="card-groups">{{group.group_id}}</p>-->
      <!--</div>-->
      <a routerLink="/announce/{{list._id}}" class="card-link">Go to announce ...</a>
    </div>
  </div>
</div>