Hi,
How to fire an event to detect screen orientation in ionic2 and angular2.??
I have added a cordova plugin cordova-plugin-screen-orientation.
and used
// CompassHeading is an interface for compass
import { DeviceOrientation, CompassHeading } from ‘ionic-native’;
// Get the device current compass heading
DeviceOrientation.getCurrentHeading().then(
(data: CompassHeading) => console.log(data),
(error: any) => console.log(error)
);
// Watch the device compass heading change
var subscription = DeviceOrientation.watchHeading().subscribe(
(data: CompassHeading) => console.log(data)
);
But throwing an error-Cordova not available.
Please help how to solve
Hi there it depends what you want to do…
You can use a very easy css @media to change css like this:
@media all and (orientation: portrait){ div{...} }
and
@media all and (orientation: landscape){ div{...} }
and change the css accordingly and
in code platform.isPortrait()
that returns a boolean.
I hope it helped a bit 
I need to provide one of two different layouts on a few screens depending on if the device is in landscape or portrait mode. I’m successfully using platform.isPortrait() and platform.isLandscape() on load, But how to fire an event on orientation change .
Then I guess that you will have to use a plug-in to do that.
maybe this one can help you : http://ngcordova.com/docs/plugins/deviceOrientation/
Hi, @Sgouromallis can you explain where does your sample code go? is this CSS syntax?
A more complete example would be grreat.
I need to specify 2 separate styles for an image in a slider to keep it a 4:3 ratio and optimal (ie. using maximum space)
While the following style work for Portrait
#SliderImage {
width: calc(100vmin - 10vh );
height: calc(75vmin - 10vh );
}
It won’t produce optimal size in landscape mode
so I would like the sizing style to switch to something like this in landscape mode
#SliderImage_Landscape {
width: 133vmin ; // maintains 4:3 ratio
height: 100vmin ; // pictures takes full height
}
Thank you.