Toggle display button not working in Angular with click()

Question

I've files named as server.component.ts and server.component.html.

My server.component.ts file looks like this.

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);
  }
}

and server.component.html file looks like :

<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 am trying to print log item which should return log after clicking on Display Details button. But nothing's happening.

I am new to Angular.

use small letter for let => <div *ngFor = "let logItem of log ">{{ logItem }}</div> — TechnoTech
– TechnoTech, Commented Jul 30, 2020 at 11:59

TechnoTech · Accepted Answer · 2020-07-30 12:00:47Z

3

modify this line , there is no Let, its let (with small letters)

<div *ngFor = "let logItem of log ">{{ logItem }}</div>

Here is the demo

answered Jul 30, 2020 at 12:00

TechnoTech

7955 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jorge Mussato · Accepted Answer · 2020-07-30 12:00:50Z

1

When you're doing a ngFor, you should let item of itens. It's written Let. Maybe that is the problem

<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>

answered Jul 30, 2020 at 12:00

Jorge Mussato

2,5942 gold badges13 silver badges20 bronze badges

Collectives™ on Stack Overflow

Toggle display button not working in Angular with click()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related