Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Creating Custom Stencil Components

Explore how to build custom Stencil web components by generating and coding image and gallery components. Learn to retrieve JSON data, handle events, and render dynamic image galleries with efficient component design.

We'll cover the following...

Creating custom components

Let’s create our custom Stencil components.

We’ll be creating the following mini-project that retrieves online JSON data and uses it to generate a thumbnail image gallery where information about each image can be “written” to a panel.

First steps

Within the system terminal (within a new Stencil project), we use the following commands to create the following new Web Components:

npx stencil generate image-component
npx stencil generate image-gallery-component

Note: The npx command is used to generate Web Components with Stencil when Stencil is not installed globally. If Stencil is installed globally, we run the above commands without the npx prefix. ...