Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 AfterViewChecked not firing on a directive when binding is complete on RC4

I have an Angular 2 directive that makes the header (th) of a given table to remain fixed when the table is placed within a scrollable div. It resizes the column headers according to the size of the data on the cells, and vice-versa. It was working fine until Angular 2 RC1, but after I upgraded it to RC4 it stopped working.

After a while I realized that the number of "AfterViewChecked" events triggered by the framework has been reduced, probably due to an issue that got fixed. The problem now is that my directive is no longer triggering its recalculation logic to resize the table headers.

Is it possible to bind or capture an event from the parent's directive table in order to trigger the recalculation process?

The directive code is more or less like this:

export class TableFixedHeaderDirective implements AfterViewChecked, AfterViewInit
...
ngAfterViewInit(): void ...
ngAfterViewChecked(): void ...
onWindowResize(): void ...
...

Within these events is where I call the logic to perform the header calculation, which will basically resize either headers or columns, depending on the width of the data being displayed.

like image 910
Fabricio Avatar asked Oct 26 '25 01:10

Fabricio


1 Answers

An angular directive does not have a View so all of the view related lifecycle hooks will not work, since they don't exist.

See the docs

Directives and Components

ngOnInit
Initialize the directive/component after Angular initializes the data-bound input properties.

ngOnChanges Respond after Angular sets a data-bound input property. The method receives a changes object of current and previous values.

ngDoCheck
Detect and act upon changes that Angular can or won't detect on its own. Called every change detection run.

ngOnDestroy Cleanup just before Angular destroys the directive/component. Unsubscribe observables and detach event handlers to avoid memory leaks.

Components only

ngAfterContentInit
After Angular projects external content into its view.

ngAfterContentChecked
After Angular checks the bindings of the external content that it projected into its view.

ngAfterViewInit After Angular creates the component's view(s).

ngAfterViewChecked
After Angular checks the bindings of the component's view(s).

like image 120
Shlomi Assaf Avatar answered Oct 27 '25 17:10

Shlomi Assaf



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!