css Question posted in
Some basic documentation can be found here.

Css – InnerHTML of div is missed after hide div

I am using Angular 17 and tailwind. My directive add and remove ‘hidden’ into class of marked div when cheking select/unselect situation of checkbox. My problem is the innerHTML of marked div is removed when this directive is runned.

After directive runningBefore directive running

import {
  Directive,
  ElementRef,
  Input,
  HostListener,
  Renderer2,
} from '@angular/core';

@Directive({
  selector: '[checkBoxAccordionTrigger]',
  standalone: true,
})
export class CheckBoxAccordionDirective {
  @Input('checkBoxAccordionTrigger') triggerId!: any;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('change') onChange() {
    const accordionBodyElement = this.renderer.selectRootElement(
      `[accordion-body="${this.triggerId}"]`
    );

    if (this.el.nativeElement.checked) {
      // this.renderer.removeClass(accordionBodyElement, 'hidden');
      this.renderer.removeStyle(accordionBodyElement, 'display');
    } else {
      // this.renderer.addClass(accordionBodyElement, 'hidden');
      this.renderer.setStyle(accordionBodyElement, 'display', 'hidden');
    }
  }
}


<div id="demands" class="mb-6 items-center">
    <div *ngFor="let departmentDemand of departmentDemandList; let i = index">
        <div class="mb-6 items-center">
            <p class="w-5/12 mr-4 font-semibold underline">{{i+1}} - {{departmentDemand.DepartmentName }} :</p>
        </div>

        <div class="mb-6" *ngFor="let demand of departmentDemand.Demands">
            <div class="flex items-center">
                <input type="checkbox" name="{{ demand.Name }}" value="{{ demand.Name }}" class="mr-2"
                    checkBoxAccordionTrigger="{{demand.Id}}">
                <label for="{{ demand.Id }}">{{ demand.Name }}</label>
            </div>

            <div class="mt-6 ml-8 " [attr.accordion-body]="demand.Id">
                <div *ngFor="let parameter of demand.Parameters" class="mb-2 items-center flex">
                    <label [for]="parameter.Id" class="w-3/12 block mr-4">{{ parameter.Name }} :</label>
                    <input [id]="parameter.Id" [name]="parameter.Name"
                        class="w-7/12 px-3 py-2 border rounded-md focus:outline-none focus:border-blue-200">
                </div>
            </div>

        </div>
    </div>
</div>

I tried to change marked div style between block and none but it is not working.

Tags:

3

Answers


  1. 0 
     import { Directive, ElementRef, Input, HostListener, Renderer2 } from             
 '@angular/core';

  @Directive({
 selector: '[checkBoxAccordionTrigger]',
 standalone: true,
  })
 export class CheckBoxAccordionDirective {
 @Input('checkBoxAccordionTrigger') triggerId!: any;

 constructor(private el: ElementRef, private renderer: Renderer2) {}

 @HostListener('change') onChange() {
 const accordionBodyElements = document.querySelectorAll(`[accordion- 
 body="${this.triggerId}"]`);

 accordionBodyElements.forEach(accordionBodyElement => {
  if (this.el.nativeElement.checked) {
    this.renderer.removeClass(accordionBodyElement, 'hidden'); // Show element
    this.renderer.removeStyle(accordionBodyElement, 'display'); // Ensure 
  display style does not interfere
  } else {
    this.renderer.addClass(accordionBodyElement, 'hidden'); // Hide element
  }
  });
 } 
 }
    Login or Signup to reply.
  2. 0

    Provide the second argument preserveContent with true.

    abstract selectRootElement(selectorOrNode: any, preserveContent?: boolean): any

    Whether the contents of the root element should be preserved, or cleared upon bootstrap (default behavior).

    const accordionBodyElement = this.renderer.selectRootElement(
  `[accordion-body="${this.triggerId}"]`,
  true
);

    Demo @ StackBlitz

    Login or Signup to reply.
  3. 0

    Also make sure, that departmentDemandList.Demands.Parameters is an array to iterate.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search