Implementing Angular Retail Banking

TypeScript
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Button, ListItem, Loader } from '@shared/ui';
import { SomeQuery } from '@shared/api';

@Component({
  selector: 'app-component-name',
  imports: [CommonModule, Button, ListItem, Loader],
  templateUrl: './component-name.html',
  styleUrl: './component-name.css',
})
export class ComponentName {
  private someQuery = inject(SomeQuery);
  data = this.someQuery.getDataQuery();
  
  handleAction() {
    // Implementation
  }
}

Progress:

• Create component folder with .ts, .html, .css, .spec.ts files
• Import required shared UI components from @shared/ui
• Set up state management with TanStack Query and signals
• Build template using utility classes and control flow syntax
• Apply design system tokens and spacing utilities
• Test component with loading/error/success states

Example 1: Data List Component

Input: Create a component showing account transactions with loading state

Output:

TypeScript
// account-transactions.ts
import { Component, inject } from '@angular/core';
import { ListItem, Loader } from '@shared/ui';
import { AccountsQuery } from '@shared/api';

@Component({
  selector: 'app-account-transactions',
  imports: [ListItem, Loader],
  templateUrl: './account-transactions.html',
  styleUrl: './account-transactions.css',
})
export class AccountTransactions {
  private accountsQuery = inject(AccountsQuery);
  transactions = this.accountsQuery.getTransactionsQuery();
}

HTML
<!-- account-transactions.html -->
<div class="card p-4">
  <h2 class="text-xl font-semibold mb-4">Recent Transactions</h2>
  
  @if (transactions.isLoading()) {
    <lib-loader variant="list" [rows]="5"></lib-loader>
  } @else {
    @for (transaction of transactions.data()?.content; track transaction.id) {
      <lib-list-item
        [heading]="transaction.description"
        [subheading]="transaction.date"
        [prefixIcon]="transaction.type === 'DEBIT' ? 'solar:arrow-right-up-linear' : 'solar:arrow-left-down-linear'"
      >
        <div slot="suffix">
          <span [class]="transaction.type === 'DEBIT' ? 'text-red-500' : 'text-green-500'">
            {{ transaction.amount | currency:transaction.currency:'symbol':'1.2-2':'fr' }}
          </span>
        </div>
      </lib-list-item>
    }
  }
</div>

Example 2: Form Dialog Component

Input: Create a dialog for adding a new payee with form validation

Output:

TypeScript
// add-payee-dialog.ts  
import { Component, inject, signal } from '@angular/core';
import { DialogComponent, Button, Input } from '@shared/ui';
import { PayeesQuery } from '@shared/api';

@Component({
  selector: 'app-add-payee-dialog',
  imports: [DialogComponent, Button, Input],
  templateUrl: './add-payee-dialog.html',
  styleUrl: './add-payee-dialog.css',
})
export class AddPayeeDialog {
  private payeesQuery = inject(PayeesQuery);
  
  visible = signal(false);
  payeeData = signal({ name: '', accountNumber: '' });
  
  createMutation = this.payeesQuery.CreatePayeeMutation();
  
  handleSubmit() {
    this.createMutation.mutate(this.payeeData());
  }
}

HTML
<!-- add-payee-dialog.html -->
<lib-dialog [(visible)]="visible">
  <div class="bg-screen p-6 border-radius-2xl">
    <h2 class="text-2xl font-semibold mb-6">Add New Payee</h2>
    
    <div class="flex flex-column gap-4">
      <lib-input
        label="Payee Name"
        placeholder="Enter payee name"
        [(ngModel)]="payeeData().name"
      />
      
      <lib-input
        label="Account Number"
        placeholder="Enter account number"
        [(ngModel)]="payeeData().accountNumber"
      />
      
      <div class="flex gap-3 justify-end">
        <lib-button
          label="Cancel"
          variant="outline"
          (onClick)="visible.set(false)"
        />
        <lib-button
          label="Add Payee"
          variant="primary"
          [loading]="createMutation.isPending()"
          (onClick)="handleSubmit()"
        />
      </div>
    </div>
  </div>
</lib-dialog>