Transfer

Angular Bootstrap 5 Transfer plugin

Transfer component allows you to transfer the data between two columns.

Transfer plugin built with the latest Bootstrap 5, Angular and Material Design. Transfer data between two columns. Supports disabled items, one way transfer, pagination, and more.

Note: Read the API tab to find all available options and advanced customization

Basic example

To create basic example just add `mdb-transfer` container

        
            
              <mdb-transfer [dataSource]="dataSource"></mdb-transfer>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { MdbTransferData } from 'mdb-angular-transfer/src/public-api';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                constructor() {}
              
                dataSource: Array<MdbTransferData> = [
                  { data: 'Lorem ipsum' },
                  { data: 'Something special' },
                  { data: 'John Wick' },
                  { data: 'Poland' },
                  { data: 'Germany' },
                  { data: 'USA' },
                  { data: 'China' },
                  { data: 'Madagascar' },
                  { data: 'Argentina' },
                ];
              }

Disabled items

To make some of elements unable to select just add 'disabled: true' property to proper item. 

        
            
            <mdb-transfer [dataSource]="dataSource" [dataTarget]="dataTarget"></mdb-transfer>
            
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbTransferData } from 'mdb-angular-transfer/src/public-api';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              constructor() {}
            
              dataSource: Array<MdbTransferData> = [
                { data: 'Lorem ipsum' },
                { data: 'Something special', disabled: true },
                { data: 'John Wick', disabled: true },
                { data: 'Poland' },
                { data: 'Germany' },
                { data: 'USA' },
                { data: 'China' },
                { data: 'Madagascar', disabled: true },
                { data: 'Argentina' },
              ];
            
              dataTarget: Array<MdbTransferData> = [
                { data: 'Russia', disabled: true },
                { data: 'Australia' },
                { data: 'Hungary', disabled: true },
                { data: 'France' },
              ];
            }

Checked items

By adding property 'checked: true' to item during initialization you can make element mark. 

        
            
            <mdb-transfer [dataSource]="dataSource" [dataTarget]="dataTarget"></mdb-transfer>
            
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbTransferData } from 'mdb-angular-transfer/src/public-api';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              constructor() {}
            
              dataSource: Array<MdbTransferData> = [
                { data: 'Lorem ipsum', checked: true },
                { data: 'Something special', checked: true },
                { data: 'John Wick', checked: true },
                { data: 'Poland' },
                { data: 'Germany' },
                { data: 'USA', checked: true },
                { data: 'China' },
                { data: 'Madagascar' },
                { data: 'Argentina' },
              ];
            
              dataTarget: Array<MdbTransferData> = [
                { data: 'Russia', checked: true },
                { data: 'Australia', checked: true },
                { data: 'Hungary' },
                { data: 'France' },
              ];
            }

One way

By adding '[oneWay]="true"' you can set your component to transfer data only to target table. 

        
            
            <mdb-transfer [dataSource]="dataSource" [dataTarget]="dataTarget" [oneWay]="true"></mdb-transfer>
            
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbTransferData } from 'mdb-angular-transfer/src/public-api';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              constructor() {}
            
              dataSource: Array<MdbTransferData> = [
                { data: 'Lorem ipsum', checked: true },
                { data: 'Something special', checked: true },
                { data: 'John Wick', checked: true },
                { data: 'Poland' },
                { data: 'Germany' },
                { data: 'USA', checked: true },
                { data: 'China' },
                { data: 'Madagascar' },
                { data: 'Argentina' },
              ];
            
              dataTarget: Array<MdbTransferData> = [
                { data: 'Russia', checked: true },
                { data: 'Australia', checked: true },
                { data: 'Hungary' },
                { data: 'France' },
              ];
            }

Pagination

By adding '[pagination]="true"' you can set pagination on transfer component.

        
            
          <mdb-transfer [dataSource]="dataSource" [dataTarget]="dataTarget" [pagination]="true"></mdb-transfer>
          
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbTransferData } from 'mdb-angular-transfer/src/public-api';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
          })
          export class AppComponent {
            constructor() {}
          
            dataSource: Array<MdbTransferData> = [
              { data: 'Lorem ipsum', checked: true },
              { data: 'Something special', checked: true },
              { data: 'John Wick', checked: true },
              { data: 'Poland' },
              { data: 'Germany', disabled: true },
              { data: 'USA', checked: true },
              { data: 'China' },
              { data: 'Madagascar' },
              { data: 'Argentina' },
            ];
          
            dataTarget: Array<MdbTransferData> = [
              { data: 'Russia', checked: true },
              { data: 'Australia', checked: true },
              { data: 'Hungary' },
              { data: 'France' },
            ];
          }

Pagination with custom quantity

Furthermore, if you want to set custom number of elements per page then just use 'elementsPerPage' input. 

        
            
            <mdb-transfer 
              [dataSource]="dataSource"
              [dataTarget]="dataTarget"
              [pagination]="true"
              [elementsPerPage]=7
            ></mdb-transfer>
            
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbTransferData } from 'mdb-angular-transfer/src/public-api';
  
            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              constructor() {}
            
              dataSource: Array<MdbTransferData> = [
                { data: 'Lorem ipsum', checked: true },
                { data: 'Something special', checked: true },
                { data: 'John Wick', checked: true },
                { data: 'Poland' },
                { data: 'Germany', disabled: true },
                { data: 'USA', checked: true },
                { data: 'China' },
                { data: 'Madagascar' },
                { data: 'Argentina' },
              ];
            
              dataTarget: Array<MdbTransferData> = [
                { data: 'Russia', checked: true },
                { data: 'Australia', checked: true },
                { data: 'Hungary' },
                { data: 'France' },
              ];
            }

Transfer - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

        
            
     npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/transfer

Import

        
            
        import { MdbTransferModule } from 'mdb-angular-transfer';
        …
        @NgModule ({
          ...
          imports: [MdbTransferModule],
          ...
        })
        
        
    
        
            
        @import 'mdb-angular-transfer/scss/transfer.scss';

Inputs

Name Type Default Description
dataTarget Array [] Add data to target table
dataSource Array [] Add data to source table
elementsPerPage Number 5 Works only with 'pagination:true'. Set number of items per page
oneWay Boolean false Allows you to set a way of sending data between tables
pagination Boolean false Add pagination to your transfer component
search Boolean false Add search box to trnsfer component

Outputs

Name Type Description
itemSearch EventEmitter<void> Emitted after you search some items in search box.
itemSelect EventEmitter<void> Emitted after you select some item.
listChange EventEmitter<void> Emitted after the data changes. 
        
            
            <mdb-transfer
            [dataSource]="dataSource"
            (listChange)="onChangeEvent()"
          ></mdb-transfer>                                       
            
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbTransferData } from 'mdb-angular-transfer';
            
            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              dataSource: Array<MdbTransferData> = [
                { data: 'Lorem ipsum' },
                { data: 'Something special' },
                { data: 'John Wick' },
                { data: 'Poland' },
                { data: 'Germany' },
                { data: 'USA' },
                { data: 'China' },
                { data: 'Madagascar' },
                { data: 'Argentina' },
              ];
            
              onChangeEvent(): void {
                console.log('transfer change');
              }
            }

Advanced types

MdbTransferData

        
            
            interface MdbTransferData {
              data: string;
              id?: string;
              checked?: boolean;
              disabled?: boolean;
            }