CoreUI - Angular - Adding Dynamic c-accordion and handling click event

Question

A newbie to Angular development and using CoreUI.

Wondering - for a dynamically added c-accordion-items of CoreUI c-accordion component, how to handle the button click event based on the index of the item.

How can I access a reference to the item to call the toggleItem() or access visible property of the item?

The sample code from the docs, as shown below, shows the c-accordion-item given a #item0 attributes and item0 being referenced as the item reference - sample code from docs:

<button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>

But for a dynamically added c-accordion-item, I cannot reference it as {{'item'+i}} obviously. Is there a way to access the toggleItem() and visible properties of the item from the template html?

Appreciate any pointers on this one?

Thank you

Athadu

My sample code:


<c-row [formGroup]="attributesForm">
 
<c-accordion [alwaysOpen]="true"  formArrayName="attributes">
    <c-accordion-item #item{{i}}="cAccordionItem" [visible]="true" 
        *ngFor="let attribute of attributes.controls; index as i" [formGroupName]="i">
      <ng-template cTemplateId="accordionHeaderTemplate">
        <button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>
          
          {{attributesForm.value.attributes[i].name}}
        </button>
      </ng-template>
      <ng-template cTemplateId="accordionBodyTemplate">
        <c-row class="accordion-body">
            <c-col>
                <c-input-group>
                    <input cFormControl id="{{'name'+i}}" aria-label="Name" required type="string"
                        formControlName="name" />
                </c-input-group>
                <c-form-feedback [valid]="true">
                    <div class="alert  alert-danger"
                        *ngIf="attributes.controls[i].get('name')?.hasError('required') && attributes.controls[i].get('name')?.touched">
                        Name is required
                    </div>
                </c-form-feedback>
            </c-col>
            <c-col>
                <c-input-group>
                    <input cFormControl id="{{'type'+i}}" aria-label="Type" required type="string"
                        formControlName="type" />
                </c-input-group>
                <c-form-feedback [valid]="true">

                    <div class="alert  alert-danger"
                        *ngIf="attributes.controls[i].get('type')?.hasError('required') && attributes.controls[i].get('type')?.touched">
                        Attribute Type is required
                    </div>
                </c-form-feedback>
            </c-col>
            <c-col>
                <c-input-group>
                    <input cFormControl id="{{'allowedLength'+i}}" aria-label="Allowed Length" required
                        type="string" formControlName="allowedLength" />
                </c-input-group>
                <c-form-feedback [valid]="true"></c-form-feedback>
            </c-col>
        </c-row>
      </ng-template>
    </c-accordion-item>

  </c-accordion>
   
</c-row>

score 0 · Answer 1 · answered Jul 22 '22 at 11:09

Realized after a search online for 'angular component hash #'

... found the article that answered my question

'#' - is used for variable declaration per What does Angular 2 hashtags in template mean? Here is my solution - just used #item as a 'variable' in the loop <c-accordion-item #item="cAccordionItem" [visible]="true" *ngFor="let attribute of attributes.controls; index as i" [formGroupName]="i"> and then referencing it as such in button click of accordion button <button (click)="item.toggleItem()" [collapsed]="!item.visible" cAccordionButton> inside the for loop.

CoreUI - Angular - Adding Dynamic c-accordion and handling click event

1 Answers1