CODEWITHSUNDEEP
cssangular
rafaelcb21
rafaelcb21

Reputation: 13304

Angular 2 change css by id

I'm trying to change the menu css that was clicked by id, and when click on another menu all others lose their style, and only what was clicked wins the style.

But I'm not making to do this, someone could help me?

import { Component } from '@angular/core';
import { NgClass } from '@angular/common';

@Component({
    selector: 'my-header',
    template: `
        <nav class="navbar navbar-default navbar-static-top">
            <ul class="nav navbar-nav">
                <li><a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="1">Menu 1</a></li>   
                <li><a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="2">Menu 2</a></li>
                <li><a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="3">Menu 3</a></li>
                <li><a [ngClass]="{'selectedClass': selected}" (click)="selectId($event)" id="4">Menu 4</a></li>
            </ul>
        </nav>
    `,
    styles: [`
        .selectedClass {
            color: #cc0000;
            background-color: #ffffff;
        }
    `]
})
export class HeaderComponent {
    selected = false;

    selectId(event) {
        console.log(event.currentTarget.id);
        selected = true;
    }    
}

Upvotes: 2

Views: 2091

Answers (1)

malifa
malifa

Reputation: 8165

Well, at the moment you're just setting selected (edit: you forget this. in front of your selected btw, just saw that now) to true every time one of your links is clicked so on your first click all of your items get the class selectedClass and after that nothing else changes anymore.

Without modifying your example too much, you could just pass and save an id of your latest clicked item instead of a boolean value. Then just check on the selected id if the item should have selectedClass.

Something like this:

<ul class="nav navbar-nav">
       <li><a [ngClass]="{'selectedClass': selected == 1}" (click)="selectId(1)">Menu 1</a></li>   
       <li><a [ngClass]="{'selectedClass': selected == 2}" (click)="selectId(2)">Menu 2</a></li>
       <li><a [ngClass]="{'selectedClass': selected == 3}" (click)="selectId(3)">Menu 3</a></li>
       <li><a [ngClass]="{'selectedClass': selected == 4}" (click)="selectId(4)">Menu 4</a></li>
</ul>

export class HeaderComponent {
    selected: number;

    selectId(id: number) {
        this.selected = id;
    }    
}

A better approach would probably be to use defined objects for your navigation items in the first place so you don't have to worry about which values to pass / check for something like this and make it more dynamic.

For example you could define your links directly in your class (or even via @Input()), let *ngFor build up your navigation and pass around the "navigation item objects" directly:

export class HeaderComponent {
    @Input() navigationItems: any[] = [      // defined a default array as example
        {
            text: 'Menu 1',
            selected: false
        }
    ];

    onItemClick(item: any) {
        this.navigationItems.map((navItem) => {
            navItem.selected = navItem === item;
        });
    }  
}

<ul class="nav navbar-nav">
     <li *ngFor="let item of navigationItems">
        <a [ngClass]="{'selectedClass': item.selected}"
           (click)="onItemClick(item)">
            {{item.text}}
        </a>
     </li>   
</ul>

Upvotes: 2

Related Questions