Angular 2 Host Listener Change div heigtht

Question

I read the last couple of hours about Event Listener in Angular 2 but I think there is a big lack of documentation there.

I want to set the height of different div groups (created in ngFor) to the one with the biggest height. Kinda like in Angular 1 example

I know that scope and $watch do not exist anymore. So I try to do it with Host Listener, but I cant find any good documentation for it. There are many tutorials for events "click", "mouseover" etc. But none for other possible events. I need something like $watch or onChange. (No input fields, basic elements) Basiclly any documentation about the possible event names would help.

Eventually there is also an example of the above link in angular2.

PS: Found 'window: resize' but 'div: resize' not working.

EDIT: With the help of maximus I got it done, here is the working code.

Created a directives file:

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 = { //scope variable style, shared with our controller
            height:this.element.nativeElement.offsetHeight+'px', //set the height in style to our elements height
            width:this.element.nativeElement.offsetWidth+'px' //same with width
        };
    }
}

Than I just imported it in NG-Module.

HTML Part:

<div comments [ngStyle]="style">

If I done the part with making it all equal height, based on the biggest, I will update it.

have you looked at mutationobservers - https://developer.mozilla.org/en/docs/Web/API/MutationObserver ? — glendaviesnz, Jun 12 '17 at 07:48
It's unlikely that you want or need to do this at all. Essentially, you are trying to manage page layout, but that's the job of HTML and CSS. If you can provide a simplified example of what you want to do, I'm sure someone here can help show you how to do it in CSS. — , Jun 12 '17 at 07:55
@torazaburo I know that this is normally a part of css and in a normal case easily possible with eg. flex-box. In my situation the page layout is pretty based on the retrieving of the data I retrieve from a database. So I have to change the layout based on the recived elements. Example: 3 colums, each contains comments, news and something else(in separate rows). Based on the block with the most comments, the comment box of all should be same height. — Doomenik, Jun 12 '17 at 08:09
See https://stackoverflow.com/questions/16594891/make-children-divs-the-height-of-tallest-child. — , Jun 12 '17 at 09:11

Max Koretskyi · Accepted Answer · 2017-06-12T11:04:51.200

I know that scope and $watch do not exist anymore

Angular.js triggers watchers when it runs digest. Angular has something similar, it triggers ngDoCheck when it runs digest. Read more here.

Taking the analogy with the example you shown for Angular.js you can do something along these lines in Angular:

@Directive({
   selector: '[HeightSetter]'
})
class HeightSetter {
   style: any;

   constructor(private element: elementRef) {

   }

   ngDoCheck() {
     this.style = { //scope variable style, shared with our controller
         height:this.element.nativeElement.offsetHeight+'px', //set the height in style to our elements height
         width:this.element.nativeElement.offsetWidth+'px' //same with width
     };
   }
}

html

<span HeightSetter [ngStyle]="style"></span>

Angular 2 Host Listener Change div heigtht

comments.directive.ts

1 Answers1

html