CODEWITHSUNDEEP
javascriptangularjsangular-components
permaban96
permaban96

Reputation: 13

AngularJS 1.5 component Trigger function after template fully rendered

I am using Angular's 1.5 component.

Basically i need to trigger a function after a template completely rendered.

Components layout

All these components are inside a parent component. Component 1 has got inside a ng-repeat that fills it with cards but i need to set the height of component 2 equal to component 1's height.

Component 1 contains dynamic data so it could be a little bit longer or shorter, and i did not find any smart way to retrieve the full height of COMP 1.

EDIT:

in COMP 1 the data is already loaded by the parent component, i'm having troubles with the ng-repeat that fills the component step-by-step.

Upvotes: 0

Views: 829

Answers (3)

Leguest
Leguest

Reputation: 2137

Maybe you need different approach?

I mean if you already have all data in parent component, and you can't trigger resizeHeight after ng-repeat ends

<div class="container></div>

And some css flexboxes

 .container {
   display: flex;
   flex-wrap: wrap;
}

That makes all divs equal heights

But there is also some bad workaround like:

In parentComponent

 setTimeout(function(){
   //Do resize

   scope.$apply();
 }, 0)

Also I remember that thing:

In your childComponent that ng-repeated you can access

if (scope.$last){
  // do resize 
}

Upvotes: 0

cYrixmorten
cYrixmorten

Reputation: 7108

Think the best solution would be to handle this in css using flexbox layout (angular-material makes it easier).

If you insist on doing the height correction in javascript, then I would make a third component that is holding both component 1 and 2. Then in the $postLink function of the new component, you can get the child elements using $element, and adjust the height.

Upvotes: 0

Leguest
Leguest

Reputation: 2137

I think you should have state property in your parent component and update it from child components

function ParentComponentController () {

    var vm = this;

    vm.readyStatus = {
      Component1: false,
      Component2: false,
      // etc
    }

    vm.checkReadyStatus = function(){

       var isReady = true;

       for(status in vm.readyStatus) {
          if(status == false) {
              isReady = false;
          }
       }

       return isReady;

    }

    vm.resizeHeights = function() {

       if(vm.checkReadyStatus()) {
           // do resize
       }
    }
}

So you need pass vm.resizeHeights to your child components

ChildComponent1 = {
   bindings: {
      resizeHeights: '&',
      readyStatus: '='
   },
   controller: function() {

       var vm = this;

       doAsyncRequest().then(function(){
            vm.readyStatus = true; 
            vm.resizeHeights() // so if template is ready, we execute resize  
       })

   }
}

I hope it help

Upvotes: 1

Related Questions