abp/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html

<abp-modal *ngIf="visible" [(visible)]="visible">
  <ng-template #abpHeader>
    <h4>{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>
  </ng-template>
  <ng-template #abpBody>
    <form *ngIf="form" [formGroup]="form" novalidate>
      <div class="form-group">
        <label for="username">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label
        ><span> * </span><input type="text" id="username" class="form-control" formControlName="userName" />
      </div>
      <div class="row">
        <div class="col col-md-6">
          <div class="form-group">
            <label for="name">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label
            ><input type="text" id="name" class="form-control" formControlName="name" />
          </div>
        </div>
        <div class="col col-md-6">
          <div class="form-group">
            <label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label
            ><input type="text" id="surname" class="form-control" formControlName="surname" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="email-address">{{ 'AbpIdentity::DisplayName:Email' | abpLocalization }}</label
        ><span> * </span><input type="text" id="email-address" class="form-control" formControlName="email" />
      </div>
      <div class="form-group">
        <label for="phone-number">{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</label
        ><input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
      </div>
    </form>
  </ng-template>
  <ng-template #abpFooter>
    <button type="button" class="btn btn-secondary" #abpClose>
      {{ 'AbpIdentity::Cancel' | abpLocalization }}
    </button>
    <button type="button" class="btn btn-primary" (click)="onSubmit()">
      <i class="fa fa-check mr-1"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>
    </button>
  </ng-template>
</abp-modal>