diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index f466c3b..51e3520 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -38,6 +38,14 @@ export default defineConfig({
{ text: 'Controller Testing', link: '/dotnet/controller-testing' },
]
},
+ {
+ text: 'Angular',
+ link: '/angular/',
+ collapsed: true,
+ items: [
+ { text: 'Base Components', link: '/angular/base-components' },
+ ]
+ },
{
text: 'Ansible',
link: '/ansible/',
diff --git a/docs/angular/base-components.md b/docs/angular/base-components.md
new file mode 100644
index 0000000..264bbc4
--- /dev/null
+++ b/docs/angular/base-components.md
@@ -0,0 +1,64 @@
+# Base Components
+
+This is a small collection of handy base angular components.
+
+## Layout
+
+::: code-group
+
+```ts:line-numbers [vstack.component.ts]
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-vstack',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+
+
+
+ `,
+ styles: `
+ .vstack {
+ display: flex;
+ flex-direction: column;
+ }
+ `
+})
+export class VStackComponent {
+ @Input() gap: string = '5px';
+}
+```
+
+:::
+
+::: code-group
+
+```ts:line-numbers [hstack.component.ts]
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-hstack',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+
+
+
+ `,
+ styles: `
+ .hstack {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+ `
+})
+export class HStackComponent {
+ @Input() gap: string = '5px';
+}
+```
+
+:::
\ No newline at end of file
diff --git a/docs/angular/index.md b/docs/angular/index.md
new file mode 100644
index 0000000..4bc3ea5
--- /dev/null
+++ b/docs/angular/index.md
@@ -0,0 +1,3 @@
+# Angular Snippets and Musings
+
+#### [Base Components](./base-components.md)
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index 6325ea8..b6723cf 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -10,6 +10,10 @@ hero:
text: .NET
link: /dotnet/
+ - theme: alt
+ text: Angular
+ link: /angular/
+
- theme: alt
text: Ansible
link: /ansible/