public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<ng-container
  *ngIf="recipes && recipes.length > 0; then recipesList; else notFound"
></ng-container>
<ng-template #recipesList>
  <ul class="recipes-list">
    <li *ngFor="let recipe of recipes" 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 *ngIf="recipe.strInstructions" 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" *ngIf="recipe.strCategory">
              <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.strMeal | slugify]"
            [state]="{ id: recipe.idMeal }"
            class="btn"
          >
            Read more
            <span class="btn__icon"> &rightarrow;</span>
          </a>
        </footer>
      </article>
    </li>
  </ul>
  <a routerLink="" class="btn">
    <span class="btn__icon">&leftarrow; </span>Back to recipes
  </a>
</ng-template>
<ng-template #notFound>
  <div class="not-found">
    <div class="not-found__result">
      No recipe match your query: {{ query }}.
    </div>
    <a routerLink="" class="btn">
      <span class="btn__icon">&leftarrow; </span>Back to your recipes
    </a>
  </div>
</ng-template>