Добавить данные динамически на кнопку HTML на странице HTML

Question

У меня есть эта кнопка, мне нужно добавить данные Pendo, которые динамически работают в зависимости от того, какую кнопку мы выбрали. В основном это делает кнопку уникальной. Когда у меня есть кнопка, которая не меняется, я добавляю вот так:

                           <button mat-button
                             data-pendo="pendo-prospects-send-application"
                            class='round-button'
                            color='primary'
                            type='button'
                            .....>
                        </button>

Но иногда мне нужно добавить эти данные к одной кнопке, которая меняется в зависимости от класса CSS. Я не уверен, как это проверить.

Например, мне нужно добавить кнопку, когда:

if [class.fa-карандаша], тогда data-pendo "Something" if [class .fa-plus] затем data-pendo "Something else"

Это кнопка, которая меняет базу в зависимости от класса:

                           <button mat-button
                            class='round-button'
                            type='button'
                            [class.disabled-button]='GuidId'
                            color='primary'
                            (click)='onAssignLoanOfficer()'>
                            <i class='fal'
                                [class.fa-pencil]='GuidId'
                                [class.fa-plus]='!GuidId'></i>
                        </button>

Как я могу это сделать?

Answer 1

Исходя из ваших комментариев, я думаю, что это то, что вы хотите сделать:

<button
  (click)="onAssignLoanOfficer()"
  [class.disabled-button]="GuidId"

  [attr.data-pendo]="GuidId ? 'pendo-edit-loan' : 'pendo-add-loan'"

  class="round-button"
  color="primary"
  type="button">
  <i [class.fa-pencil]="GuidId"
     [class.fa-plus]="!GuidId"
     class="fall">
  </i>
</button>

АЛЬТЕРНАТИВА:

Как более сложная альтернатива (я действительно не знаю, как вы намереваетесь используйте то, что вы просите), вы можете создать директиву для добавления нужного атрибута на основе карты информации о преобразовании класса в pendo-данные:

@Directive({
  selector: '[addPendoData]'
})
export class AddPendoDataDirective implements AfterViewInit {
  constructor(private _el: ElementRef, private _renderer: Renderer2) {}

  ngAfterViewInit() {
    const pendoData: string | null | undefined = this._getPendoValue();
    if (!pendoData) { return;}

    const $button: HTMLElement = this._el.nativeElement;
    this._renderer.setAttribute($button, 'data-pendo', pendoData);
  }

  private _getPendoValue() {
    const $child: HTMLElement = this._el.nativeElement;
    if(!$child) { return null; }

    const $i: HTMLElement = $child.querySelector('i');
    if(!$i) { return null; }

    const listOfClasses: string[] = $i.className.split(' ');

    if (!(listOfClasses && listOfClasses.length)) { return null; }

    for(const className of listOfClasses) {
      if(PENDO_MAP[className]) { return PENDO_MAP[className]; }
    }

    return null;
  }
}

const PENDO_MAP: { [className: string]: string } = {
  'fa-pencil': 'pendo-edit-loan',
  'fa-plus': 'pendo-add-loan'
  // add other mappings here...
};

, и вы можете использовать ее следующим образом это:

<button
  (click)="onAssignLoanOfficer()"
  [class.disabled-button]="GuidId"

  addPendoData

  class="round-button"
  color="primary"
  type="button">
  <i [class.fa-pencil]="GuidId"
     [class.fa-plus]="!GuidId"
     class="fall">
  </i>
</button>

Я собрал это демонстрация стекаблиц .

Answer 2

Вы можете определить директиву, как предлагает julianobrasil.
Я хочу указать другой способ достижения этого, используя Angular templates.

Определите две кнопки, добавление и редактирование, отдельно. Поместите значение по умолчанию, где вы хотите визуализироваться

<div class="action-button" *ngIf="GuidId">
    <!-- Add button -->
    <button mat-button
        data-pendo="pendo-add-loan"
        (click)="add(...)"
        class="round-button"
        color="primary">

        <i class="fal fa-plus"></i>
    </button>
</div>

Затем определите тег ng-template с другим определением кнопки. Полностью свободная sh новая.

<ng-template #edit-button>
    <div class="action-button">
        <!-- Edit button -->
        <button mat-button
            (click)="edit(...)"
            data-pendo="pendo-edit-loan"
            class="round-button"
            color="primary">

            <i class="fal fa-pencil"></i>
        </button>
    </div>
</ng-template>

Наконец, просто измените оператор *ngIf, чтобы отобразить либо кнопку добавления, либо кнопку редактирования.

<div class="action-button" *ngIf="!GuidId else edit-button">
    <!-- Add button here -->
</div>

Это способ это масштабируется, чтобы держать компоненты изолированными. Кнопки больше не связаны, поэтому вы можете реализовать без необходимости обуславливать каждый стиль, действие и т. Д. c.

Надеюсь, это поможет.