You can override the HTML for any component that comes with your angular application. You can do so by writing an extension component. Similarly, you can override the methods within it as well. For example, there is a registration method and you want to retain it but want to change the look and feel of the template, you must write an extension component. You can override extension classes, extension services, or extension components that are present within the angular library.

To customize the HTML content

  1. Go to the header.component.html file and browse for the apt-mini-profile component. The HTML content is all bundled into this component.
  2. Go to your application and use basic angular syntax to generate a component. For example: ng g c components/my-profile --module-components/component.module.ts --spec-false
  3. A new my-profile.component.ts is created. 
  4. Import the miniprofile component from @apttus/ecommerce and extend the miniprofile component. By doing this, all the controller code is inherited from the miniprofile component.
  5. Refer to the Digital Commerce SDK and search for miniprofilecomponent. Click on the Template tab for the HTML template for all of the components in it.
  6. Copy all the HTML content and paste it in the my-profile.component.html you just created and save it.
  7. From the new component you just created, copy the selector and go to the header where it is referenced and paste the selector.
  8. Run ng serve command.

The profile component is overridden.

Go to my-profile.component.html and within the HTML content add a custom field and save.

Refresh your application on the local machine and you will see the newly added custom field. If you want to assign the custom field to a user that is associated with the component, you can do so by modifying the ngModel. For example: [(ngModel)]="user.My_Custom_field__c"