CODEWITHSUNDEEP
angular
Eduardo Dallmann
Eduardo Dallmann

Reputation: 454

Attribute names and functions compound

I have a component that has become very repetitive and big in HTML.

<comp dataKey="priceListId" id="priceList" name="priceList"
formControlName="priceList" [searchFields]="priceListSearchFields"
[searchGridFields]="priceListSearchGridFields"
[searchGridData]="priceListSearchGridData" [multiple]="false"
[compSuggestions]="priceListSuggestions"
(onCompRequest)="priceListRequest($event)"
(onSearchRequest)="priceListSearchRequest($event)" compDisplayField="label"
(onClear)="priceListOnChange()" (onSelect)="priceListOnChange()"
[searchTotalRecords]=priceListSearchTotalRecords
[searchTitle]="'priceListTitle' | translate"
[searchEmptyTitle]="'nothing_found' | translate"
[filterLabel]="'filter' | translate" [clearLabel]="'clear' | translate"
[cancelLabel]="'cancel' | translate" [selectLabel]="'select' | translate"
[searchTotalRecordsLabel]="'total_records' | translate: {value: priceListSearchTotalRecords}"></comp>

Each attribute and function are important. And each component changes only part of the name of each attribute and function, for example (onSelect)="priceListOnChange()" (onSelect)="companyListOnChange()" etc.

Some pages have 10 to 20 of these components, making HTML 1000 lines and tricky to find anything.

I would like to inform a partial name and automatically all attributes and functions to be composed. But if I enter a function or attribute should disregard the pattern and use the informed. Something like partial attributes:

<comp dataKey="priceListId" id="priceList"
name="priceList" formControlName="priceList" partial="priceList"

(onCompRequest)="differentRequest($event)"
[clearLabel]="'differentClearLabel' | translate"></comp>

The only solution would be to encapsulate the component into another component?

Upvotes: 0

Views: 51

Answers (1)

Avin Kavish
Avin Kavish

Reputation: 8937

You can refactor your component to accept an options object instead of binding each of these properties.

<comp formControlName="priceList"  [options]="priceListOptions" />

and in your class

priceListOptions = {
  dataKey: "priceListId",
  id: "priceList",
  name: "priceList",
  searchFields: this.priceListSearchFields,
  searchGridFields: this.priceListSearchGridFields,
  searchGridData: this.priceListSearchGridData,
  multiple: false,
  compSuggestions: this.priceListSuggestions,
  onCompRequest: this.priceListRequest,
  onSearchRequest: this.priceListSearchRequest,
  compDisplayField: "label",
  onClear: this.priceListOnChange,
  onSelect: this.priceListOnChange,
  searchTotalRecords: this.priceListSearchTotalRecords,
  searchTitle: "'priceListTitle' | translate", // <-- Change these to use ur translation service
  searchEmptyTitle: "'nothing_found' | translate",
  filterLabel: "'filter' | translate",
  clearLabel: "'clear' | translate",
  cancelLabel: "'cancel' | translate",
  selectLabel: "'select' | translate",
  searchTotalRecordsLabel: "'total_records' | translate: {value: priceListSearchTotalRecords}"
}

Note you have to refactor the above properties to be processable in the class component such as calling the pipes or their service counterparts manually, and passing event handlers by the function name this.handler as opposed to the string form of "handler($event)"

Upvotes: 1

Related Questions