$postLink of an angular component/directive running too early

The documentation regarding $postLink() is correct. It’s called after its controller’s element and its children have been linked. This doesn’t mean that you’ll see a directive’s result immediately. Maybe it’s calling $http and inserting the result once it arrives. Maybe it’s registering a watcher which in turns sets the result, as most of Angular’s built-in directives do.

The underlying issue in your case is that you want to perform DOM manipulations after the interpolations have been compiled, or better yet, after their registered watcher had had time to run once.

Unfortunately, there isn’t an official way to do this. Nevertheless, there are ways of accomplishing this, but you won’t find them listed in the documentation.

Two popular ways of running a function after the interpolations have been compiled are:

• using $timeout without a delay (as it defaults to 0): $timeout(function() { /* Your code goes here */ });

• using .ready() which is provided by Angular’s jqLite

In your case, you’re much better off using a watcher to run a function once the element with the given ID exists:

var deregistrationFn = $scope.$watch(() => {
    return document.getElementById(this.gridId);
}, (newValue) => {
    if (newValue !== null) {
        deregistrationFn();

        // Your code goes here
    }
});

Finally, in my opinion, I believe that whenever you need to wait for the interpolations to be compiled, or for certain directives to insert their value, you’re not following the Angular’s way of building things. In your case, why not create a new component, myGridTable which requires myGrid as a parent, and add its appropriate logic there. This way, each component’s responsibility is much better defined and it’s easier to test things.