2

i have play and start custom button. When i click on play icon Stop icon should be visible and play icon should be hide for row where i clicked.

<ng2-smart-table [settings]="settings" [source]="source" (userRowSelect)="AdapInformation($event)"  (deleteConfirm)="onDeleteAdap($event)">

settings = {
    
   actions: {
  columnTitle: 'Action',
  position: 'right',
  add: false,
    
       edit:false,
    custom: [
        { name: 'startAdaptor', title: '<i class="startAdded nb-play nbPlayIcon ng2-smart-actions"></i>' },
        { name: 'stopAdaptor', title: '<i class="stopAdded nb-square ng2-smart-actions"></i>' },
        { name: 'editAdaptor', title: '<i class="nb-edit nbeditStyle ng2-smart-actions"></i>' }

    ],
 },
  .....
  
  }

how to solved ?

Jatin Dobariya
  • 81
  • 2
  • 8

1 Answers1

2

I think the simplest way to do this would be with a custom component. You can specify a column where the component will be rendered on each row and encapsulate the play/stop behavior in this component.

First, create a custom component, for example MediaControlComponent:

@Component({
selector: 'ngx-media-control',
template: `<a href="javascript:void(0)" (click)="onClick()">
    <i *ngIf="!isPlaying" class="nb-play"></i>
    <i *ngIf="isPlaying" class="nb-square"></i></a>`,
})
export class MediaControlComponent implements OnInit {
    public isPlaying: boolean;
    public renderValue: string;

    @Input() value: string | number;
    @Input() rowData: any;

    @Output() save: EventEmitter<any> = new EventEmitter();

    constructor() {
    }

    ngOnInit() {
        this.renderValue = this.value.toString().toUpperCase();
    }

    onClick() {
        this.isPlaying = this.isPlaying ? false : true;
        this.save.emit(this.rowData);
    }
}

Make sure you add this component in your module, both in imports and entryComponents.

Then, in your ng2-smart-table settings, add a column:

mediaControl: {
    title: 'mediaControl',
    type: 'custom',
    renderComponent: MediaControlComponent,
    onComponentInitFunction: (instance: any) => {
        instance.save.subscribe(row => {
            // Do something (you have the row information in the `row` variable).
        });
    }
},

That's it! You'll have the behavior you want for the play/stop button, as well as a way to make something happen when the play/stop button is clicked.

Note: I am not rendering the custom component in the action part of ng2-smart-table settings due to it not working when I tried it (I am rendering it in a column instead). If you can make it work, go ahead.

Hacène
  • 253
  • 1
  • 8