Newsletter

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface NewsletterIssue {
  id: string
  issueNumber: number
  volumeDate: string
  title: string
  excerpt: string
  category: 'Architecture' | 'Design Tokens' | 'Performance' | 'Interviews'
  tags: string[]
  readTime: string
  date: string
  commentsCount: number
  likesCount: number
  featured?: boolean
}

interface ChannelOption {
  id: string
  title: string
  frequency: string
  description: string
  badge: string
}

interface RecentIssue {
  id: number
  date: string
  title: string
  reads: string
  tags: string[]
  snippet: string
}

Files installed (5)

• src/app/components/blocks/newsletter/newsletter-inline-band.component.ts3.2 kB

  Copy

  // Slim inline signup band (quartet member): inline field, submit, and a status row reserved
  // from first paint so confirming never shifts the page. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'
  import { Check, LucideAngularModule, Mail } from 'lucide-angular'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiInputComponent } from '@/ui/input/input.component'
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-newsletter-inline-band, [ui-newsletter-inline-band]',
    standalone: true,
    // The block renders its own root <section>: keep the host out of layout.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiInputComponent],
    template: `
      <section data-slot="newsletter-inline-band" class="border-border bg-muted/40 border-y">
        <div class="mx-auto flex max-w-6xl flex-col gap-6 px-6 py-10 lg:flex-row lg:items-center lg:gap-12">
          <div class="min-w-0 lg:flex-1">
            <div class="flex items-center gap-2">
              <lucide-icon [img]="Mail" class="text-muted-foreground size-4" aria-hidden="true" />
              <span ui-badge variant="secondary">Monthly</span>
            </div>
            <p class="mt-2.5 text-lg leading-snug font-medium text-balance">
              Engineering notes on metric modelling, access control, and warehouse cost.
            </p>
            <p class="text-muted-foreground mt-1.5 text-sm">
              Read by 8,400 data and finance engineers. One email a month, no product announcements.
            </p>
          </div>
  
          <form class="lg:w-[26rem] lg:shrink-0" (submit)="subscribe($event)">
            <div class="flex gap-2">
              <ui-input
                [value]="email()"
                (valueChange)="email.set($event)"
                type="email"
                required
                placeholder="[email protected]"
                autoComplete="email"
                aria-label="Email address"
              />
              <button ui-button type="submit" class="shrink-0">Subscribe</button>
            </div>
            <!-- Status row is reserved from first paint, so confirming does not
                 nudge the band's height and shift the page under the cursor. -->
            <p class="mt-2 min-h-5 text-xs" aria-live="polite">
              @if (submitted()) {
                <span class="text-success inline-flex items-center gap-1.5">
                  <lucide-icon [img]="Check" class="size-3" aria-hidden="true" />
                  Check your inbox to confirm.
                </span>
              } @else {
                <span class="text-muted-foreground">Unsubscribe in one click. We never share the list.</span>
              }
            </p>
          </form>
        </div>
      </section>
    `,
  })
  export class UiNewsletterInlineBandComponent {
    protected readonly Check = Check
    protected readonly Mail = Mail
  
    @Input('class') className?: string
  
    readonly email = signal('')
    readonly submitted = signal(false)
  
    subscribe(event: Event): void {
      event.preventDefault()
      if (!this.email().trim()) return
      this.submitted.set(true)
    }
  }
  

• src/app/components/blocks/newsletter/newsletter-issue-archive.component.ts23.9 kB

  Copy
• src/app/components/blocks/newsletter/newsletter-signup.component.ts12.7 kB

  Copy
• src/app/components/blocks/newsletter/newsletter-split-preview.component.ts4.7 kB

  Copy
• src/app/components/blocks/newsletter/index.ts0.4 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/newsletter.json