migration-patterns

Query Angular migration patterns and examples. This skill loads the migration documentation and helps with pattern lookup and answering migration questions.

Arguments

• $ARGUMENTS - Query keyword or question:
  • table - Table migration patterns (CommonTableComponent)
  • form - Form patterns (validators, NonNullableFormBuilder)
  • dialog - Dialog patterns (config, loading, viewContainerRef)
  • layout - Page layout (gl-page-content, content-wrapper)
  • button - Button patterns (mat-flat-button, loading states)
  • ddd - DDD architecture (domain/features/ui/shell)
  • api - API type definitions
  • store - SignalStore patterns
  • syntax - Angular 20 syntax (@if, @for, inject, signal)
  • validator - OneValidators usage
  • error - Error handling patterns
  • pitfall - Common pitfalls to avoid
  • Or ask any question about migration

Note: For code review/linting, use /migration-lint instead.

Workflow

Step 1: Load Relevant Documentation

Based on the query, read the appropriate documentation files from rules/:

| Query | Files to Read | |-------|---------------| | table | tables/basics.md, tables/columns.md, tables/advanced.md | | form | forms/validators.md, forms/patterns.md, ui/forms.md | | dialog | ui/dialogs.md | | layout | ui/page-layout.md | | button | ui/buttons.md | | ddd | ddd-architecture.md | | api | api-types.md | | store | state-management.md | | syntax | angular-syntax.md | | validator | forms/validators.md | | error | forms/error-handling.md | | pitfall | pitfalls/index.md |

Step 2: Process Query

For keyword queries (table, form, etc.):

• Summarize the key patterns and rules
• Provide code examples
• List common mistakes to avoid

For questions:

• Search through all migration docs
• Provide specific answers with code examples
• Reference the source document

Quick Reference

Table Components (UI Layer)

// Required imports for custom column templates
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';

@Component({
  imports: [
    CommonTableComponent,
    MatSortModule,   // Required for mat-sort-header
    MatTableModule,  // Required for matColumnDef, *matCellDef
  ]
})

Form Validation

import { OneValidators } from '@one-ui/mxsecurity/shared/domain';

// Correct
this.#fb.group({
  name: ['', [OneValidators.required, OneValidators.maxLength(32)]],
  ip: ['', [OneValidators.required, ipv4Validator]]
});

Form Field Tooltip (mxLabelTooltip)

DO NOT use mat-icon with matTooltip. Use mxLabelTooltip directive on mat-label instead.

<!-- WRONG - Don't use mat-icon with info tooltip -->
<div class="form-row">
  <mat-form-field>
    <mat-label>{{ t('field.label') }}</mat-label>
    <mat-select formControlName="field">...</mat-select>
  </mat-form-field>
  <mat-icon class="info-icon" [matTooltip]="t('field.hint')">info</mat-icon>
</div>

<!-- CORRECT - Use mxLabelTooltip -->
<mat-form-field>
  <mat-label mxLabel [mxLabelTooltip]="t('field.hint')">
    {{ t('field.label') }}
  </mat-label>
  <mat-select formControlName="field">...</mat-select>
</mat-form-field>

Required import:

import { MxLabelDirective } from '@moxa/formoxa/mx-label';

@Component({
  imports: [MxLabelDirective]
})

Button Types

<!-- Form submit button -->
<button mat-flat-button color="primary" type="submit">Apply</button>

<!-- Table toolbar button -->
<button mat-stroked-button>Create</button>

Page Layout

<div *transloco="let t" class="gl-page-content">
  <one-ui-breadcrumb />
  <mx-page-title [title]="t('page.title')" />

  <div class="content-wrapper">
    <!-- content here -->
  </div>
</div>

Card Container (IMPORTANT)

DO NOT use <mat-card>. Always use class="content-wrapper" instead.

<!-- WRONG - Don't use mat-card -->
<mat-card>
  <mat-card-header>...</mat-card-header>
  <mat-card-content>...</mat-card-content>
</mat-card>

<!-- CORRECT - Use content-wrapper -->
<div class="content-wrapper">
  <!-- content here -->
</div>

<!-- If you need mat-card structure, add content-wrapper class -->
<mat-card class="content-wrapper">
  <mat-card-header>...</mat-card-header>
  <mat-card-content>...</mat-card-content>
</mat-card>

The content-wrapper class provides:

• Consistent padding (16px)
• Border radius (8px)
• Surface background color
• Gap between child elements (8px)

Dialog Config

import { mediumDialogConfig } from '@one-ui/mxsecurity/shared/domain';

this.#dialog.open(MyDialog, {
  ...mediumDialogConfig,
  data: dialogData,
  viewContainerRef: this.#viewContainerRef  // Required if dialog uses store
});

Output Format

For keyword queries:

Provide a concise summary with:

1. Key rules (do's and don'ts)
2. Code examples
3. Common mistakes

For questions:

Provide the answer with:

1. Direct answer
2. Code example
3. Source reference (which doc file)