I have a component which it's template contains 'header', 'content' and 'footer' divs. In the content div I set a new custom directive which checks if the div element has an overflow. Until this step everything works fine. Next, I want to hasOverflow data from my directive to it's host component so the component knows if to display 'show more' button and other configurations.
My question is how can communicate from my inner div's ('content') directive to its host component?
UPDATE - Adding code sample
tile.component.ts
<div class="tile" >
<div class="header">
...
</div>
<div class="content" checkOverflow>
... tile content that may be long and contains the chaeckOverflow directive ...
<div class="footer">
...
</div></div>
checkOverflow.ditective.ts
import { Directive, ElementRef, AfterViewInit } from '@angular/core';
@Directive({
selector: '[checkOverflow]'
})
export class OverflowDirective implements AfterViewInit {
constructor(private el: ElementRef) {
}
ngAfterViewInit(): void {
if (this.el.nativeElement.offsetHeight < this.el.nativeElement.scrollHeight) {
console.log('Element has overflow');
} else {
console.log('Element has no overflow');
}
}
