Posts

Status Column with icons In afi listing page

    < td mat-cell *matCellDef = "let element" >                   < ng-container [ngSwitch] = "element.AFIprogressState" >                     <!-- Not Initiated -->                     < span *ngSwitchCase = "0" title = "Not Initiated" class = "status-hover" >                       < mat-icon color = "warn" style = " vertical-align: middle;" > hourglass_empty </ mat-icon >                       < span class = "label status-label" > Not Initiated </ span >                     </ span >                     <!-- Started -->           ...

imp link

 https://www.youtube.com/watch?v=zlybQJVLYrQ

app design

 https://www.behance.net/gallery/115223007/NEARBY-_-Home-service-App-UX-case-Study

after add user data paginationissue

    // Update paginator and sort after data change           if ( this . paginator ) {             this . dataSource . paginator = this . paginator ;           }           if ( this . sort ) {             this . dataSource . sort = this . sort ;           }

on mouse hover show icons

Image
on mouse hover show icons     < ng-container matColumnDef = "AFINumber" >                 < th mat-header-cell *matHeaderCellDef mat-sort-header >                   AFI Number                 </ th >                 < td mat-cell *matCellDef = "let element" class = "afi-number-cell d-flex align-items-center" >                   < div class = "d-flex align-items-center" >                     < span                       class = "afi-number-hover-group"                       style = " display: inline-flex; align-items: center;"             ...

BEST UI designs

 good UI design https://dribbble.com/shots/26102794-Grabby-Food-Delivery-App https://dribbble.com/shots/20783239-Car-pooling-app