Using *ngFor to iterate through elements with distinct styles

Question

Using *ngFor to iterate through elements with distinct styles

Is there a way to assign different classes to buttons generated using *ngFor without changing the class for all previously created buttons when toggled? I have 2 search bars adding text to the same array, displayed as buttons. I want to differentiate between data from searchbar1 in blue and searchbar2 in orange, while maintaining the order of selection.

newAction(text){
  this.classvalue = true;
  this.ConvMsgs.push("ChatBot: "+text);
    console.log(text);
  }
newIntent(text){
  this.classvalue =false;
this.ConvMsgs.push("User: "+text);
  console.log(text);
}

.msg_cotainer{
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 10px;
        border-radius: 25px;
        background-color: #39adc7;
        padding: 10px;
    position: relative;
  }
  .msg_cotainer2{
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 10px;
        border-radius: 0px;
        background-color: chocolate;
        padding: 10px;
    position: relative;
  }

<ng-container *ngFor="let button of ConvMsgs">
                  <br />
                  <button [ngClass]="classvalue? 'msg_cotainer':'msg_cotainer2'">{{button}}</button>
                  <br />
                </ng-container>

These functions are triggered when clicking on search bar results.

css angular typescript

Answer 1

Answer №1

When attempting to show a message, consider passing the message as an object rather than a string. Utilizing an object with text and class properties allows for customization of the message's appearance through the class property.

Here's an example that you can experiment with on StackBlitz.

app.component.html

<button *ngFor="let message of messages" [ngClass]='message.class'>{{message.text}}</button>

app.component.css

.action {
  background: red;
}
.intent {
  background: green;
}

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  messages = [];

  ngOnInit() {
    this.newAction('Action 1');
    this.newAction('Action 2');
    this.newIntent('Intent 1');
  }

  newAction(text){
    this.messages.push({
      text: `Chatbot ${text}`,
      class: 'action'
    });
  }
  newIntent(text){
    this.messages.push({
      text: `User: ${text}`,
      class: 'intent'
    });
  }
}

Answer 2

When attempting to show a message, consider passing the message as an object rather than a string. Utilizing an object with text and class properties allows for customization of the message's appearance through the class property.

Here's an example that you can experiment with on StackBlitz.

app.component.html

<button *ngFor="let message of messages" [ngClass]='message.class'>{{message.text}}</button>

app.component.css

.action {
  background: red;
}
.intent {
  background: green;
}

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  messages = [];

  ngOnInit() {
    this.newAction('Action 1');
    this.newAction('Action 2');
    this.newIntent('Intent 1');
  }

  newAction(text){
    this.messages.push({
      text: `Chatbot ${text}`,
      class: 'action'
    });
  }
  newIntent(text){
    this.messages.push({
      text: `User: ${text}`,
      class: 'intent'
    });
  }
}

Answer 3

Answer №2

It is recommended to utilize a boolean variable within the ConvMsgs object:

newMessage(text){
    this.ConvMsgs.push({
        text: "ChatBot: "+text,
        isChatBot: true
    });
    console.log(text);
}
newUserInput(text){
    this.ConvMsgs.push({
        text: "User: "+text,
        isChatBot: false
    });
    console.log(text);
}

<ng-container *ngFor="let message of ConvMsgs">
    <br />
    <button [ngClass]="message.isChatBot ? 'chatbot_message' : 'user_message'">{{ message.text }}</button>
    <br />
</ng-container>

Answer 4

It is recommended to utilize a boolean variable within the ConvMsgs object:

newMessage(text){
    this.ConvMsgs.push({
        text: "ChatBot: "+text,
        isChatBot: true
    });
    console.log(text);
}
newUserInput(text){
    this.ConvMsgs.push({
        text: "User: "+text,
        isChatBot: false
    });
    console.log(text);
}

<ng-container *ngFor="let message of ConvMsgs">
    <br />
    <button [ngClass]="message.isChatBot ? 'chatbot_message' : 'user_message'">{{ message.text }}</button>
    <br />
</ng-container>

Answer 5

Answer №3

If you find yourself with a limited number of buttons to display, you can utilize the array index to determine which class to apply. Here's an example:

<ng-container *ngFor="let button of ConvMsgs; let i = index">
    <br />
    <button [ngClass]="'message_container' + i">{{ button.text }}</button>
    <br />
</ng-container>

Answer 6

If you find yourself with a limited number of buttons to display, you can utilize the array index to determine which class to apply. Here's an example:

<ng-container *ngFor="let button of ConvMsgs; let i = index">
    <br />
    <button [ngClass]="'message_container' + i">{{ button.text }}</button>
    <br />
</ng-container>

Using *ngFor to iterate through elements with distinct styles

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to change a Material UI style without resorting to an HOC?

Having trouble getting my local website to load the CSS stylesheet through Express and Node.js in my browser

Customizable dropdown menu design using HTML and CSS

"Troubleshooting: Module not found" (Getting started with Jest in a nested project connected to a shared directory)

Having trouble accessing the 'add' property of Rxjs Subscription

Angular 7 - Implementing periodic JSON data retrieval from server and maintaining local storage within Angular application

Angular 10 - Understanding the R3InjectorError in AppModule related to Window constant injection

Uploading Files with Angular 2 using AJAX and Multipart Requests

Updating a list item in AngularFire2 triggers a change in the overall list

Text color wave effect - mimic a block of colors flowing through text

Using data analysis to customize the appearance of boundaries across various map styles - Google Maps Javascript API V3

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Unable to eliminate a persistent purple dashed section within the div

Troubleshooting Socket-io Client Problem After Migrating to TypeScript

The appearance of a printed webpage does not match what is shown in Google Chrome's Print Preview feature

Issues with the rating plugin functionality in Ionic 3

Using the `ngrx` library to perform an entity upsert operation with the

Tips for maintaining the footer at the bottom of the page regardless of the screen size

The footer element is missing from the body section of the HTML code, causing the box shadow to not encompass the footer as intended

Merge two attributes into a single entity using RxJS