Pages UI
v5.0.1 - Pages Angular
v5.0.1 - Pages Angular
  • Getting Started
  • Layouts
  • Routing
  • Styles
  • Layout Components
    • Header
    • Menu Items
    • Sidebar
    • Horizontal Menu
    • Secondary Sidebar
    • Quick View
    • Overlay Search
  • Directives
    • Parallax
    • Retina Image
  • Bootstrap Components
  • Forms
    • Checkbox and Radio
    • Form Group
    • Input Helpers
    • Switch Toggle
    • Select
    • Select FX
    • Typeahead
    • Date Picker
    • Time Picker
    • Quill Editor
    • File Uploader
  • UI Components
    • Progress Bar
    • List View
    • Cards
    • Social Cards
    • Collapse
    • Tabs
    • Tree View
    • Sliders
    • Notifications
  • Tables / Datatables
  • Maps
  • Session and other pages
  • Service
  • Dashboards
  • Widgets
  • Charts
  • Change log
Powered by GitBook
On this page
  • Importing
  • How to use
  1. UI Components

List View

Pages List View

Importing

First import it to your app module or any submodule as you wish

import { pgListViewModule} from './@pages/components/list-view/list-view.module';
@NgModule({
  imports: [pgListViewModule,...]
})
export class AppModule(){}

How to use

Basic Select with Search

<pg-list-view-container class="scrollable full-height" [perfectScrollbar]="config">
    <pg-list-item *ngFor="let group of userList">
        <ng-template #ItemHeading>
            {{group.group}}
        </ng-template>
      <li class="chat-user-list clearfix"  *ngFor="let user of group.users">
        <a pg-view-trigger parentView="chat" animationType="push-parrallax">
            <span class="thumbnail-wrapper d32 circular bg-success">
                <img width="34" height="34" alt="" src="{{user.img}}" class="col-top">
            </span>
            <p class="p-l-10 ">
              <span class="text-master">{{user.username}}</span>
              <span class="block text-master hint-text fs-12">{{user.lastMessage}}</span>
            </p>
          </a>
        </li>
    </pg-list-item>
</pg-list-view-container>
userList = [];

PreviousProgress BarNextCards

Last updated 7 years ago