diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
new file mode 100644
index 000000000000..fff0622251a4
--- /dev/null
+++ b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -0,0 +1,25 @@
+```ts
+// Page.stories.ts
+
+import { Meta, Story } from '@storybook/angular/types-6-0';
+import Page from './page.component';
+
+export default {
+  component: Page,
+  title: 'Page',
+} as Meta;
+
+const Template: Story<Page> = (args) => ({
+  props: args,
+  template: `
+    <storybook-page>
+      <ng-container footer>${args.footer}</ng-container>
+    </storybook-page>`,
+});
+
+export const CustomFooter = Template.bind({});
+CustomFooter.args = {
+  footer: 'Built with Storybook',
+};
+
+```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 944814b955a4..c2dc6af8a4dc 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -114,6 +114,7 @@ Args are used in story templates to configure the component appearance just as y
     'react/page-story-slots.ts.mdx',
     'vue/page-story-slots.2.js.mdx',
     'vue/page-story-slots.3.js.mdx',
+    'angular/page-story-slots.ts.mdx'
   ]}
 />