public/projects/angular-small-apps/apps/recipes/src/app/components/recipes-list/recipes-list.component.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<ul class="recipes-list">
  <li *ngFor="let recipe of recipes | async" class="recipes-list__item">
    <article class="card">
      <header class="card__header">
        <img
          src="{{ recipe.strMealThumb }}"
          alt="{{ recipe.strMeal }} picture"
          class="card__thumb"
        />
        <h2 class="card__title">{{ recipe.strMeal }}</h2>
      </header>
      <div class="card__body">
        {{
          recipe.strInstructions.length > 120
            ? (recipe.strInstructions | slice: 0:120) + "&hellip;"
            : recipe.strInstructions
        }}
      </div>
      <footer class="card__footer">
        <dl class="meta">
          <div class="meta__item">
            <dt class="meta__term">Category:</dt>
            <dd class="meta__description">{{ recipe.strCategory }}</dd>
          </div>
          <div class="meta__item" *ngIf="recipe.strTags">
            <dt class="meta__term">Tags:</dt>
            <dd class="meta__description">
              {{ recipe.strTags | formatComma }}
            </dd>
          </div>
        </dl>
        <a [routerLink]="['/recipe/', recipe.slug]" class="btn">
          Read more
          <span class="btn__icon"> &rightarrow;</span>
        </a>
      </footer>
    </article>
  </li>
</ul>