Using Custom Components in Stencil Applications

The image gallery component

Let’s implement a custom image gallery component and use it in a Stencil application.

image-gallery-component.tsx

This component will be used to perform the following tasks:

• Retrieve remote JSON data and parse it for rendering
• Listen for selected images and render the captured data to the DOM
• Create a new <mi-image> component to display each image and its data

Although it is a little more involved than our image-component.tsx file, the functionality is relatively lightweight to implement thanks to both the Stencil API methods and the Fetch API that we’ll be making use of.

In the src/components/image-gallery-component/image-gallery-component.tsx component class, make the following amendments (highlighted):