---
updatedAt: 2025-07-15T08:33:29.000Z
agentTools:
  projectIndex: https://docs.appery.io/llms.txt
---

# Ionic QR Code Generator App

In this step-by-step tutorial, we'll demonstrate how to create an Ionic app that can generate a QR or barcode on a button click.

> 👍 Want to know more?
>
> Watch this video to learn how to generate and scan different code types, manage product information, and integrate with a backend database:

<HTMLBlock>{`
<iframe width="610" height="315" src="https://www.youtube.com/embed/Css8pXqWnBE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
`}</HTMLBlock>

You might also like to add our predefined **[QR Code Generator](https://docs.appery.io/docs/apperyio-examples#qr-code-generator)** plugin to your Ionic app.

# Creating App

1. From the **[Apps](https://docs.appery.io/docs/apperyio-platform-introduction#apps-tab-managing-projects)** tab, click **[Create new app](https://docs.appery.io/docs/1-creating-an-app-ui-palette#creating-new-app)**.
2. Select **Ionic Blank**, for the application name, enter ***QRCodeGenerator***, and click **Create**.

## Creating App UI

1. After the **[App Builder](https://docs.appery.io/docs/apperyio-app-builder-overview)** loads, open **Pages >[Screen1](https://docs.appery.io/docs/screens-and-tabs#pages-screens)** in the **[Project](https://docs.appery.io/docs/apperyio-visual-builder#project-view)** view tree.
2. Now, select the **[Page](https://docs.appery.io/docs/screens-and-tabs#pages-screens)** component from the breadcrumbs (you can also use the **[OUTLINE](https://docs.appery.io/docs/creating-app-ui-palette#outline-view)** view to locate the needed component) and set the page **[Footer](https://docs.appery.io/docs/screens-and-tabs#header-and-footer)** property to ***False*** as we will not use it in the app (you will also be asked to confirm changing the property):

<Image align="center" className="border" border={true} src="https://files.readme.io/26216fc-small-2023-05-12_20-24-12.png" />

3. Select **[ToolbarTitle](https://docs.appery.io/docs/11-creating-an-app-ui-ionic-5-ui-components-properties#toolbar-title)** of the screen header and under the **Common** tab, change its **Text** property to ***QR Code Generator***.
4. From **[PALETTE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#ui-components-palette-overview)**, drag the **[Input](https://docs.appery.io/docs/ionic-5-ui-components-properties#input)** component and drop it to the page.
5. Replace the default **InputWrapper1** **ItemLabel > Text** property with ***QR code info***:

<Image align="center" className="border" border={true} src="https://files.readme.io/84a4db7-small-2023-05-12_20-26-54.png" />

6. Now, drag the **[Button](https://docs.appery.io/docs/ionic-5-ui-components-properties#button)** component from **[PALETTE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#ui-components-palette-overview)** to the page.
7. Change the button **Common > Text** property to ***Generate***:

<Image align="center" className="border" border={true} src="https://files.readme.io/6cc584f-small-2023-05-12_20-28-11.png" />

8. Finally, drag the **[HTML](https://docs.appery.io/docs/ionic-5-ui-components-properties#html)** component from **[PALETTE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#ui-components-palette-overview)**, drop it to the page, and set its **Wrapper Style > Height** and **Wrapper Style > Width** properties to ***256px*** under the **Common** tab. This will be the size of our QR code:

<Image align="center" className="border" border={true} src="https://files.readme.io/2fb2cfc-small-2023-05-12_20-29-23.png" />

That’s all for the app UI and you can save your work by clicking the **SAVE** button in the **[App Builder Toolbar](https://docs.appery.io/docs/apperyio-visual-builder#toolbar)**.

Now we can start creating the app logic.

## Defining App Logic

To generate the QR code, we will use the [Angular X QR code library](https://github.com/Cordobo/angularx-qrcode) available on **[GitHub](https://github.com/)**.

1. First of all, we need to install the Angular X QR code library using [***Npm*** modules](https://docs.appery.io/docs/appbuilder-app-settings#npm-modules). Go to the **Project > App settings > Npm modules** tab. Click on the **Add** button under the **Dependency** section and insert the following for the module name: `angularx-qrcode` of `10.0.11` version:

<Image align="center" className="border" border={true} src="https://files.readme.io/1b7f563-small-2023-05-12_20-31-10.png" />

2. To import the module, go back to the **Screen1** page and open its **[MODULE](https://docs.appery.io/docs/apperyio-visual-builder#module-panel)** panel, then add the following code to the **Imports** section: `import { QRCodeModule } from 'angularx-qrcode':`:

<Image align="center" className="border" border={true} src="https://files.readme.io/8702fa1-small-2023-05-12_20-33-12.png" />

3. Then scroll down to locate the **NgModule Settings** section. Add the following code in `QRCodeModule` for the **Imports** value:

<Image align="center" className="border" border={true} src="https://files.readme.io/6e35c76-small-2023-05-12_20-34-01.png" />

4. Now, let's create a variable that will be used for returning the entered QR code info.\
   To do it, go to the **[Screen1 CODE](https://docs.appery.io/docs/apperyio-visual-builder#code-panel)** panel and under the **Variables** section, create a new variable: ***value*** of the **String** type and empty string  **Value** field:

<Image align="center" className="border" border={true} src="https://files.readme.io/6211bfe-small-2023-05-12_20-35-01.png" />

5. We will use a custom Angular component, so we need to add the following code to the **[HTML](https://docs.appery.io/docs/ionic-5-ui-components-properties#html)** component that we created on **Screen1**. In the page **[DESIGN](https://docs.appery.io/docs/apperyio-app-builder-overview#design-panel)** panel, select the component and click the **Edit** button for the **HTML** property located under the **Common** tab. In the HTML editor that opens, add the following code and save:

```html
<qrcode [qrdata]="value" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
```

<Image align="center" className="border" border={true} src="https://files.readme.io/e92c113-small-2023-05-12_20-37-43.png" />

> 👍
>
> Note that in this code, we specified the ***value*** variable created in the previous step as the data source.

6. Also, we need to add the ***value*** variable for the **Common >\[(ngModel)]** property of the **[Input](https://docs.appery.io/docs/ionic-5-ui-components-properties#input)** component:

<Image align="center" className="border" border={true} src="https://files.readme.io/42e1e36-small-2023-05-12_20-38-50.png" />

After that, we can add the functionality to show the QR code after the **[Button](https://docs.appery.io/docs/ionic-5-ui-components-properties#button)** click and to hide the QR code after changing the **Input** value.

7. First, for the **[HTML](https://docs.appery.io/docs/ionic-5-ui-components-properties#html)** component, set the **Common > Visible** property = ***False*** so that the QR code will not be visible until the **Generate** button is clicked:

<Image align="center" className="border" border={true} src="https://files.readme.io/81e0b78-small-2023-05-12_20-39-54.png" />

8. Now, to show the QR code on the **Generate** button click, unfold the **[EVENTS](https://docs.appery.io/docs/apperyio-visual-builder#events-tab)** tab from the bottom, and for the **[Button](https://docs.appery.io/docs/ionic-5-ui-components-properties#button)** component, create a new **[Click](https://docs.appery.io/docs/ionic-4-events-and-actions#common-events)** event.\
   This is done by selecting **[Set property](https://docs.appery.io/docs/ionic-4-events-and-actions#set-property)** as the **Action**. Now, define ***[Html1](https://docs.appery.io/docs/ionic-5-ui-components-properties#html)*** as a **Component Name**, leave its **Property name** as ***Visible*** and its **Value** as ***True***. Save the event:

<Image align="center" className="border" border={true} src="https://files.readme.io/bbbf5e2-small-2023-05-12_20-41-28.png" />

9. Finally, to hide the QR code after the input value changes, let's add one more event. Now, this will be a **[Change](https://docs.appery.io/docs/ionic-4-events-and-actions#ionic-45-events)** event created for the **[Input](https://docs.appery.io/docs/ionic-5-ui-components-properties#input)** component.\
   For the event, from the drop-down, select **[Set property](https://docs.appery.io/docs/ionic-4-events-and-actions#set-property)** as the **Action** and then select ***[Html](https://docs.appery.io/docs/ionic-5-ui-components-properties#html)*** for **Component Name**. Also, leave **Property name** as ***Visible*** and set its **Value** to ***False***. Save the event:

<Image align="center" className="border" border={true} src="https://files.readme.io/a0296de-small-2023-05-12_20-43-04.png" />

> 👍
>
> You can click **Show All** to review that both events have been added to the page and the **[EVENTS](https://docs.appery.io/docs/apperyio-visual-builder#events-tab)** tab looks like the following:

<Image align="center" className="border" border={true} src="https://files.readme.io/fb6a90d-small-2023-05-12_20-43-58.png" />

10. Save the app.

# App Testing

You are now ready to test your app: click the **TEST** button in the **[App Builder Toolbar](https://docs.appery.io/docs/apperyio-app-builder-overview#toolbar)** to run the app in the preview to launch the app in the browser and check how it works.

First, enter some test text into the input field, then click the **GENERATE** button and the QR code will be automatically generated.\
When you start typing some new text, the QR code will disappear until you click the **GENERATE** button again:

<Image align="center" className="border" width="30% " border={true} src="https://files.readme.io/c5d7de8-Animation3.gif" />

## Testing on Device

When your app version is ready, you might also like to [test](https://docs.appery.io/docs/9-testing-your-app) it on the device.

> 👍 Appery.io **Tester App**
>
> A great option to quickly test the app on the device is to use our **Appery.io Tester** app.\
> The app is free and available for both [iOS](https://apps.apple.com/app/id737478069) and [Android](https://play.google.com/store/apps/details?id=io.appery.tester\&hl=en).\
> You can check out [this](https://docs.appery.io/docs/apperyio-tester-app) page to learn more about using the **Appery.io Tester** app.