Angular - add ngClass on 5th button click

Question

Trying to add ngClass to a div after a series of 5 button clicks.

Here is the button located on the app.component.html file:

<button class="btn btn-primary" (click)="onToggleDetails()">Display Details</button>

<p *ngIf="showSecret">Secret Password = tuna</p>

<div *ngFor="let logItem of log" 
  [ngStyle]="{backgroundColor: logItem >= 5 ? 'blue' : 'transparent'}"
  [ngClass]="{'white-text': logItem >= 5}"
>{{ logItem }}</div>

Here is the app.component.ts file:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'], *** EDIT ***
  styles: [`
  h3 {
    color: dodgerblue;
  }
  `]
})
export class AppComponent {
  username1 = '';
  showSecret = false;
  log = [];
  onToggleDetails(){
  this.showSecret = !this.showSecret;
  this.log.push(this.log.length + 1);
  }
}

Here is app.component.css

.white-text{
  color: white;
}

Currently, the logItem background remains blue after the 5th button click. I can inspect the console and see that the class .white-text has been added, but the text remains black.

Here is how it looks:

When I inspect the element, you can see the class has been added:

I am new to Angular and I am following a udemy course and got stuck here. I cannot proceed to the next part unless I fix this.

Select the element in the inspector and check its styles to see if another CSS selector overrides the color set in `.white-text`. — ConnorsFan, Dec 03 '18 at 03:06

user3392782 · Accepted Answer · 2018-12-03T04:02:06.980

1

Change your component definition as per below to include the CSS file.

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.cs']
  })

edited Dec 03 '18 at 04:02

answered Dec 03 '18 at 03:09

user3392782

181
4

Nice catch, but still no change. The text is still black. Any thoughts? – John Beasley Dec 03 '18 at 03:18
My bad (oversight) , you can't have both styles and styleUrls. So you will have to move the styles part to css file. Edited my answer as well. – user3392782 Dec 03 '18 at 04:01
I think that did the trick. I commented out styleUrls and added class .white-text to the styles and everything works now. Thank you for your input. – John Beasley Dec 03 '18 at 04:16
I can actually remove styles and just use styleUrls and everything works fine. – John Beasley Dec 03 '18 at 04:20

Joshua Rice · Answer 2 · 2022-10-28T15:50:32.627

0

log : any [ ] = [ ];

This was another solution when searching for a more specific question I will give credit where credit is due. What is "not assignable to parameter of type never" error in TypeScript?

edited Oct 28 '22 at 15:50

answered Oct 23 '22 at 02:48

Joshua Rice

1
1

Welcome to SO! Try to format it better, like `log : any [] = [];`. And it is better "visually" if the link encompasses less words, not all the phrase. – Marcelo Scofano Diniz Oct 25 '22 at 16:58
1

@MarceloScofanoDiniz thank you for your input and the welcoming. Any input to better oneself is always appreciated by those open to it. I appreciate it. – Joshua Rice Oct 29 '22 at 02:55

Angular - add ngClass on 5th button click

2 Answers2