diff --git a/package.json b/package.json
index 42669994062fd9..aa788e9e0c82a8 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "7.1.1",
     "@schematics/angular": "^12.0.0",
+    "@storybook/addon-controls": "^6.2.9",
     "@storybook/addon-knobs": "^6.2.7",
     "@storybook/angular": "^6.2.7",
     "@storybook/core": "^6.0.21",
diff --git a/packages/angular/src/generators/component-story/component-story.ts b/packages/angular/src/generators/component-story/component-story.ts
index c220e749209327..41c424d8fa11b0 100644
--- a/packages/angular/src/generators/component-story/component-story.ts
+++ b/packages/angular/src/generators/component-story/component-story.ts
@@ -1,7 +1,7 @@
 import type { Tree } from '@nrwl/devkit';
 import { generateFiles, joinPathFragments } from '@nrwl/devkit';
 import { getComponentProps } from '../utils/storybook';
-import { getKnobDefaultValue } from './lib/get-knob-default-value';
+import { getControlDefaultValue } from './lib/get-control-default-value';
 import type { ComponentStoryGeneratorOptions } from './schema';
 
 export function componentStoryGenerator(
@@ -25,7 +25,7 @@ export function componentStoryGenerator(
   const props = getComponentProps(
     tree,
     joinPathFragments(destinationDir, `${componentFileName}.ts`),
-    getKnobDefaultValue
+    getControlDefaultValue
   );
 
   generateFiles(tree, templatesDir, destinationDir, {
diff --git a/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__ b/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__
index 1d7207560075fc..18c9d7c62b0342 100644
--- a/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__
+++ b/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__
@@ -1,16 +1,23 @@
-<% if(props.length > 0) { %>import { text, number, boolean } from '@storybook/addon-knobs';<% } %>
+import { moduleMetadata, Story, Meta } from '@storybook/angular';
 import { <%=componentName%> } from './<%=componentFileName%>';
 
 export default {
   title: '<%=componentName%>',
-  component: <%=componentName%>
-}
+  component: <%=componentName%>,
+  decorators: [
+    moduleMetadata({
+      imports: [],
+    })
+  ],
+} as Meta;
 
-export const primary = () => ({
-  moduleMetadata: {
-    imports: []
-  },
-  props: {<% for (let prop of props) { %>
-    <%=prop.name%>: <%=prop.type%>('<%=prop.name%>', <%-prop.defaultValue%>),<% } %>
-  }
-})
\ No newline at end of file
+const Template: Story<<%=componentName%>> = (args: <%=componentName%>) => ({
+  component: <%=componentName%>,
+  props: args,
+});
+
+
+export const primary = Template.bind({});
+primary.args = {<% for (let prop of props) { %>
+    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+}
\ No newline at end of file
diff --git a/packages/angular/src/generators/component-story/lib/get-knob-default-value.ts b/packages/angular/src/generators/component-story/lib/get-control-default-value.ts
similarity index 78%
rename from packages/angular/src/generators/component-story/lib/get-knob-default-value.ts
rename to packages/angular/src/generators/component-story/lib/get-control-default-value.ts
index 7306e2556e4288..4c541e7acab5c6 100644
--- a/packages/angular/src/generators/component-story/lib/get-knob-default-value.ts
+++ b/packages/angular/src/generators/component-story/lib/get-control-default-value.ts
@@ -1,6 +1,6 @@
 import type { PropertyDeclaration } from 'typescript';
 
-export function getKnobDefaultValue(property: PropertyDeclaration): string {
+export function getControlDefaultValue(property: PropertyDeclaration): string {
   const typeNameToDefault = {
     string: "''",
     number: '0',
diff --git a/packages/angular/src/generators/utils/storybook.ts b/packages/angular/src/generators/utils/storybook.ts
index 06bcfcc50d10a1..1864f4a5a59c11 100644
--- a/packages/angular/src/generators/utils/storybook.ts
+++ b/packages/angular/src/generators/utils/storybook.ts
@@ -36,7 +36,9 @@ export function getInputPropertyDeclarations(
 export function getComponentProps(
   tree: Tree,
   componentPath: string,
-  getKnobDefaultValueFn: (property: PropertyDeclaration) => string | undefined
+  getControlDefaultValueFn: (
+    property: PropertyDeclaration
+  ) => string | undefined
 ): InputDescriptor[] {
   const props = getInputPropertyDeclarations(tree, componentPath).map(
     (node) => {
@@ -49,7 +51,7 @@ export function getComponentProps(
         : node.name.getText();
 
       const type = getKnobType(node);
-      const defaultValue = getKnobDefaultValueFn(node);
+      const defaultValue = getControlDefaultValueFn(node);
 
       return {
         name,
diff --git a/packages/react/src/generators/component-story/files/__componentFileName__.stories.__fileExt__ b/packages/react/src/generators/component-story/files/__componentFileName__.stories.__fileExt__
index 20f3d8cac1cba1..5118b57720a776 100644
--- a/packages/react/src/generators/component-story/files/__componentFileName__.stories.__fileExt__
+++ b/packages/react/src/generators/component-story/files/__componentFileName__.stories.__fileExt__
@@ -1,12 +1,12 @@
-import React from 'react';
+import { Story, Meta } from '@storybook/react';
 import { <%= componentName %><% if ( propsTypeName && !isPlainJs ) { %>, <%= propsTypeName %> <% } %> } from './<%= componentFileName %>';
 
 export default {
   component: <%= componentName %>,
   title: '<%= componentName %>'
-};
+} as Meta;
 
-const Template<%= isPlainJs ? '': ': Story<' + propsTypeName %> + '>' = (args) => <<%= componentName %> {...args} />;
+const Template: Story<<%= propsTypeName %>> = (args) => <<%= componentName %> {...args} />;
 
 export const primary = Template.bind({})
 primary.args = {<% for (let prop of props) { %>
diff --git a/packages/storybook/src/generators/configuration/project-files/.storybook/preview.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files/.storybook/preview.js__tmpl__
index 5aafd48e9d9548..e69de29bb2d1d6 100644
--- a/packages/storybook/src/generators/configuration/project-files/.storybook/preview.js__tmpl__
+++ b/packages/storybook/src/generators/configuration/project-files/.storybook/preview.js__tmpl__
@@ -1,4 +0,0 @@
-import { addDecorator } from '<%= uiFramework %>';
-import { withKnobs } from '@storybook/addon-knobs';
-
-addDecorator(withKnobs);
\ No newline at end of file
diff --git a/packages/storybook/src/generators/configuration/root-files/.storybook/main.js b/packages/storybook/src/generators/configuration/root-files/.storybook/main.js
index 84be9fa2a99d40..56651a95117416 100644
--- a/packages/storybook/src/generators/configuration/root-files/.storybook/main.js
+++ b/packages/storybook/src/generators/configuration/root-files/.storybook/main.js
@@ -1,4 +1,4 @@
 module.exports = {
   stories: [],
-  addons: ['@storybook/addon-knobs/register'],
+  addons: ['@storybook/addon-controls'],
 };
diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts
index c433249732cab5..8a56f33179aeb2 100644
--- a/packages/storybook/src/generators/init/init.ts
+++ b/packages/storybook/src/generators/init/init.ts
@@ -35,10 +35,10 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
    */
 
   if (
-    !packageJson.dependencies['@storybook/addon-knobs'] &&
-    !packageJson.devDependencies['@storybook/addon-knobs']
+    !packageJson.dependencies['@storybook/addon-controls'] &&
+    !packageJson.devDependencies['@storybook/addon-controls']
   ) {
-    devDependencies['@storybook/addon-knobs'] = storybookVersion;
+    devDependencies['@storybook/addon-controls'] = storybookVersion;
   }
 
   if (isFramework('angular', schema)) {
diff --git a/scripts/depcheck/missing.ts b/scripts/depcheck/missing.ts
index d59a75d8a67492..801435a6389d47 100644
--- a/scripts/depcheck/missing.ts
+++ b/scripts/depcheck/missing.ts
@@ -63,6 +63,7 @@ const IGNORE_MATCHES = {
     '@angular-devkit/core',
     '@angular-devkit/schematics',
     '@storybook/addon-knobs',
+    '@storybook/addon-controls',
     '@storybook/core',
     'rxjs',
   ],
diff --git a/yarn.lock b/yarn.lock
index 6f733044bfe1b4..942a6146d03610 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3431,6 +3431,20 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@storybook/addon-controls@^6.2.9":
+  version "6.2.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.2.9.tgz#eeec14b2946f1fb5326115f2205ed72c7f44ccea"
+  integrity sha512-NvXAJ7I5U4CLxv4wL3/Ne9rehJlgnSmQlLIG/z6dg5zm7JIb48LT4IY6GzjlUP5LkjmO9KJ8gJC249uRt2iPBQ==
+  dependencies:
+    "@storybook/addons" "6.2.9"
+    "@storybook/api" "6.2.9"
+    "@storybook/client-api" "6.2.9"
+    "@storybook/components" "6.2.9"
+    "@storybook/node-logger" "6.2.9"
+    "@storybook/theming" "6.2.9"
+    core-js "^3.8.2"
+    ts-dedent "^2.0.0"
+
 "@storybook/addon-knobs@^6.2.7":
   version "6.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-6.2.9.tgz#879b2e3861c29b30b53f1d624315a2f3a463785a"