ngx responsive image

Load properly sized images in an Angular app using the Angular CDK BreakpointObserver to change image sources on breakpoint changes.

Install

npm install --save ngx-responsive-image@latest @angular/cdk@latest

Getting started

Import the NgxResponsiveImageModule and the Angular CDK ObserversModule to app.module.ts.

import { ObserversModule } from '@angular/cdk/observers';
import {
  DEFAULT_BREAKPOINTS,
  DEFAULT_WIDTHS,
  NgxResponsiveImageModule
} from 'ngx-responsive-image';

@NgModule({
  declarations: [AppComponent],
  imports: [
    ObserversModule,
    NgxResponsiveImageModule.forRoot(DEFAULT_BREAKPOINTS, DEFAULT_WIDTHS)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Making an image responsive

First if the image is on a component in a vhild module import NgxResponsiveImageModule into the module (without calling forRoot()).

Add the responsiveImage directive to the img

<img responsiveImage />

If you want a placeholder/default image, which is recommened if you are using Universal set the src atributes to the placeholder url.

<img responsiveImage src="assets/images/placeholder.jpg" />

Set the imgSrc attribute to the CDN url of the image replace the static width value with :width

<img
  responsiveImage
  src="assets/images/placeholder.jpg"
  imgSrc="http://imageflare/image1/:width"
/>

If you a binding to a component property in that case remember to use [imgSrc]

If you are using custom breakpoints

You can set custom breakpoints when call NgxResponsiveImageModule.forRoot() be sure to supply the correpsonding image widths to be used in the same order as the breakpoints.

@NgModule({
  declarations: [AppComponent],
  imports: [
    NgxResponsiveImageModule.forRoot(
      [Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape],
      [600, 960]
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})

If your url requirements are more complicated than just replacing the width

Set the manual attribute to true on the image(s) and use the breakpointUp event.

<img
  imgSrc="http://localhost:4000/cdn/banner/:width"
  src="assets/images/placeholder.jpg"
  responsiveImage
  [manual]="true"
  alt="test manual image"
  (breakpointUp)="updateImage($event, img)"
  mat-card-image
  #img
/>

updateImage(event: BreakpointChangeEvent, img: HTMLImageElement) {
  this.renderer2.setAttribute(
    img,
    'src',
    event.imgSrc.replace(':width', event.width.toString())
  );
}