how in component.ts work with events onclick ?

[Andy Ristar]

i have table with button edit and delete.  i want when i click on element delete_forever – send api http

this code in meeting.component.html
<smart-table #grid id="grid"  [dataSource]="dataSource"
             [paging]="meetingsDataSettings.paging" [sortMode]="meetingsDataSettings.sortMode"
             [tooltip]="meetingsDataSettings.tooltip" [onInit]="meetingsDataSettings.onInit"
             [columns]="meetingsDataSettings.columns" [filtering]="meetingsDataSettings.filtering"
             [filterRow]="meetingsDataSettings.filterRow" [pageIndex]="meetingsDataSettings.pageIndex" [pageSize]= "meetingsDataSettings.pageSize"
             [selection]="meetingsDataSettings.selection" [editing]="meetingsDataSettings.editing"
             (onCellEndEdit)="onItemAfterEdit($event)"
></smart-table>

 

this code in meeting.component.ts    How in this place work with events onclick ? i have table with button edit and delete.
columns: [
  { label: 'id', dataField: 'id', dataType: 'number', responsivePriority: 3, width: 50 },
  { label: 'Дата собрания', dataField: 'meetingDate', dataType: 'string', responsivePriority: 3 },
  { label: 'Адрес', dataField: 'address', dataType: 'string', responsivePriority: 4 },
  { label: 'Инициатор', dataField: 'initiator', dataType: 'string' },
  { label: 'Кол-во собственников', dataField: 'ownerCount', dataType: 'number' },
  { label: 'Кол-во вопросов', dataField: 'questionCount', dataType: 'number', responsivePriority: 3 },
  { label: 'Статус собрания', dataField: 'meetingStatus', dataType: 'number', responsivePriority: 3 },
  { label: 'Статус оплаты', dataField: 'paymentStatus', dataType: 'number', responsivePriority: 3 },
  { label: 'Комментарий', dataField: 'comment', dataType: 'string', responsivePriority: 3 },
  {
    label: '', dataField: 'action', allowEdit: false, width: 90,
    formatFunction: function (settings: any) {
      settings.template = '' +
        '<div class="actions-container">' +
           '' +
           '<i class="material-icons">edit</i>' + ''
        +
        '' +
        '<i class="material-icons">delete_forever</i>' + ''
      + '</div>';
    }
  },
],

and i have meetingService.ts.  This meetingService.ts have http method getMeetings 

FOR example

getMeetings (): Observable<any> {
  return this.http.get(this.meetingsUrl)
    .pipe(
      catchError(this.handleError('getMeetings', []))
    );
}

delete (): Observable<any> { some action ); }

• This topic was modified 9 months, 3 weeks ago by Andy Ristar.
• This topic was modified 9 months, 3 weeks ago by Andy Ristar.

[ivanpeevski]

Hi Andy,

 

Please see the demo here  – https://www.htmlelements.com/demos/table/server-side-crud/

It shows you how to capture the click of a button inside a row. It can be achieved with event.target.closest()

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

 

[Author]

Posts