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.

Why Angular

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.

Placeholders

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:

• width and height attributes set on the img element
• some width CSS value (e.g. 10px, 100%, calc(100vw - 10px))
• height:auto as a CSS property

For example, for an image with the class test-img, the CSS should be defined as:

.test-img {
 /* These next two lines are critical for the new browser feature. */
 width: 100%;
 height: auto; /* This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image */
}

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:

<img
 ixImg
 path="examples/pione.jpg"
 sizes="calc(100vw - 128px)"
 class="test-img"
 width="66"
 height="100"
/>

You can also read more about how our support for placeholder behavior works.

Lazy Loading

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.

The new 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.

Native lazy loading has many benefits over previous versions of lazy loading. One key advantage is that it will work before the page’s JavaScript has loaded, and will even work in browsers that don’t support JavaScript. If a browser doesn’t support native lazy loading, it will just fall back to loading that image non-lazily.

You can learn more about our method for lazy loading here.

Conclusion

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.