mp-common/admin/roles/add-role/add-role.component.html

This is XPO MarketPlace common libary

<div xpo-dialog-header>
    <h1 xpo-dialog-title>add a role</h1>
    <div xpo-dialog-header-action>
        <xpo-icon id="close-role-icon" color="primary" (click)="onClose()">close</xpo-icon>
    </div>
</div>
<div xpo-dialog-content>
    <xpo-input-container>
        <form #roleForm="ngForm">
            <input xpoInput id="role-name"  name="roleName"  placeholder="Add a Role Name"  [(ngModel)]="newRole.name"  (keyup)="validateRole()"
                required/>
            <div [hidden]="!invalidRole">Role already exist</div>
            </form>
    </xpo-input-container>
    <div xpo-dialog-actions>
        <button id="save-role-btn" xpo-btn="primary-form lg" (click)="saveNewRole()" [disabled]="!roleForm.valid || invalidRole ">Save</button>
        <button id="cancel-role-btn" xpo-btn="plain lg" (click)="onClose()">Cancel</button>
    </div>
</div>