diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot
index 2e5e93c5c25..a29f3e15123 100644
--- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot
+++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot
@@ -8,6 +8,9 @@ Object {
     "name": "_inputValue",
     "table": Object {
       "category": "properties",
+      "defaultValue": Object {
+        "summary": "some value",
+      },
       "type": Object {
         "required": true,
         "summary": "string",
@@ -24,6 +27,9 @@ Private value.",
     "name": "_value",
     "table": Object {
       "category": "properties",
+      "defaultValue": Object {
+        "summary": "Private hello",
+      },
       "type": Object {
         "required": true,
         "summary": "string",
@@ -39,6 +45,9 @@ Private value.",
     "name": "accent",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": true,
         "summary": "ButtonAccent",
@@ -54,6 +63,9 @@ Private value.",
     "name": "appearance",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": "secondary",
+      },
       "type": Object {
         "required": true,
         "summary": "\\"primary\\" | \\"secondary\\"",
@@ -73,6 +85,9 @@ Private value.",
     "name": "buttonRef",
     "table": Object {
       "category": "view child",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": true,
         "summary": "ElementRef",
@@ -92,6 +107,9 @@ An internal calculation method which adds \`x\` and \`y\` together.
     "name": "calc",
     "table": Object {
       "category": "methods",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": false,
         "summary": "(x: number, y: string | number) => number",
@@ -107,6 +125,9 @@ An internal calculation method which adds \`x\` and \`y\` together.
     "name": "focus",
     "table": Object {
       "category": "properties",
+      "defaultValue": Object {
+        "summary": false,
+      },
       "type": Object {
         "required": true,
         "summary": "",
@@ -122,6 +143,9 @@ An internal calculation method which adds \`x\` and \`y\` together.
     "name": "inputValue",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": true,
         "summary": "string",
@@ -138,6 +162,9 @@ Public value.",
     "name": "internalProperty",
     "table": Object {
       "category": "properties",
+      "defaultValue": Object {
+        "summary": "Public hello",
+      },
       "type": Object {
         "required": true,
         "summary": "string",
@@ -153,6 +180,9 @@ Public value.",
     "name": "isDisabled",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": false,
+      },
       "type": Object {
         "required": true,
         "summary": "boolean",
@@ -168,6 +198,9 @@ Public value.",
     "name": "item",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": true,
         "summary": "[]",
@@ -183,6 +216,9 @@ Public value.",
     "name": "label",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": true,
         "summary": "string",
@@ -204,6 +240,9 @@ Will also block the emission of the event if \`isDisabled\` is true.
     "name": "onClick",
     "table": Object {
       "category": "outputs",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": true,
         "summary": "EventEmitter",
@@ -219,6 +258,9 @@ Will also block the emission of the event if \`isDisabled\` is true.
     "name": "onClickListener",
     "table": Object {
       "category": "methods",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": false,
         "summary": "(btn: ) => void",
@@ -238,6 +280,9 @@ A private method.
     "name": "privateMethod",
     "table": Object {
       "category": "methods",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": false,
         "summary": "(password: string) => void",
@@ -253,6 +298,9 @@ A private method.
     "name": "processedItem",
     "table": Object {
       "category": "properties",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": true,
         "summary": "T[]",
@@ -272,6 +320,9 @@ A protected method.
     "name": "protectedMethod",
     "table": Object {
       "category": "methods",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": false,
         "summary": "(id?: number) => void",
@@ -288,6 +339,9 @@ A public method using an interface.",
     "name": "publicMethod",
     "table": Object {
       "category": "methods",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": false,
         "summary": "(things: ISomeInterface) => void",
@@ -303,6 +357,9 @@ A public method using an interface.",
     "name": "showKeyAlias",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": true,
         "summary": "",
@@ -318,6 +375,9 @@ A public method using an interface.",
     "name": "size",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": "medium",
+      },
       "type": Object {
         "required": true,
         "summary": "ButtonSize",
@@ -333,6 +393,9 @@ A public method using an interface.",
     "name": "someDataObject",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
       "type": Object {
         "required": true,
         "summary": "ISomeInterface",
@@ -348,6 +411,9 @@ A public method using an interface.",
     "name": "somethingYouShouldNotUse",
     "table": Object {
       "category": "inputs",
+      "defaultValue": Object {
+        "summary": false,
+      },
       "type": Object {
         "required": true,
         "summary": "boolean",
diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts
index 02e28c47031..8a7d68c87af 100644
--- a/addons/docs/src/frameworks/angular/compodoc.ts
+++ b/addons/docs/src/frameworks/angular/compodoc.ts
@@ -13,6 +13,7 @@ import {
   Pipe,
   Property,
   Directive,
+  JsDocTag,
 } from './types';
 
 export const isMethod = (methodOrProp: Method | Property): methodOrProp is Method => {
@@ -154,10 +155,59 @@ export const extractType = (property: Property, defaultValue: any) => {
   }
 };
 
+const castDefaultValue = (property: Property, defaultValue: any) => {
+  const compodocType = property.type;
+
+  // All these checks are necessary as compodoc does not always set the type ie. @HostBinding have empty types.
+  // null and undefined also have 'any' type
+  if (['boolean', 'number', 'string', 'EventEmitter'].includes(compodocType)) {
+    switch (compodocType) {
+      case 'boolean':
+        return defaultValue === 'true';
+      case 'number':
+        return Number(defaultValue);
+      case 'EventEmitter':
+        return undefined;
+      default:
+        return defaultValue;
+    }
+  } else {
+    switch (defaultValue) {
+      case 'true':
+        return true;
+      case 'false':
+        return false;
+      case 'null':
+        return null;
+      case 'undefined':
+        return undefined;
+      default:
+        return defaultValue;
+    }
+  }
+};
+
+const extractDefaultValueFromComments = (property: Property, value: any) => {
+  let commentValue = value;
+  property.jsdoctags.forEach((tag: JsDocTag) => {
+    if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) {
+      // @ts-ignore
+      const dom = new window.DOMParser().parseFromString(tag.comment, 'text/html');
+      commentValue = dom.body.textContent;
+    }
+  });
+  return commentValue;
+};
+
 const extractDefaultValue = (property: Property) => {
   try {
-    // eslint-disable-next-line no-eval
-    const value = eval(property.defaultValue);
+    let value: string | boolean = property.defaultValue?.replace(/^'(.*)'$/, '$1');
+    value = castDefaultValue(property, value);
+
+    if (value == null && property.jsdoctags?.length > 0) {
+      value = extractDefaultValueFromComments(property, value);
+    }
+
     return value;
   } catch (err) {
     logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`);
@@ -189,11 +239,13 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
     data.forEach((item: Method | Property) => {
       const section = mapItemToSection(key, item);
       const defaultValue = isMethod(item) ? undefined : extractDefaultValue(item as Property);
+
       const type =
         isMethod(item) || (section !== 'inputs' && section !== 'properties')
           ? { name: 'void' }
           : extractType(item as Property, defaultValue);
       const action = section === 'outputs' ? { action: item.name } : {};
+
       const argType = {
         name: item.name,
         description: item.rawdescription || item.description,
@@ -206,6 +258,7 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
             summary: isMethod(item) ? displaySignature(item) : item.type,
             required: isMethod(item) ? false : !item.optional,
           },
+          defaultValue: { summary: defaultValue },
         },
       };
 
diff --git a/addons/docs/src/frameworks/angular/types.ts b/addons/docs/src/frameworks/angular/types.ts
index cb208a8e1bf..d1ac2f2d52d 100644
--- a/addons/docs/src/frameworks/angular/types.ts
+++ b/addons/docs/src/frameworks/angular/types.ts
@@ -7,6 +7,13 @@ export interface Method {
   rawdescription?: string;
 }
 
+export interface JsDocTag {
+  comment?: string;
+  tagName?: {
+    escapedText?: string;
+  };
+}
+
 export interface Property {
   name: string;
   decorators?: Decorator[];
@@ -15,6 +22,7 @@ export interface Property {
   defaultValue?: string;
   description?: string;
   rawdescription?: string;
+  jsdoctags?: JsDocTag[];
 }
 
 export interface Class {
diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts
index 50056efaa6c..5c9a7461a28 100644
--- a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts
+++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts
@@ -47,6 +47,37 @@ export enum ButtonAccent {
 export class DocButtonComponent<T> {
   @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
 
+  /** Test default value. */
+  @Input()
+  public theDefaultValue = 'Default value in component';
+
+  /**
+   * Setting default value here because compodoc won't get the default value for accessors
+   * @default Another default value
+   * */
+  @Input()
+  get anotherDefaultValue() {
+    return this._anotherDefaultValue;
+  }
+
+  set anotherDefaultValue(v: string) {
+    this._anotherDefaultValue = v;
+  }
+
+  _anotherDefaultValue = 'Another default value';
+
+  /** Test null default value. */
+  @Input()
+  public aNullValue = null;
+
+  /** Test null default value. */
+  @Input()
+  public anUndefinedValue;
+
+  /** Test numeric default value. */
+  @Input()
+  public aNumericValue = 123;
+
   /** Appearance style of the button. */
   @Input()
   public appearance: 'primary' | 'secondary' = 'secondary';
diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.mdx b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.mdx
new file mode 100644
index 00000000000..517fac05b04
--- /dev/null
+++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.mdx
@@ -0,0 +1,10 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { DocButtonComponent } from './doc-button.component';
+
+<Meta title='Addons/Docs/DocButtonDefaultValue' />
+
+# ArgsTable in MDX with default values
+
+`theDefaultValue` should show the default value from the component comments
+
+<ArgsTable of={DocButtonComponent}/>
diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts
index 0c027d44178..c411acf4636 100644
--- a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts
+++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts
@@ -9,6 +9,13 @@ export const Basic = (args) => ({
   props: args,
 });
 Basic.args = { label: 'Args test', isDisabled: false };
+Basic.ArgTypes = {
+  theDefaultValue: {
+    table: {
+      defaultValue: { summary: 'Basic default value' },
+    },
+  },
+};
 
 export const WithTemplate = (args) => ({
   props: args,