How to use the @storybook/angular.addDecorator function in @storybook/angular

import "./polyfills.js";

import { configure, addDecorator } from "@storybook/angular";
import { withOptions } from '@storybook/addon-options';

addDecorator(
	withOptions({
		name: "carbon components angular",
		url: "https://github.com/IBM/carbon-components-angular",
	})
);

// load global styles
require("!style-loader!css-loader!postcss-loader!sass-loader!./preview.scss");

require("../src/index.stories");
// automatically import all files ending in *.stories.ts
const req = require.context("../src", true, /.stories.ts$/);

function loadStories() {
	req.keys()
	.sort((path1, path2) => path1.split("/").slice(-1)[0] > path2.split("/").slice(-1)[0] ? 1 : -1)

import { addParameters, addDecorator } from '@storybook/angular';
import { withA11y } from '@storybook/addon-a11y';
import { setCompodocJson } from '@storybook/addon-docs/angular';
import addCssWarning from '../src/cssWarning';

// @ts-ignore
// eslint-disable-next-line import/extensions, import/no-unresolved
import docJson from '../documentation.json';

setCompodocJson(docJson);

addDecorator(withA11y);
addCssWarning();

addParameters({
  docs: {
    // inlineStories: true,
    iframeHeight: '60px',
  },
});

import { configure, addDecorator, addParameters } from '@storybook/angular';
import { withA11y } from '@storybook/addon-a11y';
import sparkTheme from "../../storybook-theming/storybook-spark-theme";
import '../src/polyfills';
import '!style-loader!css-loader!sass-loader!../../storybook-theming/font-loader.scss';
import '../../storybook-theming/icon-loader';
import { setCompodocJson, extractProps } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';

setCompodocJson(docJson);
addDecorator(withA11y);
addParameters({
  options: {
    theme: sparkTheme,
    showRoots: true,
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
  },
});

addParameters({
  docs: {
    extractComponentDescription: (component, { info }) => {
      if (info) {
        return typeof info === 'string' ? info : info.markdown || info.text;
      }
      return null;

import { configure, addDecorator } from '@storybook/angular';
import { withNotes } from '@storybook/addon-notes';

addDecorator(withNotes);
function loadStories() {
  require('../stories/index.ts');
}

configure(loadStories, module);

import {
    initDsm
} from '@invisionapp/dsm-storybook';
import {
    CUSTOM_ELEMENTS_SCHEMA
} from '@angular/core';
import '@storybook/addon-console';
import {
    setConsoleOptions
} from '@storybook/addon-console';

setConsoleOptions({
    panelExclude: [],
});

addDecorator(
    moduleMetadata({
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
);

import theme from './theme';

addParameters({
    options: {
        theme
    }
});

function loadStories() {
    const paths = [
        require.context('../apps/web', true, /\.stories\.ts$/),

} else {
    containerStyleNode.textContent = cssText;
  }
  return {
    ...rest,
    template: `
      <a aria-label="Skip to main content" class="bx--assistive-text" href="#main-content">Skip to main content</a>
      <div class="bx--body bx-ce-demo-devenv--container" role="main" data-floating-menu-container="" id="main-content">
        ${template}
      </div>
      <a aria-label="End of content" class="bx--assistive-text" href="#main-content">End of content</a>
    `,
  };
});

addDecorator(withKnobs);

addDecorator((story, { parameters }) =&gt; {
  const { knobs } = parameters;
  if (Object(knobs) === knobs) {
    if (!parameters.props) {
      parameters.props = {};
    }
    Object.keys(knobs).forEach(name =&gt; {
      if (typeof knobs[name] === 'function') {
        parameters.props[name] = knobs[name]();
      }
    });
  }
  return story();
});