Post
Ask Question

An Introduction to Angular and Storybook

Introduction

In modern web development, creating reusable and visually appealing UI components is essential. Angular, a popular JavaScript framework, provides a robust framework for building scalable web applications. Storybook, however, is a powerful tool for developing and showcasing UI components in isolation. This article will explore the combination of Angular and Storybook to create beautiful and reusable component libraries.

Getting Started

First, let's create a new Angular project and set up Storybook within it. Open your terminal and follow the steps below.

Step 1. Create a new Angular project using the Angular CLI.

ng new my-component-library

Step 2. Change into the project directory.

cd my-component-library

Step 3. Install Storybook using the following command.

npx storybook@latest init

This will set up Storybook within your Angular project.

Step 4. Start Storybook.

npm run storybook

If everything is set up correctly, you should see the Storybook interface running at http://localhost:6006.

How to create your first Angular Component?

Now that we have our Angular project with Storybook let's create our first Angular component and showcase it in Storybook.

Step 1. Generate a new Angular component using the Angular CLI.

ng generate component button

Step 2. Open the newly created button.component.ts file in your favorite code editor and modify it as follows,

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
    <button [ngClass]="buttonClass">{{ label }}</button>
  `,
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  @Input() label: string;
  @Input() buttonClass: string;
}

In this code, we have defined an Angular component called ButtonComponent. It accepts two inputs: label For the button text and buttonClass For applying custom CSS classes to the button element. The component's template consists of a simple button element that utilizes Angular's data binding and class binding.

Step 3. Open the button.component.css file and add some basic styling to the button.

button {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
}

Step 4. Open the button.stories.ts file in the src/app directory and modify it.

import { Meta, Story } from '@storybook/angular';
import { ButtonComponent } from './button.component';

export default {
  title: 'Components/Button',
  component: ButtonComponent,
} as Meta;

const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  buttonClass: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
  buttonClass: 'secondary',
};

In this code, we import the necessary dependencies from @storybook/angular and import our ButtonComponent. We define a Meta as an object that includes the title of our component and the component itself.

Next, we define a Template function that takes args as input and returns an object with props set to args. This function acts as a template for rendering our component in Storybook.

Finally, we create two stories: Primary and Secondary. Each story represents a different variation of our ButtonComponent. We provide the necessary arguments (label and buttonClass) for each story and bind them to the respective inputs of ButtonComponent.

Step 5. Open your browser and navigate to http://localhost:6006 (or the URL specified in your terminal) to view the Storybook interface. You should see the Button component listed under the Components category, with the Primary and Secondary variations available for selection.

Step 6. Click on the Primary or Secondary story to see the rendered ButtonComponent in the Storybook. You can interact with the component, view its properties, and observe how it looks in different states.

Congratulations! You have successfully created your first Angular component and showcased it in Storybook.

Conclusion

Angular and Storybook complement each other perfectly when building reusable and visually appealing component libraries. Angular provides a robust framework for creating components, while Storybook allows you to develop and showcase those components in isolation, making it easier to iterate and test different variations.

In this article, we covered the basic setup of Angular and Storybook and walked through creating a simple ButtonComponent and showcasing it in Storybook. This is just the tip of the iceberg, and there's much more you can do with Angular and Storybook to build comprehensive component libraries.

Remember to experiment, explore the various features and capabilities of Angular and Storybook, and leverage the power of both tools to create stunning UI components for your projects. Happy coding!


Similar Articles