This video is available to students only

Adding common components. Card, Button, Input, List, ListItem

Using previously configured Storybook in this lesson we will create and prepare a few common components that later we’ll use in apps.

Table of Contents

In this lesson, we'll create the most basic component we will use in later lessons.

Styles#

As I previously mentioned, we won't focus on CSS in this course. Please paste my styles into your repository to make our code look nice.

To make it work with Storybook, place these styles in apps/storybook/src/styles.css and then modify the file apps/storybook/.storybook/preview.ts to look in the code block below. It's a simple Webpack trick to use style-loader which is not a standard thing for Angular application and import a CSS file as a global style.

ButtonComponent#

We have a few buttons in our design specification. The button component is relatively simple. In fact, it's just a wrapper for the native button element.

Let's start with a standard cleanup. Go to libs/components/button/src/lib and remove the automatically generated module. We don't need that because we're going to use a new Angular feature, standalone components.

In the same directory, create a file called button.component.ts. Now, we can focus on component code.

First, create an empty component with an empty template. You can use a generator if you want.

Then, let's switch to the Storybook. In apps/storybook/src/app/, I'm creating a new directory button. Next, I'm creating a new Angular component called StorybookButtonComponent which I will use as a wrapper in my Storybook story.

In this wrapper component, I'm placing all planned usages of the component. Of course, we need to configure a story, so next to file storybook-button.component.ts, create a new file button.stories.ts.

At this point, we have everything we need to create our component. We have an empty component where we can place our code and a quick preview in Storybook.This way of creating components has a huge advantage because it allows you to focus only on a smart piece of application. You won't be distracted by anything, and it's easier to create a perfect component. In addition, as an extra benefit, you automatically document your work.

After all my changes, the code looks like this.

This lesson preview is part of the Next-Level Angular Apps with NX course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

Unlock This Course

Get unlimited access to Next-Level Angular Apps with NX, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Next-Level Angular Apps with NX