Animate state and style link

You can define a set of styles together to make up a specific state for animating elements and transitions. These states represent style at certain points in your animations that you can animate to and from. For example, you can animate a state as the starting point to a different state and the end of an animation.

What is a state? link

A state is the condition of an animation. The Angular state() function takes two parameters: a unique name and a style. There is also an optional parameter.

Why would you want to use state? link

Aliasing a set of styles and allows you to reference that alias for animations in general. This can make animations more readable or more understandable at a glance. You can give animations a useful and descriptive state name, which allows you to quickly understand the purpose of that animation state.

Use Angular's state() function to define different states to call at the end of each transition. This function takes two arguments: A unique name like open or closed and a style() function.

Use the style() function to define a set of styles to associate with a given state name. You must use camelCase for style attributes that contain dashes, such as backgroundColor or wrap them in quotes, such as 'background-color' .

Angular's state() function works with the style⁣­(⁠) function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the open state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color.

      
        content_copy
      
      // ...
state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
})),
    

In the following closed state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue.

      
        content_copy
      
      state('closed', style({
  height: '100px',
  opacity: 0.8,
  backgroundColor: 'blue'
})),
    

Accessibility in Angular link

The web is used by a wide variety of people, including those who have visual or motor impairments. A variety of assistive technologies are available that make it much easier for these groups to interact with web-based software applications. Also, designing an application to be more accessible generally improves the user experience for all users.

For an in-depth introduction to issues and techniques for designing accessible applications, see the Accessibility section of the Google's Web Fundamentals.

This page discusses best practices for designing Angular applications that work well for all users, including those who rely on assistive technologies.

Accessibility attributes link

Building accessible web experience often involves setting Accessible Rich Internet Applications (ARIA) attributes to provide semantic meaning where it might otherwise be missing. Use attribute binding template syntax to control the values of accessibility-related attributes.

When binding to ARIA attributes in Angular, you must use the attr. prefix. The ARIA specification depends specifically on HTML attributes rather than properties of DOM elements.

      
        content_copy
      
      <!-- Use attr. when binding to an ARIA attribute -->
<button [attr.aria-label]="myActionLabel">…</button>
    

      
        content_copy
      
      <!-- Static ARIA attributes require no extra syntax -->
<button aria-label="Save document">…</button>
    

Angular UI components link

The Angular Material library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible. The Component Development Kit (CDK) includes the a11y package that provides tools to support various areas of accessibility. For example:

• LiveAnnouncer is used to announce messages for screen-reader users using an aria-live region. See the W3C documentation for more information on aria-live regions.

• The cdkTrapFocus directive traps Tab-key focus within an element. Use it to create accessible experience for components such as modal dialogs, where focus must be constrained.

For full details of these and other tools, see the Angular CDK accessibility overview.

Augmenting native elements link

Native HTML elements capture several standard interaction patterns that are important to accessibility. When authoring Angular components, you should re-use these native elements directly when possible, rather than re-implementing well-supported behaviors.

For example, instead of creating a custom element for a new variety of button, create a component that uses an attribute selector with a native <button> element. This most commonly applies to <button> and <a> , but can be used with many other types of element.

You can see examples of this pattern in Angular Material: MatButton , MatTabNav , and MatTable .

Using containers for native elements link

Sometimes using the appropriate native element requires a container element. For example, the native <input> element cannot have children, so any custom text entry components need to wrap an <input> with extra elements. By just including <input> in your custom component's template, it's impossible for your component's users to set arbitrary properties and attributes to the <input> element. Instead, create a container component that uses content projection to include the native control in the component's API.

You can see MatFormField as an example of this pattern.

Case study: Building a custom progress bar link

The following example shows how to make a progress bar accessible by using host binding to control accessibility-related attributes.

• The component defines an accessibility-enabled element with both the standard HTML attribute role , and ARIA attributes. The ARIA attribute aria-valuenow is bound to the user's input.

  src/app/progress-bar.component.ts

        
          content_copy
        
        import { Component, Input } from '@angular/core';
  
  /**
   * Example progressbar component.
   */
  @Component({
    selector: 'app-example-progressbar',
    template: '<div class="bar" [style.width.%]="value"></div>',
    styleUrls: ['./progress-bar.component.css'],
    host: {
      // Sets the role for this component to "progressbar"
      role: 'progressbar',
  
      // Sets the minimum and maximum values for the progressbar role.
      'aria-valuemin': '0',
      'aria-valuemax': '100',
  
      // Binding that updates the current value of the progressbar.
      '[attr.aria-valuenow]': 'value',
    }
  })
  export class ExampleProgressbarComponent  {
    /** Current value of the progressbar. */
    @Input() value = 0;
  }
      

• In the template, the aria-label attribute ensures that the control is accessible to screen readers.

  src/app/app.component.html

        
          content_copy
        
        <label>
    Enter an example progress value
    <input type="number" min="0" max="100"
        [value]="progress" (input)="setProgress($event)">
  </label>
  
  <!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
  <app-example-progressbar [value]="progress" aria-label="Example of a progress bar">
  </app-example-progressbar>
      

Routing link

Focus management after navigation link

Tracking and controlling focus in a UI is an important consideration in designing for accessibility. When using Angular routing, you should decide where page focus goes upon navigation.

To avoid relying solely on visual cues, you need to make sure your routing code updates focus after page navigation. Use the NavigationEnd event from the Router service to know when to update focus.

The following example shows how to find and focus the main content header in the DOM after navigation.

      
        content_copy
      
      router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
  const mainHeader = document.querySelector('#main-content-header')
  if (mainHeader) {
    mainHeader.focus();
  }
});
    

In a real application, the element that receives focus depends on your specific application structure and layout. The focused element should put users in a position to immediately move into the main content that has just been routed into view. You should avoid situations where focus returns to the body element after a route change.

Active links identification link

CSS classes applied to active RouterLink elements, such as RouterLinkActive , provide a visual cue to identify the active link. Unfortunately, a visual cue doesn't help blind or visually impaired users. Applying the aria-current attribute to the element can help identify the active link. For more information, see Mozilla Developer Network (MDN) aria-current).

The RouterLinkActive directive provides the ariaCurrentWhenActive input which sets the aria-current to a specified value when the link becomes active.

The following example shows how to apply the active-page class to active links as well as setting their aria-current attribute to "page" when they are active:

      
        content_copy
      
      <nav>
  <a routerLink="home"
     routerLinkActive="active-page"
     ariaCurrentWhenActive="page">
    Home
  </a>
  <a routerLink="about"
     routerLinkActive="active-page"
     ariaCurrentWhenActive="page">
    About
  </a>
  <a routerLink="shop"
     routerLinkActive="active-page"
     ariaCurrentWhenActive="page">
    Shop
  </a>
</nav>
    

More information link

• Accessibility - Google Web Fundamentals
• ARIA specification and authoring practices
• Material Design - Accessibility
• Smashing Magazine
• Inclusive Components
• Accessibility Resources and Code Examples
• W3C - Web Accessibility Initiative
• Rob Dodson A11ycasts
• Angular ESLint provides linting rules that can help you make sure your code meets accessibility standards.

Books

• "A Web for Everyone: Designing Accessible User Experiences," Sarah Horton and Whitney Quesenbery
• "Inclusive Design Patterns," Heydon Pickering

AngularJS to Angular concepts: Quick reference link

Angular is the name for the Angular of today and tomorrow.

AngularJS is the name for all v1.x versions of Angular.

This guide helps you transition from AngularJS to Angular by mapping AngularJS syntax to the corresponding Angular syntax.

See the Angular syntax in this live example / download example .

Template basics link

Templates are the user-facing part of an Angular application and are written in HTML. The following table lists some of the key AngularJS template features with their corresponding Angular template syntax.

Bindings / interpolation → bindings / interpolation link

      
      Your favorite hero is: {{vm.favoriteHero}}
    

      
      Your favorite hero is: {{favoriteHero}}
    

Filters → pipes link

      
      <td> 
  {{movie.title | uppercase}} 
</td>
    

      
      <td>{{movie.title | uppercase}}</td>
    

Local variables → input variables link

      
      <tr ng-repeat="movie in vm.movies"> 
  <td> 
    {{movie.title}} 
  </td> 
</tr>
    

      
      <tr *ngFor="let movie of movies">
  <td>{{movie.title}}</td>
</tr>
    

Template directives link

AngularJS provides more than seventy built-in directives for templates. Many of them are not needed in Angular because of its more capable and expressive binding system. The following are some of the key AngularJS built-in directives and their equivalents in Angular.

ng-app → bootstrapping link

      
      <body ng-app="movieHunter">
    

      
      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    

      
      import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
    

ng-class → ngClass link

      
      <div ng-class="{active: isActive}"> 
<div ng-class="{active: isActive, shazam: isImportant}">
    

      
      <div [ngClass]="{'active': isActive}">
<div [ngClass]="{'active': isActive,
                 'shazam': isImportant}">
<div [class.active]="isActive">
    

ng-click → Bind to the click event link

      
      <button ng-click="vm.toggleImage()"> 
<button ng-click="vm.toggleImage($event)">
    

      
      <button type="button" (click)="toggleImage()">
<button type="button" (click)="toggleImage($event)">
    

ng-controller → component decorator link

      
      <div ng-controller="MovieListCtrl as vm">
    

      
      @Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: [ './movie-list.component.css' ],
})
    

ng-hide → Bind to the hidden property link

ng-href → Bind to the href property link

      
      <a ng-href="{{ angularDocsUrl }}"> 
  Angular Docs 
</a>
    

      
      <a ng-href="#{{ moviesHash }}"> 
  Movies 
</a>
    

      
      <a [href]="angularDocsUrl">Angular Docs</a>
    

      
      <a [routerLink]="['/movies']">Movies</a>
    

ng-if → *ngIf link

      
      <table ng-if="movies.length">
    

      
      <table *ngIf="movies.length">
    

ng-model → ngModel link

      
      <input ng-model="vm.favoriteHero" />
    

      
      <input [(ngModel)]="favoriteHero" />
    

ng-repeat → *ngFor link

      
      <tr ng-repeat="movie in vm.movies">
    

      
      <tr *ngFor="let movie of movies">
    

ng-show → Bind to the hidden property link

      
      <h3 ng-show="vm.favoriteHero"> 
  Your favorite hero is: {{vm.favoriteHero}} 
</h3>
    

      
      <h3 [hidden]="!favoriteHero">
  Your favorite hero is: {{favoriteHero}}
</h3>
    

ng-src → Bind to the src property link

      
      <img ng-src="{{movie.imageurl}}">
    

      
      <img [src]="movie.imageurl" [alt]="movie.title">
    

ng-style → ngStyle link

      
      <div ng-style="{color: colorPreference}">
    

      
      <div [ngStyle]="{'color': colorPreference}">
<div [style.color]="colorPreference">
    

ng-switch → ngSwitch link

      
      <div ng-switch="vm.favoriteHero && vm.checkMovieHero(vm.favoriteHero)"> 
  <div ng-switch-when="true"> 
    Excellent choice. 
  </div> 
  <div ng-switch-when="false"> 
    No movie, sorry. 
  </div> 
  <div ng-switch-default> 
    Please enter your favorite hero. 
  </div> 
</div>
    

      
      <span [ngSwitch]="favoriteHero &&
               checkMovieHero(favoriteHero)">
  <p *ngSwitchCase="true">
    Excellent choice!
  </p>
  <p *ngSwitchCase="false">
    No movie, sorry!
  </p>
  <p *ngSwitchDefault>
    Please enter your favorite hero.
  </p>
</span>
    

Filters / pipes link

Angular pipes provide formatting and transformation for data in the template, like AngularJS filters . Many of the built-in filters in AngularJS have corresponding pipes in Angular. For more information on pipes, see Pipes.

currency → currency link

      
      <td> 
  {{movie.price | currency}} 
</td>
    

      
      <td>{{movie.price | currency:'USD':true}}</td>
    

date → date link

      
      <td> 
  {{movie.releaseDate | date}} 
</td>
    

      
      <td>{{movie.releaseDate | date}}</td>
    

filter → none link

      
      <tr ng-repeat="movie in movieList | filter: {title:listFilter}">
    

json → json link

      
      <pre> 
  {{movie | json}} 
</pre>
    

      
      <pre>{{movie | json}}</pre>
    

limitTo → slice link

      
      <tr ng-repeat="movie in movieList | limitTo:2:0">
    

      
      <tr *ngFor="let movie of movies | slice:0:2">
    

lowercase → lowercase link

      
      <td> 
  {{movie.title | lowercase}} 
</td>
    

      
      <td>{{movie.title | lowercase}}</td>
    

number → number link

      
      <td> 
  {{movie.starRating | number}} 
</td>
    

      
      <td>{{movie.starRating | number}}</td>
<td>{{movie.starRating | number:'1.1-2'}}</td>
<td>{{movie.approvalRating | percent: '1.0-2'}}</td>
    

orderBy → none link

      
      <tr ng-repeat="movie in movieList | orderBy : 'title'">
    

Modules / controllers / components link

In both AngularJS and Angular, modules help you organize your application into cohesive blocks of features.

In AngularJS, you write the code that provides the model and the methods for the view in a controller . In Angular, you build a component .

Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript.

Immediately invoked function expression (IIFE) → none link

      
      ( 
  function () { 
    … 
  }() 
);
    

Angular modules → NgModules link

      
      angular .module( 
  "movieHunter", 
  [ 
    "ngRoute" 
  ] 
);
    

      
      import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
    

Controller registration → component decorator link

      
      angular .module( 
  "movieHunter" 
) .controller( 
  "MovieListCtrl", 
  [ 
    "movieService", 
    MovieListCtrl 
  ] 
);
    

      
      @Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: [ './movie-list.component.css' ],
})
    

Controller function → component class link

      
      function MovieListCtrl(movieService) { 
}
    

      
      export class MovieListComponent {
}
    

Dependency injection → dependency injection link

      
      MovieListCtrl.$inject = [ 
  'MovieService' 
]; 
function MovieListCtrl(movieService) { 
}
    

      
      constructor(movieService: MovieService) {
}
    

Style sheets link

Style sheets give your application a nice look. In AngularJS, you specify the style sheets for your entire application. As the application grows over time, the styles for the many parts of the application merge, which can cause unexpected results. In Angular, you can still define style sheets for your entire application. Now you can also encapsulate a style sheet within a specific component.

Link tag → styles configuration or styleUrls link

      
      <link href="styles.css" 
      rel="stylesheet" />
    

      
      "styles": [
  "styles.css"
],
    

      
      styleUrls: [ './movie-list.component.css' ],