How do I dynamically set the FAB size based on height of tab bar?

I have a fab button in my tabs template, and I want to make sure it’s always 10px larger in height compared to the height of the tabs bar, so that it looks like an “oversized” button overlaying the tab bar.

Depending on device size, the fab button size needs to change by 5 - 20 px or so, but it’s always different so I need to dynamically set the size.

What’s the best way to do this outside of directly manipulating the DOM?

Should I use ngAfterViewInit() to get the height of the tab bar, and then just directly set the size of my rendered button?

Why not just a sass variable?

Because the exact pixel height depends on the device, so I can’t just hardcode a value.