book.component.html

<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col col-md-6">
                <h5 class="card-title">
                    {{ '::Menu:Books' | abpLocalization }}
                </h5>
            </div>
            <div class="text-end col col-md-6">
                <div class="text-lg-end pt-2">
                    <button 
                      *abpPermission="'BookStore.Books.Create'" 
                      id="create" 
                      class="btn btn-primary" 
                      type="button" 
                      [routerLink]="['create']"
                      >
                        <i class="fa fa-plus me-1"></i>
                        <span>{{ '::NewBook' | abpLocalization }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <ngx-datatable [rows]="book.items" [count]="book.totalCount" [list]="list" default>
            <ngx-datatable-column [name]="'::Actions' | abpLocalization" [maxWidth]="150" [sortable]="false">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <div ngbDropdown container="body" class="d-inline-block">
                        <button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" ngbDropdownToggle>
                            <i class="fa fa-cog me-1"></i>{{ '::Actions' | abpLocalization }}
                        </button>
                        <div ngbDropdownMenu>
                            <button 
                              *abpPermission="'BookStore.Books.Edit'" 
                              ngbDropdownItem 
                              [routerLink]="['edit', row.id]"
                              >
                                {{ '::Edit' | abpLocalization }}
                            </button>
                            <button *abpPermission="'BookStore.Books.Delete'" ngbDropdownItem (click)="delete(row.id)">
                                {{ '::Delete' | abpLocalization }}
                            </button>
                        </div>
                    </div>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
            <ngx-datatable-column [name]="'::Author' | abpLocalization" prop="authorName"
                [sortable]="false"></ngx-datatable-column>

            <ngx-datatable-column [name]="'::Type' | abpLocalization" prop="type">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    {{ '::Enum:BookType.' + row.type | abpLocalization }}1
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [name]="'::PublishDate' | abpLocalization" prop="publishDate">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    {{ row.publishDate | date }}
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [name]="'::Price' | abpLocalization" prop="price">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    {{ row.price | currency }}
                </ng-template>
            </ngx-datatable-column>
        </ngx-datatable>
    </div>
</div>