Switch & Show

Switch & Show helps us conditionally render components in Nijor which depends on reactive-variables. Let's understand with the help of an example.


            <body>
                <p>Age is {@age}</p>

                <div>
                    <button on:click="Decrement()">-</button>
                    <button on:click="ResetCount()">Reset</button>
                    <button on:click="Increment()">+</button>
                </div>
                
                <p n:switch="@age"> <!-- This tells the compiler to rerender this section whenever @age changes. -->
                    <n:show when="@age >= 18">You are eligible to drive !</n:show>
                    <n:show when="@age < 18">You are not eligible to drive !</n:show>
                </p>

            <body>
            <script>
                const @age = 0;
            </script>

You can put components inside the n:show blocks. But can't put any loops or async-loads. If you want to use them, then write the loops or async-loads in different components and then call them inside the n:show blocks.


            <dashboard n:imported="....." />
            <loginpage n:imported="....." />

            <body>
                <div n:switch="@loggedin">
                    <n:show when="@loggedin == true">
                        <dashboard>
                    </n:show>
                    <n:show when="@loggedin == false">
                        <loginpage>
                    </n:show>
                </div>
            <body>
            
            <script>
                import { @loggedin } from '.....';
            </script>