Exploring the art of styling in Angular6

Question

Exploring the art of styling in Angular6

I am looking to change the text color when a specific ID is clicked

     <nav class="navbar ">
        <ul class="navbar-nav">
          <li *ngFor="let item of items">
         <a class="nav-link" >{{item.title}}</a>
          </li>
        </ul>
      </nav>


items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]

Controller:

private name;

this.routes.params.subscribe((params)=>{
      this.data=params['id'];
      console.log(this.data);
    })  

this.Service.getAllItems().subscribe((data)=>{
   this.items=data;
   for(let i of this.items){
   if(i.id == this.data){
   this.name=i.title;
}
}

I need to change the text color to red when a specific ID is clicked. Can anyone help with how to achieve this?

css angular html

Answer 1

Answer №1

Create a variable to store the active ID after clicking:

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

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

      setIdActive(id) {
        this.activeId = id;
      }

    }

In your HTML:

<nav class="navbar ">
        <ul class="navbar-nav">
          <li *ngFor="let item of items">
         <a (click)="setIdActive(item.id)" class="nav-link" [ngClass]="{'apply-color': item.id == activeId}" >{{item.title}}</a>
          </li>
        </ul>
</nav>

apply-color is a CSS class that sets the desired color.

Answer 2

Create a variable to store the active ID after clicking:

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

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

      setIdActive(id) {
        this.activeId = id;
      }

    }

In your HTML:

<nav class="navbar ">
        <ul class="navbar-nav">
          <li *ngFor="let item of items">
         <a (click)="setIdActive(item.id)" class="nav-link" [ngClass]="{'apply-color': item.id == activeId}" >{{item.title}}</a>
          </li>
        </ul>
</nav>

apply-color is a CSS class that sets the desired color.

Answer 3

Answer №2

This response is tailored to situations where we need to emphasize all the options that have been selected.

If you wish to alter the color of all clicked links, rather than just the most recent one, I recommend utilizing a HostListener directive.

constructor(private elem: ElementRef, private renderer: Renderer) { }

@HostListener('click',['$event'])  //in this scenario, the event parameter can be omitted
Click(event: Event) {
    this.renderer.setElementStyle(elem.nativeElement, 'color', 'red');
}

If using just the CSS style for a:visited suits your needs (though not personally tested), it may be the optimal solution.

Answer 4

This response is tailored to situations where we need to emphasize all the options that have been selected.

If you wish to alter the color of all clicked links, rather than just the most recent one, I recommend utilizing a HostListener directive.

constructor(private elem: ElementRef, private renderer: Renderer) { }

@HostListener('click',['$event'])  //in this scenario, the event parameter can be omitted
Click(event: Event) {
    this.renderer.setElementStyle(elem.nativeElement, 'color', 'red');
}

If using just the CSS style for a:visited suits your needs (though not personally tested), it may be the optimal solution.

Answer 5

Answer №3

To solve this issue, use the [ngClass] directive. When the link is clicked, pass the item to the function to change the activeId and apply the class using [ngClass] to the link.

let activeId:number;

makeALinkActive(item){
this.activeId = item.id;
}

items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]

.red{
color: red;
}

<nav class="navbar ">
    <ul class="navbar-nav">
       <li *ngFor="let item of items">
          <a class="nav-link" [ngClass]="{'red':activeId === item.id}" (click)='makeALinkActive(item)'>{{item.title}}</a>
       </li>
    </ul>
 </nav>

items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]

Answer 6

To solve this issue, use the [ngClass] directive. When the link is clicked, pass the item to the function to change the activeId and apply the class using [ngClass] to the link.

let activeId:number;

makeALinkActive(item){
this.activeId = item.id;
}

items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]

.red{
color: red;
}

<nav class="navbar ">
    <ul class="navbar-nav">
       <li *ngFor="let item of items">
          <a class="nav-link" [ngClass]="{'red':activeId === item.id}" (click)='makeALinkActive(item)'>{{item.title}}</a>
       </li>
    </ul>
 </nav>

items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]

Exploring the art of styling in Angular6

Answer №1

Answer №2

Answer №3

Similar questions

Discover the benefits of utilizing router.back() cascade in Next/React and how to effectively bypass anchor links

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

What is the process of assigning attribute values conditionally in Angular 2?

Why isn't setInterval set to a duration of one thousand milliseconds?

Add() function is not duplicating the formatting

Angular Material's <mat-select> element can trigger a function to execute when it loses focus

The uniform height of flex columns was spoiled by a child element with a display setting of flex

What is the method for bypassing libraries while troubleshooting Angular code in Visual Studio Code?

What is the best way to refresh or reload a child component in Angular?

Enhancing List Numbers with CSS Styling

Retrieve a targeted tag from the API snippet

Displaying SQL data in a table using PHP

Using CSS3 gradient in grey instead of white

Tips for enhancing the flexibility of the owl carousel

Using Jquery to update the information displayed in a div class to show more details about the clicked video

The `user-select: none` property displays distinct behavior in Safari

Steps for sending angular form data to a .Net backend that requires an autoincrement id:

Difficulty encountered with changing font color on CSS

Display the table once the radio button has been selected

Having trouble with linking an external JavaScript file inside the head tag?