CODEWITHSUNDEEP
angular
Manzer Hashmi
Manzer Hashmi

Reputation: 73

how to change backgroundcolor of divs when they are clicked in angular2

Here, divs are created in a loop. I want first div to have a default blue color and rest black backgroundcolor. when other div are clicked that div become blue and other black. How to do that ?

app.component.ts
------------------------
tabsData = ['a', 'br', 'Sp', 'hh','ee'];

    app.component.html
    ---------------------
    <div class="col-xs-12 rmpm tabsMenu" id="navBar">
            <div class="">
                <div  class="navMenu  menu-list " (click)="changeClass($event)"  *ngFor="let tab of tabsData;let i = index; let frst=first" [ngClass]="{'active': isSelected, 'active': frst}" >
                    {{tab}}
                </div>
            </div>
        </div>

Upvotes: 0

Views: 45

Answers (1)

Mike Hill
Mike Hill

Reputation: 3772

It is often best to store this state in the view model (component) when possible. You might try something like this:

@Component({
    selector: 'app-my-component',
    template: `
        <div class="col-xs-12 rmpm tabsMenu" id="navBar">
            <div class="">
                <div class="navMenu menu-list"
                        *ngFor="let tab of tabsData"
                        (click)="selected = tab"
                        [class.active]="tab === selected">
                    {{tab}}
                </div>
            </div>
        </div>
    `
})
export class MyComponent implements OnInit {
    @Input() public tabsData: Tab[] = [];
    public selected: Tab;

    public ngOnInit(): void {
        this.selected = tabsData[0];
    }
}

Upvotes: 2

Related Questions