如何在Angular 6中更改按钮状态？

Question

I am new to Angular 6, my website contains a section which displays a set of buttons formed dynamically as follows

<button class="card-button" *ngFor="let env of product.env" name="button">{{env.name}}</button>

Also, I want to display different border of a button which is selected by default as

button:focus {
      border-bottom: 4px solid #CC292B;
      color: #CC292B;
}
button{
      border-bottom: 4px solid green;
      color: green;
}

Now If the button is selected it should come up with color: #CC292B; and green otherwise. Through the above CSS, I was able to achieve the task. Now I wanted the first button to be selected by default ie the first should appear with color: #CC292B; and rest with green color, how can I achieve this? Thanks in advance

Answer 1

Use ngClass to achieve that:

<button class="card-button" *ngFor="let env of product.env; let i = index" [ngClass]="[i == 0 ? 'button-active' : 'button-standard']" name="button">{{env.name}}</button>

and you can have this kind of css

.button-active{
color:red;
}

.button-standard{
color: green;
}

Answer 2

Use [style.color] to index=0

[style.color]="{'#CC292B' : i == 0}"

See code:

<button class="card-button" *ngFor="let env of product.env;let i=index;" name="button" [style.color]="{'#CC292B' : i == 0}">{{env.name}}</button>

BTW you can do only with css with :first-child

 .card-button:first-child { color: red; } 

 //like ngFor <button class="card-button" name="button">{{env.name}}</button> <button class="card-button" name="button">{{env.name}}</button> <button class="card-button" name="button">{{env.name}}</button> 

Answer 3

Create two class for selected and notselected . Apply class selected if it is first button, otherwise notselected

<button class="card-button" *ngFor="let env of product.env; let idx = index" 
[ngClass]="[idx == 0 ? 'selected' : 'notselected']" name="button">{{env.name}}</button>

Or you can color the button as below:

<button class="card-button" *ngFor="let env of product.env; let idx = index" 
[style.color]="{'green' : idx != 0, '#CC292B': idx == 0}" name="button">{{env.name}}</button>

Answer 4

If you want to change the button style dynamically on user click use this:

In your component add this method:

public isselected=0;
buttonClick(index){
    this.isselected=index;
}

In HTML add the below code:

   <div *ngFor="let env of carsList; let i =index">
        <button (click)="buttonClick(i)" class="card-button" name="button" [ngClass]="[i == isselected ? 'button-active' : 'button-standard']" >{{env}}</button>
        </div>

Answer 5

Use [ngClass] to add a class to the button that should get the focus automatically after the view is initialized.

<button 
    class="card-button" 
    *ngFor="let env of product.env; let i = index" 
    [ngClass]="[i == 0 ? 'autoFocusMe' : '']" 
    name="button">
    {{env.name}}
</button>

Then add method ngAfterViewInit() to your component.ts file to set the focus to that button

ngAfterViewInit() {
    (<HTMLButtonElement>document.getElementsByClassName("autoFocusMe")[0]).focus();
}

Answer 6

I have created working example .Please check

https://stackblitz.com/edit/angular-rk93xt