Web Components using Angular — Are you sure?

A picture is worth a 1000 words, so here is one that pretty much summarizes what we are looking to prevent in this article.

Credits: Giphy

Yup, that’s right, accidental button presses. We don’t want that to happen, do we?

In this article, we will go through the process of creating a web component that requires confirmation, I am gonna call it ‘Are you sure’ or ‘ays’ in short.

TL;DR: If you’re only interested in using this component and not necessarily building it, find the project here.

To proceed, you need to have a beginner level understanding of Angular. If you haven’t already, install Angular using npm install -g @angular/cli.

Please note that I am using Angular version 6.0.3. You might run into dependency issues if you’re using a different version, which can be resolved using compatible versions of the dependencies (You can refer Angular’s GitHub for help finding a compatible version).

Getting Started

Let’s start by creating a new Angular project.

ng new ays

Now, if you’re using the same Angular version as I am, in the project directory, run npm install --save rxjs@6.0.0 to install the compatible version of RxJs.

Let’s verify that the project is running, run ng serve and go to http://localhost:4200 in your browser.

Angular starter page

If you see the above screen, you’re good to go! Now, what we need is a button, when clicked opens up a modal, with the text ‘Are you sure?’ and two buttons for Yes and No. We will create this button as a component, and convert it to a web element.

Creating AYS component

ng g c ays -s -t -v None

‘g’ is short for Generate, ‘c’ is short for a Component. ays is the name of the component. -s flag says that the component will have inline style and -t flag says that the component will have an…