Match Height With Angular

[yasira892]

Please directive for angular.

[liabru]

I'm not so familiar with angular so I can't help here, but maybe somebody else can?

[profsmallpine]

@yasira892 I am new to Angular (day number 2), but I wanted to integrate this with Angular 2. I went for the quick and dirty approach with a super basic directive that takes a groupName input

export class MatchHeightDirective {

    constructor(private el: ElementRef) { }

    @Input() groupName: string;

    ngOnInit(){
      this.matchHeight(this.groupName);
    }

    private matchHeight(groupName: string) {
      this.el.nativeElement.setAttribute('data-match-height', groupName);
      $.fn.matchHeight._applyDataApi();
    }
}

I don't love calling _applyDataApi for each element, but I wanted to keep all initialization in the directive. There is probably a better way to do this, but time.. Hope it helps!

[nrakochy]

Thanks for the great plugin. I have an Angular app embedded in some gnarly HTML inside an iFrame, and this works perfectly OOTB. Here is a link function that I am using for an Angular 1 directive -

       // Update to match whatever your jQuery variable on the $window object
        function matchHeight(){
		var item = $window.$jQuery('.CSS_CLASS_NAME');
		item.matchHeight();
	}
	
         // You will need to inject $compile, $window, and $timeout
         //  as well as implement your template fn
	function buildElement(scope, element){
		var template = getTemplate();
                var content = $compile(template)(scope);
                element.empty();
		element.append(content);
	        scope.$evalAsync();
		$timeout(matchHeight, 0, false);
	}
	
	function linkFn(scope, element){
		buildElement(scope, element);
		scope.$watch('vm.VARIABLE_NAME_HERE', function(newVal,oldVal){
			buildElement(scope, element);
		});
	}