Can't trigger event click inside ng-template angular

Question

I created two fieldsets, one is outside the ng-template and the other is inside of the splitter primeng components.

For the outside,the fieldset can be collapsed/expanded while those inside cannot. It's probably because I can't trigger event click inside the ng-template.

Pls find my code as below : text

Can anyone help ?

Answer 1

You are querying the document for the fieldset, but you have two of those. Introduce id attribute to your fieldsets, then do the same thing for each fieldset.

Put ids to array: indexes: string[] = ['fieldset1', 'fieldset2']; and add to each fieldset their id attribute, like <fieldset [id]="indexes[0]"> and <fieldset [id]="indexes[1]">, then change your ngAfterViewInit() method to iterate over indexes array, using each value for getElementById selector:

ngAfterViewInit() {
    this.indexes.forEach((id) => {

      const fieldset = document.getElementById(id);
      const content = fieldset.querySelector('.content');

      fieldset.querySelector('legend').addEventListener('click', function () {
        content.classList.toggle('hidden');
      });

      content.classList.remove('hidden');
    });
  }

Your edited stackblitz code.