Welcome to the Qwik Academy!

When building a user interface, one of the most common tasks that you have to do is to show or hide certain elements of the user interface depending on some logical condition.

For example, imagine that you want to show a profile picture only if the user is currently logged in, etc.

In the case of frameworks like Angular or Qwik, this is achieved using some sort of special directive like ngIf in the case of Angular, or v-if in the case of Vue.

But how do you do it in Qwik?

I'm going to show you right now how to do it. But I'm also going to explain in detail all the template syntax behind it, in case you are not super familiar with it already.

As a bonus, I'm also going to show you how to implement "if then else" logic in  Qwik. 😉

So, in a nutshell, how do you show or hide something in Qwik?

You can conditionally render elements in Qwik by using a plain JSX expression. Do a logical "and" of your logical condition with the value that you want to conditionally render, and that value will only be rendered if the condition is true, or omitted if false.

Here is the JSX syntax:

{condition && <div>conditionally rendered content</div> }

If you need a more detailed example, or some of this syntax does not make full sense to you yet and you still have some questions, then read on as I'm going to explain everything step by step.

Table of contents

Showing Or Hiding Elements in Qwik

Here is a simple Qwik component, containing a user profile picture:

Notice the isLoggedIn input property flag, which is currently not being used.

Let's now say that we would like to conditionally show or hide the profile picture element with the CSS class user-profile, depending on the value of a boolean flag like isLoggedIn.

Here is how you would do that in Qwik:

And that's it!

We just add the profile picture element inside an expression, and do a logical and (&&) with the isLoggedIn flag.

The advantage of this approach is that there is no special directive in Qwik for which you have to know a particular syntax, and know about the multiple options available, etc.

It's just plain Javascript code, or in this case, just plain JSX syntax and nothing more.

It's that simple. 😉

If Then Else logic in a Qwik Template

And if you want to implement an if-then-else logic in a Qwik template, instead of using a logical and, you simply use instead a plain Typescript ternary operator:

This will show the profile picture element if the isLoggedIn flag is true, and the default fallback content "No profile picture available" if the flag is false.

So it's all super simple, it's just plain JSX.

There are no special directives to know about or anything, which is great.

But the problem is that if you are not familiar with how JSX works, then all this syntax can feel rather magical and surprising the first time that you see it...

If you want to learn about how JSX handles this, this feature is known as conditional rendering, and you can read more about it here: JSX Conditional Rendering.

I'm sure that a lot of readers that might not be familiar with JSX are still left wondering what all this magic is about.

So I'm going to explain the whole syntax step by step.

Understanding the Syntax For Conditionally Displaying Elements in Qwik

To understand this syntax, let's go back to the initial example, where we only have the initial template, and no show/hide logic yet.

Let's delete the whole user-profile div, and in its place, let's use an empty JSX expression:

Inside this expression, we can put anything:

  • plain Javascript code that evaluates to a value
  • or even more JSX

As this is just plain JSX, and therefore just plain Javascript, we can add anything here.

So let's test to see if the isLoggedIn flag is true and do a logical and (&&) with a value:

So what is going on here?

We are doing a logical and with isLoggedIn first, and then a value.

This plain Javascript expression is guaranteed to:

  • return false if isLoggedIn is false
  • return the value if isLoggedIn is true

Don't forget, true && value == value in Javascript.  😉

Just try it in your browser console:

> true && "Hello World"
'Hello World'

So if we now replace the right-hand side value of our expression with a plain JSX node, like for example the user-profile div, we will have the last piece of the puzzle in place:

The end result is that the user-profile div gets rendered or not depending if the isLoggedIn flag is true or not, which is exactly what we want.

I hope this step-by-step explanation helped you make more sense of this syntax, in case that you are coming to Qwik from other non-JSX frameworks (like Angular).

I hope this post helped. if you are interested in learning more about Qwik, do make sure to subscribe to my Qwik newsletter:

Conclusion

As you can see, it's very simple to conditionally render content in Qwik.

The framework itself does not have any special features for it, as it relies 100% on JSX to make conditional rendering possible, just like React.

There is no need for a special directive like ngIf in Angular or v-if in Vue, so this means fewer things to learn in Qwik and a smaller API surface, which is awesome.

Let me know in the comments section below if this post covered what you were looking for, if you have any other questions, and what else would you like to learn about Qwik?

Let me know and I might just write a post about it. 😉

I'm looking forward to hearing from you.

Vasco Cavalheiro

Founder of OnlineCourseHost.com

Web Development Instructor (Qwik Academy and Angular University)

LinkedIn AngularUniv Facebook  AngularUniv Twitter