How to Create a Component in Angular with Storybook Version 7.0

To create a new Angular component with Storybook 7.0, follow these steps:

1. Install Angular CLI globally (if you haven’t already):

npm install -g @angular/cli

2. Create a new Angular project:

ng new my-angular-app

3. Go to the project directory:

cd my-angular-app

4. Install Storybook CLI globally (if you haven’t already):

npm install -g @storybook/cli

5. Initialize Storybook in your Angular project:

npx sb init

6. Start Storybook:

npm run storybook

Now that you have Storybook set up, create a new Angular component:

7. Use Angular CLI to generate a new component:

ng generate component my-component

8. Create a my-component.stories.ts file inside the my-component directory:

// src/app/my-component/my-component.stories.ts
import { MyComponentComponent } from './my-component.component';
import { StoryObj, Meta } from '@storybook/angular';

export default {
  title: 'Components/MyComponent',
  component: MyComponentComponent,
} as Meta<MyComponentComponent>;

type MyComponentStory = StoryObj<MyComponentComponent>;
const Template: MyComponentStory = {
  args: {},
};

export const Default: MyComponentStory = {
  ...Template,
  args: {},
};

9. Update the main.js file in the .storybook directory to include the new component:

// .storybook/main.js
module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../src/app/my-component/my-component.stories.ts',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
};

Finally: Now, your new Angular component is set up with Storybook 7.0. Start Storybook again with npm run storybook if it's not running, and you'll see the new component in the Storybook UI.

Now see in action :

1- Create a radio button Component

ng g c radiobutton

2- open radio-button/radio-button.component.html

<label class="radio-button">
  <input
    type="radio"
    [name]="name"
    [value]="value"
    [(ngModel)]="selectedValue"
  />
  <span class="radio-button-circle"></span>
  {{ label }}
</label>
<div *ngIf="showError" class="error-message">{{ errorMessage }}</div>

3- Now open radio-button/radio-button.component.scss

.radio-button {
  position: relative;
  display: inline-block;

  input[type="radio"] {
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;

    &:checked + .radio-button-circle::after {
      background-color: red; // Change this color to the desired checked color
    }
  }

  .radio-button-circle {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: relative;
    display: inline-block;

    &::after {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: transparent;
      transition: background-color 0.2s;
    }
  }
}

.error-message {
  color: red;
  font-size: 0.8rem;
  margin-top: 4px;
}

4- Then radio-button/radio-button.component.ts

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

@Component({
  selector: 'app-radio-button',
  templateUrl: './radio-button.component.html',
  styleUrls: ['./radio-button.component.scss'],
})
export class RadioButtonComponent {
  @Input() label: string = 'radioButton';
  @Input() showError: boolean = false;
  @Input() errorMessage: string = 'radioButton';
}

5- finally create story in your radio-button component with this name:

radio-button.stories.ts

import { moduleMetadata } from '@storybook/angular';
import { StoryObj, Meta } from '@storybook/angular';
import { RadioButtonComponent } from './radio-button.component';

export default {
  title: 'Components/RadioButton',
  component: RadioButtonComponent,
  decorators: [
    moduleMetadata({
      declarations: [RadioButtonComponent],
    }),
  ],
  argTypes: {
    showError: {
      control: 'boolean',
    },
    errorMessage: {
      control: 'text',
    },
  },
} as Meta<RadioButtonComponent>;

type RadioButtonStory = StoryObj<RadioButtonComponent>;
const Template: RadioButtonStory = {
  args: {},
};

export const radioButton: RadioButtonStory = {
  ...Template,
  args: {
    label: 'Option',
  },
};

Done.

Ahmadreza Shamimi is Creating Amazing Programming Contents

Ahmadreza