Skip to content

Instantly share code, notes, and snippets.

@jhades
Last active January 20, 2023 09:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jhades/e21d537f3cde6ddc77486fc3036b63e4 to your computer and use it in GitHub Desktop.
Save jhades/e21d537f3cde6ddc77486fc3036b63e4 to your computer and use it in GitHub Desktop.
How to Show Or Hide Template Elements in Qwik - https://blog.qwikacademy.io/qwik-conditional-rendering-show-hide/
export const App = component$<{isLoggedIn:boolean}>( (props) => {
const {isLoggedIn} = props;
return (
<div class="container">
<div className="user-profile">
<img src="https://qwik.builder.io/logos/qwik-logo.svg" />
</div>
<div class="main">
<p>the rest of the content ....</p>
</div>
</div>
);
})
export const App = component$<{isLoggedIn:boolean}>( (props) => {
const {isLoggedIn} = props;
return (
<div class="container">
{ isLoggedIn &&
<div className="user-profile">
<img src="https://qwik.builder.io/logos/qwik-logo.svg" />
</div>
}
<div class="main">
<p>the rest of the content ....</p>
</div>
</div>
);
});
export const App = component$<{isLoggedIn:boolean}>( (props) => {
const {isLoggedIn} = props;
return (
<div class="container">
{ isLoggedIn ?
<div className="user-profile">
<img src="https://qwik.builder.io/logos/qwik-logo.svg" />
</div>
:
<h1>No profile picture available</h1>
}
<div class="main">
<p>the rest of the content ....</p>
</div>
</div>
);
});
export const App = component$<{isLoggedIn:boolean}>( (props) => {
const {isLoggedIn} = props;
return (
<div class="container">
{
.... we are going to add here the user profile, depending on the value of isLoggedIn ...
}
<div class="main">
<p>the rest of the content ....</p>
</div>
</div>
);
});
export const App = component$<{isLoggedIn:boolean}>( (props) => {
const {isLoggedIn} = props;
return (
<div class="container">
{ isLoggedIn && ...some value... }
<div class="main">
<p>the rest of the content ....</p>
</div>
</div>
);
});
export const App = component$<{isLoggedIn:boolean}>( (props) => {
const {isLoggedIn} = props;
return (
<div class="container">
{ isLoggedIn &&
<div className="user-profile">
<img src="https://qwik.builder.io/logos/qwik-logo.svg" />
</div>
}
<div class="main">
<p>the rest of the content ....</p>
</div>
</div>
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment