Scale proportionally with Angular2

Question

I need to implement a section within an Angular2 app that retains scaling proportions (like when embedding a youtube video into a website). I can't use an iframe because it would make passing data around very complicated.

Here is an example using a jQuery solution: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

In the codepen, shrinking the outside box will show the desired functionality: https://codepen.io/chriscoyier/pen/VvRoWy

// from original article:
var scale = Math.min( 
  availableWidth / contentWidth, 
  availableHeight / contentHeight 
);

Is there a better way to do this in Angular2 than by mingling in jQuery? I saw a few libraries but there are no demos which show the functionality sadly. Any suggestions are welcome. Thanks

Answer 1

I've "translated" the code from the jQuery solution (https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript) to Angular.

Check out this stackblitz: https://stackblitz.com/edit/angular-vagpoq. I have also included comments with explanations within the code.