Fix typing issues in angular renderer stories

code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts

@@ -18,7 +18,7 @@ const NOOP = () => {};
   ],
 })
 export class CustomCvaComponent implements ControlValueAccessor {
-  disabled: boolean;
+  disabled?: boolean;
 
   protected onChange: (value: any) => void = NOOP;
 

code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts

@@ -9,22 +9,22 @@ import { Component, Input } from '@angular/core';
 })
 export class EnumsComponent {
   /** Union Type of string literals */
-  @Input() unionType: 'Union A' | 'Union B' | 'Union C';
+  @Input() unionType?: 'Union A' | 'Union B' | 'Union C';
 
   /** Union Type assigned as a Type Alias */
-  @Input() aliasedUnionType: TypeAlias;
+  @Input() aliasedUnionType?: TypeAlias;
 
   /** Base Enum Type with no assigned values */
-  @Input() enumNumeric: EnumNumeric;
+  @Input() enumNumeric?: EnumNumeric;
 
   /** Enum with initial numeric value and auto-incrementing subsequent values */
-  @Input() enumNumericInitial: EnumNumericInitial;
+  @Input() enumNumericInitial?: EnumNumericInitial;
 
   /** Enum with string values */
-  @Input() enumStrings: EnumStringValues;
+  @Input() enumStrings?: EnumStringValues;
 
   /** Type Aliased Enum Type */
-  @Input() enumAlias: EnumAlias;
+  @Input() enumAlias?: EnumAlias;
 }
 
 /**

code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts

@@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
 })
 export class BaseButtonComponent {
   @Input()
-  label: string;
+  label?: string;
 }

code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts

@@ -7,5 +7,5 @@ import { BaseButtonComponent } from './base-button.component';
 })
 export class IconButtonComponent extends BaseButtonComponent {
   @Input()
-  icon: string;
+  icon?: string;
 }

code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts

@@ -28,7 +28,8 @@ export default {
     // Wrap all stories with this template
     componentWrapperDecorator(
       (story) => `<sb-button [color]="propsColor">${story}</sb-button>`,
-      ({ args }) => ({ propsColor: args.color })
+      // eslint-disable-next-line dot-notation
+      ({ args }) => ({ propsColor: args['color'] })
     ),
   ],
   argTypes: {
@@ -45,7 +46,8 @@ export const EmptyButton: StoryFn = () => ({
 });
 
 export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `${args.content}`,
+  // eslint-disable-next-line dot-notation
+  template: `${args['content']}`,
 });
 WithDynamicContentAndArgs.argTypes = {
   content: { control: 'text' },

code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts

@@ -21,7 +21,8 @@ export const Default: StoryFn = () => ({
 });
 
 export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `<storybook-with-ng-content><h1>${args.content}</h1></storybook-with-ng-content>`,
+  // eslint-disable-next-line dot-notation
+  template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
 });
 WithDynamicContentAndArgs.argTypes = {
   content: { control: 'text' },

code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts

@@ -7,7 +7,7 @@ import type { Meta, StoryFn } from '@storybook/angular';
     📝 The current time in console should no longer display after a change of story`,
 })
 class OnDestroyComponent implements OnInit, OnDestroy {
-  time: string;
+  time?: string;
 
   interval: any;
 

code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts

@@ -15,7 +15,7 @@ import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OnPushBoxComponent {
-  @Input() word: string;
+  @Input() word?: string;
 
-  @Input() @HostBinding('style.background-color') bgColor: string;
+  @Input() @HostBinding('style.background-color') bgColor?: string;
 }

code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts

@@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
 })
 export class WithPipeComponent {
   @Input()
-  field;
+  field: any;
 }

code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts

@@ -1,3 +1,4 @@
+import type { Args } from '@storybook/angular';
 import { DiComponent } from './di.component';
 
 export default {
@@ -13,7 +14,7 @@ export const InputsAndInjectDependencies = () => ({
 
 InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
 
-export const InputsAndInjectDependenciesWithArgs = (args) => ({
+export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({
   props: args,
 });
 InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args';

code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts

@@ -11,7 +11,7 @@ export const TEST_TOKEN = new InjectionToken<string>('test');
 })
 export class DiComponent {
   @Input()
-  title: string;
+  title?: string;
 
   constructor(
     protected injector: Injector,

code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts

@@ -22,15 +22,15 @@ export default {
 })
 class NgComponentOutletWrapperComponent implements OnInit {
   @Input()
-  componentOutlet: Type<unknown>;
+  componentOutlet?: Type<unknown>;
 
   @Input()
-  name: string;
+  name?: string;
 
   @Input()
-  color: string;
+  color?: string;
 
-  componentInjector: Injector;
+  componentInjector?: Injector;
 
   componentContent = [
     [document.createTextNode('Ng-content : Inspired by ')],
@@ -67,7 +67,8 @@ WithCustomNgComponentOutletWrapper.decorators = [
   }),
   componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
     name: args.name,
-    color: args.color,
+    // eslint-disable-next-line dot-notation
+    color: args['color'],
     componentOutlet: WithoutSelectorComponent,
   })),
 ];

code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts

@@ -25,10 +25,10 @@ export default {
 
 @Component({ selector: 'component-factory-wrapper', template: '' })
 class ComponentFactoryWrapperComponent implements AfterViewInit {
-  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert;
+  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: any;
 
   @Input()
-  componentOutlet: Type<unknown>;
+  componentOutlet?: Type<unknown>;
 
   @Input()
   args: any;
@@ -41,12 +41,12 @@ class ComponentFactoryWrapperComponent implements AfterViewInit {
 
   ngAfterViewInit() {
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      this.componentOutlet
+      this.componentOutlet!
     );
     const containerRef = this.viewContainerRef;
     containerRef.clear();
     const dynamicComponent = containerRef.createComponent(componentFactory);
-    Object.assign(dynamicComponent.instance, this.args);
+    Object.assign(dynamicComponent.instance as any, this.args);
   }
 }
 

code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts

@@ -19,7 +19,8 @@ export const WithInjectionTokenAndArgs: StoryFn = (args) => ({
   props: args,
   moduleMetadata: {
     providers: [
-      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args.color, name: args.name } },
+      // eslint-disable-next-line dot-notation
+      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
     ],
   },
 });

code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts

@@ -48,7 +48,7 @@ import { CHIP_COLOR } from './chip-color.token';
   ],
 })
 export class ChipComponent {
-  @Input() displayText: string;
+  @Input() displayText?: string;
 
   @Output() removeClicked = new EventEmitter();
 

code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts

@@ -38,7 +38,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   ],
 })
 export class ChipsGroupComponent {
-  @Input() chips: {
+  @Input() chips?: {
     id: number;
     text: string;
   }[];

code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/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'];

code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts

@@ -1,16 +1,17 @@
-import { componentWrapperDecorator, Meta } from '@storybook/angular';
+import { Args, componentWrapperDecorator, Meta } from '@storybook/angular';
 
 export default {
   title: 'Core / Decorators / Theme Decorators',
   decorators: [
     componentWrapperDecorator(
       (story) => `<div [class]="myTheme">${story}</div>`,
-      ({ globals }) => ({ myTheme: `${globals.theme}-theme` })
+      // eslint-disable-next-line dot-notation
+      ({ globals }) => ({ myTheme: `${globals['theme']}-theme` })
     ),
   ],
 } as Meta;
 
-export const Base = (args) => ({
+export const Base = (args: Args) => ({
   template: 'Change theme with the brush in toolbar',
   props: {
     ...args,

code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts

@@ -11,15 +11,15 @@ import { DummyService } from './dummy.service';
   `,
 })
 export class ServiceComponent implements OnInit {
-  items: {};
+  items?: {};
 
   @Input()
-  name: any;
+  name?: any;
 
   // eslint-disable-next-line no-useless-constructor
   constructor(private dummy: DummyService) {}
 
   async ngOnInit() {
-    this.items = await this.dummy.getItems();
+    this.items = (await this.dummy.getItems()) as any;
   }
 }