code-snippets/docs/angular/base-components.md

Base Components

This is a small collection of handy base angular components.

Layout

::: code-group

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

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';
}

:::