ons-switch

OnsenUI

Switch component. The switch can be toggled both by dragging and tapping. Will automatically displays a Material Design switch on Android devices.

Click here to see the original article

milkisevil

This component is broken. You can click the ons-switch, but the value is not being output and the checkbox state is not changed. You should really, really consider writing tests to flag this kind of error before release.

munsterlander

@milkisevil Whats not working? Here is a complete working example. Also, I know they unit test but I can’t remember what framework they use off the top of my head.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.3/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.3/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.3/js/onsenui.js"></script>
    <script src="components/loader.js"></script> 
  <script>
        ons.disableAutoStyling();
        if (localStorage.getItem("switch") === null) {
            localStorage.setItem('switch', 'true'); 
        }
        ons.ready(function(){
            document.getElementById('switch').checked = (localStorage.getItem("switch")  === 'true');                    
            document.getElementById('switch').addEventListener('change', function(e) {
                localStorage.setItem('switch', e.target.checked.toString()); 
                document.getElementById('output').innerHTML = e.target.checked.toString();
            });
        });
  </script>

  </head>
  <body>
<ons-page>
    <ons-switch id="switch"></ons-switch>
    <div id="output"></div>
</ons-page>
</body>
</html>

Edit: Just saw this is in Angular 2. I have also observed the bug for Angular but no Vanilla.

ons-switch browsing