Reputation: 57
I've tried ngOnInit() but didn't succeed. Accordion doesn't work too. Here is my html :
<div [hidden]="advancedFiltersAreShown" #searchDiv></div>
<button *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown; minHeightOfTable();"></button>
.ts code:
@ViewChild('searchDiv', { static: true }) elementView: ElementRef;
primeTableHeight = '';
advancedFiltersAreShown = true;
minHeightOfTable(): string {
const heightOfPage = window.innerHeight;
const heightOfSearchView = this.elementView.nativeElement.offsetHeight;
var newHeight = heightOfPage - heightOfSearchView;
this.primeTableHeight = newHeight + 'px';
return this.primeTableHeight;
}
Upvotes: 1
Views: 1267
Reputation: 1226
As I get from your code, you have a button which collapse your div element, so you want to resize your other element in your page after collapsing/opening your div (Custom Accordion). Lets imagine you have two DIV and a button to collapse/open first DIV.
<div #container>
<button *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown; calculateElementSize();"></button>
<div #searchDiv>
</div>
<div #otherElement>
</div>
</div>
You have to implement an event handler on your button to resize your second div according to your clients resolution.
So, first of all you have to declare a function calculateElementSize()
and pass these steps:
calculateElementSize()
to your button event and windows resize event.Lets do it:
import { Component, ViewChild, HostListener, AfterViewInit } from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements AfterViewInit {
@ViewChild('container', { static: true }) containerElement: any;
@ViewChild('searchDIV', { static: true }) searchElement: any;
@ViewChild('otherElement', { static: true }) otherElement: any;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.calculateElementSize();
}
advancedFiltersAreShown = true;
constructor() {}
ngAfterViewInit() {
this.calculateElementSize();
}
calculateElementSize() {
const containerHeight = this.containerElement.nativeElement.offsetHeight;
const searchHeight = this.searchElement.nativeElement.offsetHeight;
this.otherElement.nativeElement.offsetHeight = containerHeight - searchHeight;
}
}
Upvotes: 1