Blog Landing

A blog listing page with post cards, category badges, and pagination.

Preview

Angular

Jan 12, 2026

Getting Started with Angular Signals

Learn how signals simplify reactive state management in Angular applications.

CSS

Jan 8, 2026

CSS Custom Properties Deep Dive

Master design tokens and theming with CSS custom properties.

A11y

Jan 3, 2026

Building Accessible Forms

Practical tips for creating inclusive and accessible web forms.

Angular

Dec 28, 2025

Server-Side Rendering in Angular

Improve SEO and performance with Angular SSR and hydration.

html

<div class="vstack gap-4 container">
  <div class="grid cols-2">
    @for (post of posts; track post.title) {
      <div class="card">
        <div class="vstack gap-2">
          <div class="hstack gap-2">
            <ng-oat-badge [variant]="post.badgeVariant">{{ post.category }}</ng-oat-badge>
            <small class="text-light">{{ post.date }}</small>
          </div>
          <h3 class="mb-0">{{ post.title }}</h3>
          <p class="text-light mb-0">{{ post.excerpt }}</p>
          <a href="#" class="text-small">Read more →</a>
        </div>
      </div>
    }
  </div>
  <div class="flex justify-center">
    <ng-oat-pagination [totalPages]="6" [currentPage]="1" />
  </div>
</div>

SFC Source

typescript

import { Component } from '@angular/core';
import { NgOatBadge } from '@letsprogram/ng-oat/badge';
import { NgOatPagination } from '@letsprogram/ng-oat/pagination';

@Component({
  selector: 'app-blog',
  imports: [NgOatBadge, NgOatPagination],
  template: `
    <div class="vstack gap-4">
      <div class="grid cols-2">
        @for (post of posts; track post.title) {
          <div class="card">
            <div class="vstack gap-2">
              <div class="hstack gap-2">
                <ng-oat-badge [variant]="post.badgeVariant">{{ post.category }}</ng-oat-badge>
                <small class="text-light">{{ post.date }}</small>
              </div>
              <h3 class="mb-0">{{ post.title }}</h3>
              <p class="text-light mb-0">{{ post.excerpt }}</p>
              <a href="#" class="text-small">Read more →</a>
            </div>
          </div>
        }
      </div>
      <div class="flex justify-center">
        <ng-oat-pagination [totalPages]="6" [currentPage]="1" />
      </div>
    </div>
  `,
})
export class BlogComponent {
  posts = [
    { title: 'Getting Started with Signals', category: 'Angular', badgeVariant: 'secondary' as const, date: 'Jan 12', excerpt: 'Learn how signals work.' },
    { title: 'CSS Custom Properties', category: 'CSS', badgeVariant: 'success' as const, date: 'Jan 8', excerpt: 'Master design tokens.' },
    { title: 'Building Accessible Forms', category: 'A11y', badgeVariant: 'outline' as const, date: 'Jan 3', excerpt: 'Create inclusive forms.' },
    { title: 'SSR in Angular', category: 'Angular', badgeVariant: 'secondary' as const, date: 'Dec 28', excerpt: 'Improve SEO with SSR.' },
  ];
}