App3 - Directives

app.component.css

.special-event {
  color: white;
  padding: 3px;
  margin: 5px;
}

app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <ol>
        <li>Add A button which says 'Display Details'</li>
        <li>Add a paragraph with any content of your choice (e.g. 'Secret Password = tuna')</li>
        <li>Toggle the displaying of that paragraph with the button created in the first step</li>
        <li>Log all button clicks in an array and output that array below the secret paragraph (maybe log a timestamp or simply an incrementing number)</li>
        <li>Starting at the 5th log item, give all future log items a blue background (via ngStyle) and white color (ngClass)</li>
      </ol>
    </div>
    <div class='col-xs-12'>
      <button (click)="updateLog($event.clientX, $event.clientY)" class='btn btn-primary'>Display Details</button>
      <p *ngIf="Active">{{data}}</p>
    </div>
    <div class='col-xs-12'>
      <ul>
        <li *ngFor="let evt of clickResponses; index as idx" [ngClass]="{'special-event': idx >= classFlag}" [ngStyle]="{backgroundColor: idx >= classFlag ? 'teal' : 'white'}">
          Index: {{idx}},<br /> Event Type: {{evt.eventType}},<br /> ClientXPosition: {{evt.clientX}},<br /> ClientYPosition: {{evt.clientY}},<br/> TimeStamp: {{evt.timeStamp}}
        </li>
      </ul>
    </div>
  </div>
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data :string = "I am the King of Pirates!";
  Active :boolean = true;
  clickResponses = [];
  classFlag :number = 5;
  makeNewResponse(clientX,clientY){
    let date = new Date();
    return {
    'timeStamp': date,
    'clientX': clientX,
    'clientY': clientY,
    'eventType': 'Click'
   }
  }

  updateLog(clientX,clientY) :void{
    this.Active = !this.Active;
    let clickEvent = this.makeNewResponse(clientX,clientY);
    this.clickResponses.push(clickEvent);
  }
}