Skip to content

Instantly share code, notes, and snippets.

@latimeks
Created July 24, 2018 17:03
Show Gist options
  • Save latimeks/0554e9d0b286b53226ccdd0cd1a8cc83 to your computer and use it in GitHub Desktop.
Save latimeks/0554e9d0b286b53226ccdd0cd1a8cc83 to your computer and use it in GitHub Desktop.
App3 - Directives
.special-event {
color: white;
padding: 3px;
margin: 5px;
}
<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>
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment