CODEWITHSUNDEEP
cssblazor
ewomack
ewomack

Reputation: 667

Toggling CSS active classes on click events in Blazor

I am trying to find the best way to toggle css classes on and off with Blazor click events. This functionality involves clicking on a column of list boxes generated by a @foreach and changing the style for only the active box and then disabling it with subsequent clicks on other boxes. In short, only the active box changes style on click and all other boxes do not have the style change.

I have started with the code below, which creates the boxes correctly, but it applies 'active' to all of the list boxes rather than to just the currently active box (this is still in POC, so some of the code still needs refactoring):

 @foreach (var msg in Message)
            {
                <a class="list-group-item list-group-item-action @(ActiveClass ? "active" : "")"  data-toggle="list" href="#home" role="tab" @onclick="() => popIt(msg.MsgId)">
                    <span id="msgSubject1">@msg.Subject</span><br /><span class="datetimeCls" id="datetime1">@msg.DateCreated</span>
                </a>
            }

private bool ActiveClass { get; set; }

 public void popIt(int num)
{
    var text = Message[num].MessageText;
    var subject = Message[num].Subject;
    Subject = subject;
    MessageText = text;
    DateCreated = Message[num].DateCreated;
    ActiveClass = true;
}

Angular 8 has the built-in "ngClass." The following code works for this scenario - does Blazor have anything similar? I also noticed that the Angular click can handle two inputs, which I haven't seen in Blazor yet:

 <div *ngFor="let msg of messages; let i = index" >
        <a class="list-group-item list-group-item-action" data-toggle="list" href="#home" role="tab" [ngClass]="{ 'active' : msg == activeMessage}"(click)="activeMessage = msg;popIt(i)">
          <span id="msgSubject1">{{msg.Subject}}</span><br /><span class="datetimeCls" id="datetime1">{{msg.DateCreated | date : 'short' }}</span>
        </a>
      </div>
    </div>

Upvotes: 3

Views: 2639

Answers (1)

ewomack
ewomack

Reputation: 667

The below code seems to work. It creates a new variable called "ActiveMessageId" and assigns the clicked message id to that message. 

         @foreach (var msg in Message)
                    {
                        <a class="list-group-item list-group-item-action @(ActiveMessageId == msg.MsgId ? "active" : "")"  data-toggle="list" href="#home" role="tab" @onclick="() => popIt(msg.MsgId)">
                            <span id="msgSubject1">@msg.Subject</span><br /><span class="datetimeCls" id="datetime1">@msg.DateCreated</span>
                        </a>
                    }

      private int ActiveMessageId { get; set; }

public void popIt(int num)
    {
        var text = Message[num].MessageText;
        var subject = Message[num].Subject;
        Subject = subject;
        MessageText = text;
        DateCreated = Message[num].DateCreated;
        ActiveMessageId = num;
    }

Upvotes: 3

Related Questions