in angular 17 how to display a placeholder until the image is completly loaded using @defer

Question

This is a list of items each one contain an image I want to display the placeholder untill the image in that card is loaded what is the condition in the @defer() to make it

@for (item of places; track $index) {
    @defer (){
    <div [routerLink]="['/place/'+item.id]" class="row item container-fluid py-2" style="cursor: pointer;">
        <div class="col-lg-4">
            <img style="height: 250px;" src="{{item.image}}" alt="">
        </div>
        <div class="col-lg-8 pt-4">
            <h4>{{item.name}}</h4>
            <h5 class="text-secondary">{{item.adress}}</h5>
            <h6 class="text-secondary">
                {{item.bio| truncate:200 }}

            </h6>
            <div class="d-flex align-items-center">
                <p class="fw-bold m-0 me-2">{{calculateAverageRate(item)| number:'1.1-1'}}/5</p>
                <div class="rating">
                    <input value="5" name="rating" id="star5" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=5? '#6f00ff' : '#acacac'" for="star5"></label>
                    <input value="4" name="rating" id="star4" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=4? '#6f00ff' : '#acacac'" for="star4"></label>
                    <input value="3" name="rating" id="star3" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=3? '#6f00ff' : '#acacac'" for="star3"></label>
                    <input value="2" name="rating" id="star2" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=2? '#6f00ff' : '#acacac'" for="star2"></label>
                    <input value="1" name="rating" id="star1" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=1? '#6f00ff' : '#acacac'" for="star1"></label>
                </div>
            </div>

        </div>
    </div>}
    @placeholder {
<div>placeholder </div>
    }

The defer condition is empty in my code what is the condition to fill it

Answer 1

You can use the angular directive NgOptimizedImage to make a place holder or use the variety of options to achieve what you need. Please find below working example when I use place holder with a dataURL image which will load before the image loads,

Full Docs for NgOptimizedImage

snippet

<img style="height: 250px;" [ngSrc]="item.image" alt="" height="250" width="500" [placeholder]="placeholder"/>

full code

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { CommonModule, NgOptimizedImage } from '@angular/common';
import { PLACEHOLDER_CONSTANT } from './placeholder';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgOptimizedImage, CommonModule],
  template: `
    @for (item of places; track $index) {
    <div class="row item container-fluid py-2" style="cursor: pointer;">
        <div class="col-lg-4" style="position: relative">
            <img style="height: 250px;" [ngSrc]="item.image" alt="" height="250" width="500" [placeholder]="placeholder"/>
        </div>
        <div class="col-lg-8 pt-4">
            <h4>{{item.name}}</h4>
            <h5 class="text-secondary">{{item.address}}</h5>
            <h6 class="text-secondary">
                {{item.bio }}

            </h6>
            <div class="d-flex align-items-center">
                <p class="fw-bold m-0 me-2">{{15| number:'1.1-1'}}/5</p>
                <div class="rating">
                    <input value="5" name="rating" id="star5" type="radio">
                    <label [style.color]="1>=5? '#6f00ff' : '#acacac'" for="star5"></label>
                    <input value="4" name="rating" id="star4" type="radio">
                    <label [style.color]="2>=4? '#6f00ff' : '#acacac'" for="star4"></label>
                    <input value="3" name="rating" id="star3" type="radio">
                    <label [style.color]="5>=3? '#6f00ff' : '#acacac'" for="star3"></label>
                    <input value="2" name="rating" id="star2" type="radio">
                    <label [style.color]="6>=2? '#6f00ff' : '#acacac'" for="star2"></label>
                    <input value="1" name="rating" id="star1" type="radio">
                    <label [style.color]="7>=1? '#6f00ff' : '#acacac'" for="star1"></label>
                </div>
            </div>

        </div>
    </div>
    }
  `,
})
export class App {
  placeholder = PLACEHOLDER_CONSTANT;
  name = 'Angular';
  places = [
    {
      image: 'https://placehold.co/6000x4000',
      name: 'test',
      address: 'test',
      bio: 'test',
    },
    {
      image: 'https://placehold.co/6000x4000',
      name: 'test',
      address: 'test',
      bio: 'test',
    },
    {
      image: 'https://placehold.co/6000x4000',
      name: 'test',
      address: 'test',
      bio: 'test',
    },
    {
      image: 'https://placehold.co/6000x4000',
      name: 'test',
      address: 'test',
      bio: 'test',
    },
  ];
}

bootstrapApplication(App);

Stackblitz Demo