Angular Storybook Content Projection

Use ng-content in your Angular Storybook Component.

Filename: link.component.ts

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

@Component({
  selector: 'app-link',
  styleUrls: ['./link.component.scss'],
  template: `
    <a [ngClass]="classes" [href]="href" [target]="target">
      <ng-content></ng-content>
    </a>
  `
})
export default class LinkComponent {
  @Input() color: 'primary' | 'secondary' = 'primary';
  @Input() href: string = '';
  @Input() target: '_self' | '_blank' | '_parent' | '_top' = '_blank';

  get classes(): Array<string> {
    return ['link', `${this.color}-link`];
  }

}

Filename: link.stories.ts

import Link from "./link.component";
import {Meta, Story} from "@storybook/angular/types-6-0";

export default {
  title: 'Link',
  component: Link,
} as Meta;

const Template: Story<Link> = (args: Link) => ({
  props: args,
  template: `
    <app-link [color]="color" [href]="href" [target]="target">
        Visit Anonymous Systems
    </app-link>
`
})

export const Base = Template.bind({});
Base.args = {
  color: 'primary',
  href: 'https://anonsys.tech',
  target: '_blank',
};