One of the files in my project is named server.component.ts and another is named server.component.html.
This is how my server.component.ts file is structured:
import { Component } from '@angular/core';
@Component({
selector: 'app-server',
templateUrl: './server.component.html',
styles : [
`.online {color : white;
}`]
})
export class ServerComponent {
serverId : number= 10;
serverStatus : string = 'offLine';
paragraphName : 'Paragraph01';
showSecret = false;
log = [];
constructor(){
this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline';
}
getServerStatus(){
return this.serverStatus;
}
getColor(){
return this.serverStatus === 'online'? 'Green':'Red';
}
onToggleDisplay(){
this.showSecret = !this.showSecret;
this.log.push(this.log.length + 1);
}
}
As for the server.component.html file, it looks like this:
<button class = "btn btn-primary" (click) = "onToggleDisplay()">Display Details</button>
<p *ngIf ="showSecret">Secret Password = tuna</p>
<div *ngFor = "Let logItem of log ">{{ logItem }}</div>
I have been attempting to display the log item after clicking on the Display Details button, but nothing seems to be happening.
I am currently a beginner in learning Angular.