Taiga UI Migration Guide: From Angular Material to Taiga UI 4.60.0

Overview

This guide provides a comprehensive strategy for migrating G-Track TMS from Angular Material to Taiga UI 4.60.0.

Migration Strategy

Phased Approach

1. Preparation Phase
2. Audit current Angular Material usage
3. Install Taiga UI dependencies

4. Set up compatibility layer

5. Component Replacement

6. Replace core components incrementally
7. Maintain existing functionality

8. Update styling and theming

9. Validation Phase

10. Comprehensive testing
11. Performance benchmarking
12. Accessibility verification

Component Mapping

Form Controls

Angular Material	Taiga UI Equivalent
mat-input	tui-input
mat-checkbox	tui-checkbox
mat-radio	tui-radio
mat-select	tui-select
mat-datepicker	tui-calendar

Layout Components

Angular Material	Taiga UI Equivalent
mat-card	tui-card
mat-expansion-panel	tui-accordion
mat-tabs	tui-tabs
mat-stepper	tui-stepper

Code Transformation Examples

Form Input Migration

// Angular Material
@Component({
  template: `
    <mat-form-field>
      <input matInput placeholder="Name">
    </mat-form-field>
  `
})

// Taiga UI
@Component({
  template: `
    <tui-input>
      <input tuiInput placeholder="Name">
    </tui-input>
  `
})

Button Styles

// Angular Material
<button mat-raised-button color="primary">
  Submit
</button>

// Taiga UI
<button
  tuiButton
  appearance="primary"
  type="button">
  Submit
</button>

Breaking Changes

Major Differences

• Different component selectors
• New event handling mechanisms
• Updated styling approach
• Enhanced reactive form support
• More granular configuration

Performance Improvements

• Smaller bundle size
• More efficient change detection
• Better tree-shaking support
• Enhanced lazy loading capabilities

Common Migration Pitfalls

1. Incorrect import paths
2. Mismatched component properties
3. Styling inconsistencies
4. Missed dependency updates

Migration Checklist

• Update Angular version
• Install Taiga UI dependencies
• Replace component imports
• Update component usage
• Migrate custom styles
• Update form implementations
• Comprehensive testing

Dependency Updates

npm uninstall @angular/material
npm install @taiga-ui/core @taiga-ui/kit

Recommended Tools

• Angular Update Guide
• Taiga UI Migration Assistant
• TypeScript Compiler (strict mode)
• Chrome DevTools Performance Tab

Compatibility Considerations

• Angular 20+ required
• TypeScript 5.6+ recommended
• Node.js 18+ LTS

Rollback Strategy

• Maintain a feature branch
• Use Git versioning
• Keep original Material components as fallback
• Incremental migration approach

Troubleshooting

• Use Taiga UI DevTools
• Check official migration documentation
• Leverage community support channels
• Perform incremental testing

Post-Migration Optimization

• Run performance audits
• Verify accessibility compliance
• Update unit and integration tests
• Document migration changes