Angular Components

AbsoluteJS provides abs-image, raw streaming slot components, and Angular-native @defer streaming integration.

#Image Component

The Angular Image component uses the abs-image selector and is a standalone component. It provides responsive srcset generation, WebP/AVIF format negotiation, and on-demand optimization through the /_absolute/image endpoint.

HTML

<!-- app.component.html -->
<abs-image
  src="/images/hero.jpg"
  alt="Hero banner"
  [width]="1200"
  [height]="600"
  [priority]="true"
></abs-image>

<!-- Fill mode -->
<div style="position: relative; width: 100%; height: 400px;">
  <abs-image
    src="/images/bg.jpg"
    alt="Background"
    [fill]="true"
    style="object-fit: cover;"
  ></abs-image>
</div>

#Image Inputs

The Angular Image component uses input() signals for each prop. All available inputs:

srcpath to the source image (required)

altalternative text for accessibility (required)

widthintrinsic width in pixels. Required unless fill is set.

heightintrinsic height in pixels. Required unless fill is set.

fillwhen true, the image fills its parent container

qualityoutput quality from 1 to 100

sizesresponsive sizes attribute

prioritypreload the image and disable lazy loading

loading"lazy" or "eager"

unoptimizedskip optimization and serve the original

styleinline styles

classNameCSS class name

#Template Usage

Use the abs-image element directly in your Angular templates. Bind dynamic values with square bracket syntax and pass static strings as regular attributes:

HTML

<!-- app.component.html -->
<abs-image
  src="/images/hero.jpg"
  alt="Hero banner"
  [width]="1200"
  [height]="600"
  [priority]="true"
></abs-image>

<!-- Fill mode -->
<div style="position: relative; width: 100%; height: 400px;">
  <abs-image
    src="/images/bg.jpg"
    alt="Background"
    [fill]="true"
    style="object-fit: cover;"
  ></abs-image>
</div>

The component generates the appropriate srcset and sizes attributes at render time and routes image requests through the /_absolute/image optimization endpoint.

#Streaming Components

Angular has both layers of the streaming model. Use abs-stream-slot when you want the raw transport directly. Use Angular's @defer authoring surface when you want framework-native placeholder and resolved UI.

These primitives are only enabled when the route uses handleAngularPageRequest with { collectStreamingSlots: true } in the options argument.

AbsoluteJS lowers @defer into the shared slot transport and routes the client handoff through Angular's own rendering model so streamed regions stay compatible with Angular's hydration rules.

Raw transport with abs-stream-slot:

@Component({
  standalone: true,
  imports: [StreamSlotComponent],
  template: `
    <main>
      <h1>Dashboard</h1>

      <abs-stream-slot
        id="angular-activity"
        [fallbackHtml]="'<div class=&quot;card-skeleton&quot;>Loading activity...</div>'"
        [resolve]="loadActivityHtml"
      />
    </main>
  `
})
export class DashboardComponent {
  loadActivityHtml = async () => renderActivityHtml(await this.loadActivity());

  private async loadActivity() {
    return fetchActivity();
  }
}

Framework-native transport with @defer:

@Component({
  standalone: true,
  imports: [DeferSlotComponent],
  template: `
    <main>
      <h1>Dashboard</h1>

      @defer (on timer(0ms)) {
        <app-activity-panel [activity]="activity"></app-activity-panel>
      } @placeholder {
        <app-activity-skeleton></app-activity-skeleton>
      }
    </main>
  `
})
export class DashboardComponent {
  activity = this.loadActivity();
}

PreviousOverview NextSPA