We’re constantly soliciting user feedback to ensure we provide tools that serve the diverse needs of the developer community. Our users have asked for support for Angular applications, and we listened. Today we’re announcing the launch of an Angular Client Library for imgix. This addition to our suite of SDKs will allow developers to easily serve images in their Angular applications.
This post walks you through the features of our new Angular library, including placeholders and lazy loading.
Angular is a modern frontend application framework that was developed by Google in 2010 and allows developers to build single-page applications. The framework was significantly reworked in 2016, and our Angular library is built to integrate with this newer version.
We’re committed to bringing the power of imgix to all of the most popular frontend frameworks, including React, Angular, and Vue. With the addition of the Angular library, we are now providing full coverage to developers who use these frameworks. (You can find our React library here, and our Vue library here.)
Introduction to Our Angular Library
imgix’s Angular Library follows a format similar to our other frontend libraries. Developers can now easily integrate Angular applications with our API.
With our Angular library, developers can easily render responsive images using our
srcset generation feature. This ensures the image looks good regardless of device or screen size. The library also allows developers to resize images to a fixed size while responding to device pixel ratio.
Our Angular library follows the API of an
<img> element as much as possible to make it easy for developers. Users can also apply the
<picture> element to implement art direction.
The library includes the same placeholder behavior that was introduced in our Vue Library. By default, the library provides flexible image rendering using the image’s width and height attributes.
The requirements necessary to support placeholder behavior are as follows:
heightattributes set on the img element
widthCSS value (e.g. 10px, 100%, calc(100vw - 10px))
height:autoas a CSS property
For example, for an image with the class
test-img, the CSS should be defined as:
Regarding the actual
<img> tag: the width and height attributes can be any value as long as their aspect ratio is the same as the image’s aspect ratio. E.g.
width = 100, height = 50 is fine, as is
width = 2, height = 1.
In our example, the image has an aspect ratio of ~0.66:1, so we have set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.
In an Angular template, this would appear as:
You can also read more about how our support for placeholder behavior works.
Our lazy loading feature includes the hybrid Native + Intersection Observer approach that we pioneered in our Vue library. We use native lazy loading if the browser supports it, and will fall back to a library if lazy loading is not supported.
loading attribute supports this behavior for images (and iframes). There are a few valid settings for this attribute, but most of the time developers will want to set
loading="lazy" on images they wish to load lazily.
You can learn more about our method for lazy loading here.
This user-requested library provides an imgix integration for Angular applications that includes our updated placeholder feature and lazy loading strategy. Show us how you’re using the library by tweeting us (@imgix). You can also reach out if you have any questions.