4

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

timhc22
  • 7,213
  • 8
  • 48
  • 66
  • Maybe this is a useful idea, but you already try use viewport units (**vh** and **vw**) ? – Leandro Nov 21 '19 at 16:29
  • I've actually thought quite a lot about how this technique could work (but never figured out a good idea). This looks interesting though: https://hackernoon.com/using-viewport-units-to-scale-fixed-layouts-869638bb91f9 but I wonder if it is considered 'best practice', I guess as long as breakpoints kick in to display properly on different devices, then there should not be a problem? – timhc22 Nov 21 '19 at 23:39

1 Answers1

4

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.

Chif
  • 830
  • 1
  • 7
  • 20
  • 1
    Wow looks great! Only problem I'm getting when trying to implement into my application is, `cannot read property nativeElement of undefined`. I thought maybe it was to do with this: https://stackoverflow.com/a/43384002/1624933, but even when using a long timeout and the `ngAfterViewInit` lifecycle, it still isn't recognising it! I also had to change `window.Math` to just `Math` as it was saying `Math` doesn't exist on type window – timhc22 Nov 21 '19 at 23:13
  • Thank you for the positive feedback. Could you please share a stack blitz of your code? Let's go through it together – Chif Nov 22 '19 at 04:10
  • 1
    Hi, thanks for the help, unfortunately I couldn't get this working with my example, it got pretty complicated because of the nested components, but led to some interesting reading around lifecycles and ViewChild as oppose to ViewChildren. My friend managed to get it working with the original code non-modified for angular. However, your solution does work for more simple integrations, so I have made it the accepted answer. Thanks again – timhc22 Dec 03 '19 at 19:24
  • @timhc22 thank you for the positive feedback. It is refreshing. I'm curious though, did your friend's solution require adding jQuery? – Chif Dec 03 '19 at 19:42
  • no and his solution isn't complete because it only resizes on screen load (which is fine for what we need)! – timhc22 Dec 04 '19 at 03:25