Implement components for angular

code/frameworks/angular/template/components/form.component.ts

@@ -0,0 +1,37 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-form',
+  template: `
+    <form id="interaction-test-form" (submit)="handleSubmit($event)">
+      <label>
+        Enter Value
+        <input type="text" data-testid="value" [value]="value" required />
+      </label>
+      <button type="submit">Submit</button>
+      <p *ngIf="complete">Completed!!</p>
+    </form>
+  `,
+})
+export default class FormComponent {
+  /**
+   * Optional success handler
+   */
+  @Output()
+  onSuccess = new EventEmitter<string>();
+
+  value = '';
+
+  complete = false;
+
+  handleSubmit(event) {
+    event.preventDefault();
+    this.onSuccess.emit(this.value);
+    setTimeout(() => {
+      this.complete = true;
+    }, 500);
+    setTimeout(() => {
+      this.complete = false;
+    }, 1500);
+  }
+}

code/frameworks/angular/template/components/html.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+  selector: 'storybook-html',
+  template: `<div [innerHTML]="safeContent"></div>`,
+})
+export default class HtmlComponent {
+  /**
+   * The HTML to render
+   *
+   * @required
+   */
+  @Input()
+  content = '';
+
+  constructor(private sanitizer: DomSanitizer) {
+    this.sanitizer = sanitizer;
+  }
+
+  get safeContent() {
+    return this.sanitizer.bypassSecurityTrustHtml(this.content);
+  }
+}

code/frameworks/angular/template/components/index.js

@@ -1,5 +1,8 @@
 import globalThis from 'global';
 
 import Button from './button.component';
+import Html from './html.component';
+import Pre from './pre.component';
+import Form from './form.component';
 
-globalThis.Components = { Button };
+globalThis.Components = { Button, Html, Pre, Form };

code/frameworks/angular/template/components/pre.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'storybook-pre',
+  template: `<pre data-testid="pre" [ngStyle]="style">{{ finalText }}</pre>`,
+})
+export default class PreComponent {
+  /**
+   * Styles to apply to the component
+   */
+  @Input()
+  style = {};
+
+  /**
+   * An object to render
+   */
+  @Input()
+  object: Object = null;
+
+  /**
+   * The code to render
+   */
+  @Input()
+  text = '';
+
+  get finalText() {
+    return this.object ? JSON.stringify(this.object, null, 2) : this.text;
+  }
+}

code/frameworks/angular/template/stories/decorators.stories.ts

@@ -1,6 +1,6 @@
 // your-component.stories.ts
 
-import { componentWrapperDecorator, Meta, moduleMetadata } from '@storybook/angular';
+import { Args, componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
 import ChildComponent from './child.component';
 import ParentComponent from './parent.component';
 
@@ -16,27 +16,27 @@ export default {
   argTypes: { onClickChild: { action: 'onClickChild' } },
 } as Meta;
 
-export const WithTemplate = (args) => ({
+export const WithTemplate = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
   },
 });
 
-export const WithComponent = (args) => ({
+export const WithComponent = (args: Args) => ({
   props: {
     ...args,
   },
 });
 
-export const WithLegacyComponent = (args) => ({
+export const WithLegacyComponent = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
   },
 });
 
-export const WithComponentWrapperDecorator = (args) => ({
+export const WithComponentWrapperDecorator = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -47,7 +47,7 @@ WithComponentWrapperDecorator.decorators = [
   componentWrapperDecorator(ParentComponent),
 ];
 
-export const WithComponentWrapperDecoratorAndProps = (args) => ({
+export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -63,7 +63,7 @@ WithComponentWrapperDecoratorAndProps.decorators = [
   }),
 ];
 
-export const WithComponentWrapperDecoratorAndArgs = (args) => ({
+export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -81,7 +81,7 @@ WithComponentWrapperDecoratorAndArgs.decorators = [
   })),
 ];
 
-export const WithCustomDecorator = (args) => ({
+export const WithCustomDecorator = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
@@ -96,9 +96,9 @@ WithCustomDecorator.decorators = [
       template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
     };
   },
-];
+] as Story['decorators'];
 
-export const AngularLegacyRendering = (args) => ({
+export const AngularLegacyRendering = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
@@ -114,4 +114,4 @@ AngularLegacyRendering.decorators = [
       template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
     };
   },
-];
+] as Story['decorators'];