Expert Angular

Upgrading your application component

As part of upgrading the components, we need to create a downgraded Angular component so that it can be consumed by AngularJS code. The following is the code snippet of the downgraded Angular component:

declare var angular:   angular.IAngularStatic;   
import { downgradeComponent } from '@angular/upgrade/static';   
   
@Component({   
  selector: 'book-list',   
  templateUrl: './book-list.template.html'   
})   
export class BookListComponent {   
}   
   
angular.module('bookList')   
  .directive(   
    'bookList',   
    downgradeComponent({component:   BookListComponent}) as            angular.IDirectiveFactory   
);   

Here, we give an instruction to the TypeScript compiler that the directive factory is returned from downgradeComponent. Now we need to register downgradeComponent ...