Issue
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.
Solution
Change your component definition as per below to include the CSS file.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.cs']
})
Answered By - user3392782
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.