Hide parent div if two inner divs are empty-CodePudding

Lots of examples can be found to hide a parent div when ONE inner div is empty, but in my case I need to hide the parent div if TWO inner divs are empty:

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

Background: I am using Angular with ng-content select to fill the child divs with content. Sometimes none of these templates are used thus both child divs will be empty.

<div >
    <div ><ng-content select="[child1]"></ng-content></div>
    <div ><ng-content select="[child2]"></ng-content></div>
</div>

CodePudding user response：

Sorry I run out of time, but would be a shame to not share what I was trying to make. Maybe not perfect because of the time but hopefully you get the idea. PS using jQuery.

$(".parent").each(function() {
  var empty1 = 0;
  var empty2 = 0;
  var who = $(this);
  $(this).find(".check").each(function() {
    var check = $(this).html();
    if(check == '<ng-content select="[child1]"></ng-content>') {
      var empty1 = 1;
    }
    if(check == '<ng-content select="[child2]"></ng-content>') {
      var empty2 = 1;
    }
    if(empty1 == 1 && empty2 == 1) {
      $(who).slideUp(100);
    }
  });
});

.parent {
height:10vh;
background:#F00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <div ><ng-content select="[child1]"></ng-content></div>
    <div ><ng-content select="[child2]"></ng-content></div>
</div>

<div >
    <div ><ng-content select="[child1]">a</ng-content></div>
    <div ><ng-content select="[child2]"></ng-content></div>
</div>

CodePudding user response：

I solved it using Angular ViewChild:

<div  [class.hidden]="!hasContentInColumn3">
    <div  #c3a>
        <ng-content select="[c3a]"></ng-content>
    </div>

    <div  #c3b>
        <ng-content select="[c3b]"></ng-content>
    </div>
</div>

export class ListItemComponent implements OnInit {
    public hasContentInColumn3 = false;

    @ViewChild('c3a', { static: true }) c3a: ElementRef;
    @ViewChild('c3b', { static: true }) c3b: ElementRef;

    ngOnInit () {
        // Hide div.column-3 when line-1 and line-2 are not provided
        this.hasContentInColumn3 = (
            (this.c3a.nativeElement.childNodes.length > 0) ||
            (this.c3b.nativeElement.childNodes.length > 0)
        );
    }
}

I hope this helps someone.