Merge pull request 'angualar base' (#4) from doc/angular-base into main

Reviewed-on: #4

.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/',

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: `
+    <div class="vstack" [ngStyle]="{ gap: gap }">
+      <ng-content />
+    </div>
+  `,
+  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: `
+    <div class="hstack" [ngStyle]="{ gap: gap }">
+      <ng-content />
+    </div>
+  `,
+  styles: `
+    .hstack {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `
+})
+export class HStackComponent {
+  @Input() gap: string = '5px';
+}
+```
+
+:::

docs/angular/index.md

@@ -0,0 +1,3 @@
+# Angular Snippets and Musings
+
+#### [Base Components](./base-components.md)

docs/index.md

@@ -10,6 +10,10 @@ hero:
       text: .NET
       link: /dotnet/
       
+    - theme: alt
+      text: Angular
+      link: /angular/
+
     - theme: alt
       text: Ansible
       link: /ansible/