Difficulty with @if condition

[grsantos2215]

Hi There,

I made a project with Active CSS and I have a question about the working of layout conditions. This is what I make:
{@if(localStorage.getItem("lampQuarto") == "acessa"){ <i class="fa-solid fa-lightbulb text-success fa-2x" id="lampada_quarto"></i> }@else { <i class="fa-regular fa-lightbulb text-danger fa-2x" id="lampada_quarto"></i> }}

This is present in one component, inside HTML creation. I tried to run this and nothing return to me.
How I do to fix that?

[bob2517]

That syntax isn't currently supported inside HTML blocks. I would do something like this - put the result into a variable and output it into the HTML:

@component something {
  &:beforeComponentOpen {
    $someVar: (localStorage.getItem("lampQuarto") == "acessa") ? "fa-solid text-success" : "fa-regular text-danger";
  }
  html {
      <i class="{$someVar} fa-lightbulb fa-2x" id="lampada_quarto"></i>
  }
}

Hope that helps.

[bob2517-whiteline]

I've started looking at a new syntax for templating in the HTML blocks and will start an issue for it. The syntax upgrade would look something like this:

@component something {
  html {
      <i class="{:
         @if (localStorage.getItem("lampQuarto") == "acessa") {
            render: "fa-solid text-success";
         } @else {
            render: "fa-regular text-danger";
         }
     :} fa-lightbulb fa-2x" id="lampada_quarto"></i>
  }
}

That syntax would allow regular ACSS into the HTML block and allow for looping with @for and things like that. You could run regular actions in there on the rest of the DOM as long as the action commands contained nothing asynchronous. It would have a slight performance hit on component rendering but some people may prefer that method of rendering components, so I think it's worth doing.

So instead of the {= =} which is used to embed JavaScript, the {: :} syntax would embed ACSS into HTML blocks. Something like that.

That's not a quick upgrade, although it is possible. For now, the variable method would be the way to do it.