After spending hours researching Event Listeners in Angular 2, it's clear that there is a lack of comprehensive documentation on the topic.
My goal is to set the height of various div groups (generated using ngFor) to match the height of the tallest one. This functionality was easily achieved in Angular 1 example
I understand that concepts like scope and $watch no longer apply in Angular 2. In my attempt to use Host Listener for this task, I have struggled to find useful documentation. While there are tutorials for common events like "click" or "mouseover", resources for other possible events such as $watch or onChange are lacking. Any documentation listing available event names would be greatly appreciated.
If possible, I would also love to see an example in Angular 2 based on the link provided above.
PS: I came across 'window: resize' which works, but 'div: resize' does not seem to have the desired effect.
EDIT: Thanks to some guidance from Maximus, I was able to get it working. Here is the code snippet:
An additional directive file was created:
comments.directive.ts
import { Directive, ElementRef, Input } from '@angular/core';
import { DoCheck } from '@angular/core';
@Directive({ selector: '[comments]' })
export class CommentsDirective implements DoCheck{
style: any;
constructor(private element: ElementRef) {
}
ngDoCheck() {
console.log(this.element);
this.style = { //shared scope variable 'style'
height:this.element.nativeElement.offsetHeight+'px',
width:this.element.nativeElement.offsetWidth+'px'
};
}
}
The directive was then imported into the NG-Module.
HTML Section:
<div comments [ngStyle]="style">
Once I implement the part where all heights are equalized to match the tallest, I will update it accordingly.