← Back to Tutorials Chapter 11

Animations & UI

Angular comes with a powerful animation system and integrates with many UI component libraries. This chapter covers Angular's built-in animation DSL and popular third-party UI frameworks.

Angular Animations

The @angular/animations package provides a declarative way to define motion in your application. Import BrowserAnimationsModule to enable the animation engine.

// app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [BrowserAnimationsModule]
})
export class AppModule { }

trigger & state

Use trigger to bind an animation to a template element. Define state for each visual phase and transition for how to move between them.

// fade.animation.ts
import { trigger, state, style, transition, animate } from '@angular/animations';

export const fadeAnimation = trigger('fade', [
  state('void', style({ opacity: 0 })),
  transition(':enter, :leave', [
    animate('300ms ease-in-out')
  ])
]);

keyframes

For more complex sequences, use keyframes to define intermediate steps within a single transition.

trigger('bounce', [
  transition('* => *', [
    animate('1s', keyframes([
      style({ transform: 'translateY(0)', offset: 0 }),
      style({ transform: 'translateY(-30px)', offset: 0.5 }),
      style({ transform: 'translateY(0)', offset: 1 })
    ]))
  ])
])

Angular Material

Angular Material is Google's official component library for Angular, built on top of Material Design. It provides reusable, accessible UI components.

Common Material Components

• MatButton — Styled buttons with ripple effects
• MatCard — Content containers with elevation
• MatTable — Data tables with sorting, filtering, and pagination
• MatDialog — Modal dialogs for confirmations or forms
• MatFormField — Input fields with labels, hints, and validation

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatTableModule } from '@angular/material/table';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';

PrimeNG

PrimeNG is a rich set of open-source UI components. It includes advanced widgets like tree tables, charts, editors, and schedules.

// app.module.ts
import { TableModule } from 'primeng/table';
import { CalendarModule } from 'primeng/calendar';
import { DropdownModule } from 'primeng/dropdown';

@NgModule({
  imports: [TableModule, CalendarModule, DropdownModule]
})
export class AppModule { }

Bootstrap with Angular

You can use Bootstrap's CSS classes and grid system in Angular projects. For interactive components (modals, tooltips), install ngx-bootstrap or @ng-bootstrap/ng-bootstrap.

npm install bootstrap @ng-bootstrap/ng-bootstrap

Icons

Popular icon libraries include Font Awesome and Material Icons. Install the corresponding Angular packages for seamless integration.

npm install @fortawesome/angular-fontawesome
npm install @angular/material

// Using Font Awesome
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faUser } from '@fortawesome/free-solid-svg-icons';

Tables with Sorting & Filtering

Combine MatTable with MatSort and MatPaginator for a fully interactive data table.

import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';

@Component({ ... })
export class UsersComponent implements AfterViewInit {
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  dataSource = new MatTableDataSource<User>([]);

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }
}

Carousel

Use Angular Material's carousel or PrimeNG's Carousel component to display rotating content, banners, or product images.

<p-carousel [value]="images" [numVisible]="3" [circular]="true">
  <ng-template let-image pTemplate="item">
    <img [src]="image.src" [alt]="image.alt" />
  </ng-template>
</p-carousel>

Dropdowns & Datepickers

Both Material and PrimeNG provide feature-rich dropdown selectors and date pickers with localization support.