import { LiveAnnouncer } from '@angular/cdk/a11y' ; import { AfterViewInit , Component , TemplateRef , ViewChild } from '@angular/core' ; @ Component ( { selector : 'app' , templateUrl : 'app.component.html' , styleUrls : [ 'app.component.css' ] } ) export class AppComponent implements AfterViewInit { cards : DragAndDropComponent [ ] ; list : DragAndDropComponent [ ] ; focus : DragAndDropComponent = null ; direction : string ; @ ViewChild ( 'dropdown' ) dropdownTemplate : TemplateRef < any > ; @ ViewChild ( 'text' ) textTemplate : TemplateRef < any > ; @ ViewChild ( 'buttons' ) buttonsTemplate : TemplateRef < any > ; constructor ( private _liveAnnouncer ) { this . cards = [ { name : 'Actions' , type : 'Dropdown' , icon : 'down' , } , { name : 'Comments' , type : 'Text' , icon : 'document' , } , { name : 'Direction' , type : 'Buttons' , icon : 'divide' , } ] ; this . list = [ ] ; } ngAfterViewInit ( ) { this . cards [ 0 ] . content = this . dropdownTemplate ; this . cards [ 1 ] . content = this . textTemplate ; this . cards [ 2 ] . content = this . buttonsTemplate ; } moveUp ( collection , index , event ) { const item = collection [ index ] ; const target = Math . max ( index - 1 , 0 ) ; collection [ index ] = collection [ target ] ; collection [ target ] = item ; this . focus = item ; event . preventDefault ( ) ; this . _liveAnnouncer . announce ( 'Item moved up.' ) ; setTimeout ( ( ) => ( < HTMLTableRowElement > event . target ) . focus ( ) ) ; } moveDown ( collection , index , event ) { const item = collection [ index ] ; const target = Math . min ( index + 1 , collection . length - 1 ) ; collection [ index ] = collection [ target ] ; collection [ target ] = item ; this . focus = item ; event . preventDefault ( ) ; this . _liveAnnouncer . announce ( 'Item moved down.' ) ; } toList ( sourceCollection , index , event ) { const item = sourceCollection [ index ] ; this . list . push ( item ) ; sourceCollection . splice ( index , 1 ) ; this . focus = item ; event . preventDefault ( ) ; this . _liveAnnouncer . announce ( 'Item moved to list.' ) ; } toCard ( sourceCollection , index , event ) { const item = sourceCollection [ index ] ; this . cards . push ( item ) ; sourceCollection . splice ( index , 1 ) ; this . focus = item ; event . preventDefault ( ) ; this . _liveAnnouncer . announce ( 'Item moved to cards.' ) ; } } class DragAndDropComponent { name : string ; type : string ; icon : string ; content ? : TemplateRef < any > ; }