mp-common/admin/users/division-role/division-role.component.html

This is XPO MarketPlace common libary

<ul id="division-list" class="division-list" *ngFor='let divisionRole of selectedUser.roles; let i = index'>

  <xpo-card *ngIf="divisionNames[i].divisionName">
    <card-header>
      <card-title class="division-role-card-title">
        {{divisionNames[i].divisionName}}
      </card-title>
      <xpo-icon *ngIf="divisionNames[i].roleName" id="div-close-icon" (click)="onDeleteDivisionRole(i)">close</xpo-icon>
    </card-header>
    <card-content>
      <li>
        <xpo-select-container for="role">
          <xpo-select placeholder="Role: " type="select" id="role-{{i}}" name="role-{{i}}" [(ngModel)]="divisionNames[i].roleName"
            (change)="onSelectRole(i)" required>
            <xpo-option *ngFor="let r of roles[i] " id="role-name-{{i}}" value={{r.roleName}} required>{{r.roleName}}</xpo-option>
          </xpo-select>
        </xpo-select-container>
      </li>
    </card-content>
  </xpo-card>

  <li *ngIf="!divisionNames[i].divisionName && selectedUser.roles.length<=numberOfDivisions">
    <xpo-select-container for="division" class="division-role-block">
      <xpo-select placeholder="Division: " type="select" id="division-{{i}}" name="division-{{i}}" [(ngModel)]="divisionNames[i].divisionName"
        (change)="onSelect(i)" required>
        <xpo-option *ngFor="let d of divisions" id="division-name-{{i}}" value={{d.divisionName}} required>{{d.divisionName}}</xpo-option>
      </xpo-select>
    </xpo-select-container>
  </li>
</ul>
<div xpo-dialog-actions>
  <button id="add-division-btn" xpo-btn="secondary lg" (click)="addDivisionRole()" *ngIf="addDivisionRoleButton && selectedUser.roles.length<numberOfDivisions"><xpo-icon>add</xpo-icon>Add</button>
</div>