Angular 2 - Directives

Directives, Conditional Flow, Simple Logic

1. Add A button which says 'Display Details'
2. Add a paragraph with any content of your choice (e.g. 'Secret Password = tuna')
3. Toggle the displaying of that paragraph with the button created in the first step
4. Log all button clicks in an array and output that array below the secret paragraph (maybe log a timestamp or simply an incrementing number)
5. Starting at the 5th log item, give all future log items a blue background (via ngStyle) and white color (ngClass)

How The Reqs Above Were Implemented In The Code Below

  • The button was easy, just add it in .html on line 11. For the toggle functionality on line 9 in .ts I added a variable called showSecret and set it to false. Then back in .html I added an event binding to serve as a listener that simply sets the variable showSecret to the opposite of it's current value. (Quick and dirty way to toggle a variable).
  • On line 13 I added *ngIf="showSecret" to implement the actual toggle functionality on the button.
  • Logging the button clicks is done by changing the button code on line 12 to call a method onToggleDetails() which is created in .ts on line 12. this.log.push(this.log.length + 1) is used to append the current log value to the end of the log, numbering the current log entry with the incrementing code.
  • In .html on line 15 *ngFor is for looping over the log list created in the above step. Line 16 uses property binding with ngStyle and the conditional code says, "set the backgroundColor property to blue if logItem is greater than 5, otherwise leave it transparent". A similar condition logic flow is used on line 17 for ngClass displaying the CSS class white-text if the logItem value is greater than or equal to 5. Line 18 simply outputs the logItem to the screen, dynamically formatted according to the logic required in the requirement above.

app.component.ts

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

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

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

app.component.html

<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> <hr> <!--<button class="btn btn-primary" (click)="showSecret = !showSecret">Display Details</button>--> <button class="btn btn-primary" (click)="onToggleDetails()">Display Details</button> <p *ngIf="showSecret">Secret Password = tuna</p> <div *ngFor="let logItem of log" [ngStyle]="{backgroundColor: logItem >= 5 ? 'blue' : 'transparent'}" [ngClass]="{'white-text': logItem >= 5}" >{{ logItem }}</div> </div> </div>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/angular2/angular-2-directives/