CODEWITHSUNDEEP
javascriptjquerycssangular
Beimnet Zewdu
Beimnet Zewdu

Reputation: 1

How to know if there are child divs hidden by overflow: hidden in Angular6

Here is the problem I want to solve.

 <div class="row" style="overflow:hidden;">
    <app-car
      *ngFor="let car of cars; trackBy: trackByFunction"
      [car]="car"
    >
    </app-car>
 </div>

 <button> More <button>

I want to show the more button if there are cars hidden by the overflow:hidden property of the parent.

Upvotes: 0

Views: 51

Answers (2)

Hiral
Hiral

Reputation: 129

You can use viewChild and ngIf in angular6 to achieve your situation

<div class="row" style="overflow:auto;height:50px" #container>
<app-car
  *ngFor="let car of cars; trackBy: trackByFunction"
  [car]="car">
</app-car>
 </div>

<button *ngIf="container.style.overflow === 'hidden'"> More <button>

and include below item in your ts file

 @ViewChild('container') private container: ElementRef;

Upvotes: 0

Ahmed Şah Mesud
Ahmed Şah Mesud

Reputation: 21

jquery;

$("div").each(function() {
  if($(this).parent().css('overflow') == 'hidden'){
    console.log("there is an overflow hidden");
    }
});

Upvotes: 1

Related Questions