How to use ng-class for array of buttons for giving a separate condition to each button

ngclass
ng-class conditional
ngstyle
ngstyle conditional angular 7
angular 4 add class dynamically
ngclass not working
ngstyle=('background-color)
ng-class if else

I have a simple problem statement. I have to take arrays of 3 buttons and on the click of every button the background of the page should change. This should be done in pure angular-typescript (javascript functions cannot be used). I just know that I have to use ng-class for giving conditions to the button but I am not sure how. I have successfully made an array of three buttons but I am stuck now. Please help with a solution. Below is my component.ts code

buttons = [
{
  name: 'Red',
  id: 'btn1'
},
{
  name: 'Green',
  id: 'btn2'
},
{
  name: 'Blue',
  id: 'btn3'
}
];

getColor(id) {
switch (id) {
  case 'btn1':
    return 'red';
  case 'btn2':
    return 'green';
  case 'btn3':
    return 'blue';
}
}

Below is the html code which I tried.

<div *ngFor="let button of buttons">
  <button [ngStyle]="{'background-color':getColor(button.id)}">
  {{ button.name }}</button>
</div>

I used ng-style but that did not work as expected. Please suggest me the solution using ng-class.

In your case you can directly provide button.name in your inline css

<div *ngFor="let button of buttons">
  <button [ngStyle]="{'background-color': button.name}">
  {{ button.name }}</button>
</div>

you acn also check on link

https://stackblitz.com/edit/angular-ufnq8p?file=src%2Fapp%2Fapp.component.html

Applying Conditional Styles to Components Using Angular , How to use ng-class for array of buttons for giving a separate condition to each button - angular. You could use className to compose more complex classes, but this defeats the purpose of using NgClass in Angular. However, before we do let’s look at how to use Angular’s binding syntax to toggle a class. Property binding with “class” To toggle a class with Angular, we can use the [class.class-name] syntax to supply a condition to be

Working Demo for your use case https://stackblitz.com/edit/create-xgn8sa?file=app%2Fapp.component.ts

Angular ngClass and ngStyle: The Complete Guide, Explore the ngClass and ngStyle styles in detail to ease your Angular woes. Most of the time, we want to apply component styles at all times. <label>A Bootstrap Button <button class="btn btn-primary">Click an object; an array; a string to assign multiple CSS attributes based on different conditions: If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.

Update your HTML page as below

<div [ngStyle]="{'background-color': color}">
    <hello name="{{ name }}"></hello>
     <p>Start editing to see some magic happen :)
     </p>
    <div *ngFor="let button of buttons">
     <button (click)="color=button.name" >
    {{ button.name }}</button>
  </div>
</div>

Angular 2+ Classes with NgClass and NgStyle ― Scotch.io, Component Styling using ngClass - when to use it and when to use other alternatives? In order to cover each feature, we will be adding the multiple they are added to an element only if a certain programmatic condition is met. Angular will then take the array passed to ngClass , and apply the CSS  This example will help you to understand how to display the array data using ngfor template. Especially, the easiest way to display the component property or you can say the class variable is to bind the property using name through interpolation. So using the {{ }} double brackets you can bind the data to the component in angular.

Introduction to Angular ngClass and ngStyle, In this blog post, we'll be learning about NgClass and NgStyle in Angular v2.x. Using the [ngStyle] Binding; Getting Started With Angular Class Directives And for that, we would need to create a small div like the one below: attach a click function to this button to set the color dynamically --> <button  Both the NgStyle and NgClass directives can be used to conditionally set the look and feel of your application. NgStyle gives you fine grained control on individual properties. But if you want to make changes to multiple properties at once, creating a class which bundles those properties and adding…

AngularJS to Angular concepts: Quick reference, The content is likely still applicable for all Angular 2 + versions. Now lets look at the primitives the Angular syntax gives us out of the box. We can also use the Angular property syntax to add CSS classes to elements. 'font-weight': 'bold'}"> style using ngStyle </div> <input [(ngModel)]="color" /> <button  The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item. If you have an collection of objects, the ng-repeat directive is perfect for making a HTML table, displaying one table row for each object, and one table data for each object property. See example below.

Playing with dialogs and ng-templates · Codegram, To filter output in AngularJS templates, use the pipe character (|) and one or more filters. many applications bootstrap declaratively with the ng-app directive, giving it the In AngularJS, the ng-class directive includes/excludes CSS classes based on In the first example, when the user clicks the button, the toggleImage()  We have used the class name attribute to specify our class, which is being toggled using the button provided. Using the ngClass Binding. Another class binding we can do is using the ngClass binding. We can use the ngclass to load classes dynamically too. Just like the class name, we can load the classes either by string, by an array or even by

Comments
  • Your code works fine stackblitz.com/edit/ng-style-example1?file=src/app/…
  • Your code is fine but you want to change the page color so I created one demo which changes the div color on click of the particular button. see this stackblitz.com/edit/angular-vjbwsu?embed=1
  • @AmitChigadani yes but I need to change the background of the whole page on click of every button
  • Thanks for the help but actually I needed to change the background of the whole page that too using ng-class..can you help me with that @SnehaPawar
  • If you want to do it using ng-class, then you have to either write css for each class, or use Renderer2 to do it from the component.
  • Sneha, change your button (click) for some like (click)="color=button.name"
  • Yes, this is also another option to achieve this