mp-common/admin/users/user-list/user-list.component.html

This is XPO MarketPlace common libary

<div class="wrapper">
    <div class="xpo-flex-grid">
        <div class="xpo-col-4 user-search-box">
            <app-search-box class="full-width" id="user-search-box" placeholder="Search Users"></app-search-box>
        </div>
        <div class="col-inline add-user">
            <button class="create-user" id="new-user-btn" xpo-btn="plain" (click)="onNewUser()"><xpo-icon>add</xpo-icon><span class="xpo-hidden">Create New User</span></button>
        </div>
    </div>
    <ul id="user-list" class="xpo-user-list">
        <li class="xpo-flex-grid" *ngFor="let userinfo of allUsersList| searchFilter: searchBoxModel: 'firstName': 'lastName':'email' | paginate : { itemsPerPage: 20, currentPage: p }; let i = index;"
            id="user-{{i}}">
            <div class="xpo-col-4 col-inline user-details">
                <div class="xpo-bold" id="user-name-{{i}}">{{userinfo.firstName}} {{userinfo.lastName}}</div>
                <div id="user-email-{{i}}">{{userinfo.email}}</div>
            </div>
            <div class="xpo-col-3 xpo-hidden"> Associated Division - Role
                <div *ngFor="let userRoles of userinfo.roles; let j = index;" id="user-{{i}}-role-{{j}}">
                    {{userRoles.divisionName}} - {{userRoles.roleName}}
                </div>
            </div>
            <div class="xpo-col-1 col-inline">
                <button id="edit-user-{{i}}-btn" xpo-btn="plain" (click)="onEditUser(userinfo.id)">Edit</button>
            </div>
        </li>
    </ul>
    <pagination-controls (pageChange)="p = $event" #pagination></pagination-controls>
</div>