Question

179

How to use a ternary operator to add a class to an HTML element in ejs

rated 0 times [ 182] [ 3] / answers: 1 / hits: 20856 / 7 Years ago, wed, february 1, 2017, 12:00:00

I am new to using ejs. I have a menu and I want to highlight the current menu item.
I have tried this:

<li class=<% currentMenu == 'dashboard' ? 'active' : ''%>>

    <a href= '/dashboard'>

       <i class=material-icons>dashboard</i>

       <span>Dashboard</span>

    </a>

</li>

The value of the currentMenu is served by an express router as shown below:

app.get('/dashboard', function(req, res) {

  if (isAuthorised) {

    res.render('pages/index', {

      title: 'Welcome | MW Tracker',

      email, userName, role, menus,

      currentMenu: 'dashboard'

    })

  } else {

    res.render('pages/sign-in', {

      title: 'Sign In | MW Tracker'

    })

  }

});

Please how am I suppose to add the class?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristinsonjab

Add To Favorites

Follow

Total Points: 364

Total Questions: 98

Total Answers: 98

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

kristinsonjab questions

1 is it possible to install canvas with M1 chip

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React-router v6 Route composition. Is it possible to render a custom Route?

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Next.js router locale issue

Fri, Jan 22, 21, 00:00, 3 Years ago

1 Sort array of objects by multiple properties of string type

Wed, Sep 2, 20, 00:00, 4 Years ago

1 Can't scroll down screen in react JS

Fri, Aug 14, 20, 00:00, 4 Years ago

View All

answered 7 Years ago tomas · Accepted Answer

You need to replace the <% %> tag with the <%= %> tag in order to output the expression value:

<li class=<%= currentMenu === 'dashboard' ? 'active' : '' %>>

  <!-- -->

</li>

As the EJS documentation states, the <% %> tags are for control-flow, no output code; whereas the <%= %> tags output and interpolate the value into the HTML template.

For example, the if statement below uses <% %> tags because the statement doesn't need to be outputted into the HTML. Then inside of the condition, the variable is outputted and interpolated into the HTML template by using the <%= %> tags: <%= currentMenu %>.

<% if (currentMenu === 'dashboard') { %>

  <span><%= currentMenu %></span>

<% } %>