Directive Assignment

directive.component.html

<!--
1. Add button that will be named as Display Details, will toggling secret message on and
off
2. paragraph will display the secret if the secret havent display yet, and
vise versa
3. Will display count of the evertime the button is click (Timestamp stored into an array), and save the timestamp to an array using loop
4. if the content is more than five. index wise, it will give blue background color and white as its font
-->

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="card-body">
        <!-- <button class="btn btn-primary" (click)="showSecret = !showSecret"> -->
        <button class="btn btn-primary" (click)="onToggleDetails()">
          Display Details
        </button>
        <p *ngIf="showSecret">Secret Password = tuna</p>
        <div
          *ngFor="let logItem of log; let i = index"
          [ngStyle]="{ backgroundColor: i >= 4 ? 'blue' : 'transparent' }"
          [ngClass]="{ 'white-text': i >= 4 }"
        >
          {{ logItem }}
        </div>
      </div>
    </div>
  </div>
</div>

directive.component.ts

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

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css'],
})
export class DetailsComponent implements OnInit {
  showSecret = false;
  log = [];

  onToggleDetails() {
    this.showSecret = !this.showSecret;
    // this.log.push(this.log.length + 1);
    this.log.push(new Date());
  }

  constructor() {}

  ngOnInit(): void {}
}