Display Typescript variable in HTML DOM

To get a typescript variable to display in the DOM, first we need the index.html which will include the app.js file with the script tag.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title<>/title>
  <script src="./app.js">
  </script>
</head>
<body>
</body>
</html>

app.ts uses window.onload = function {…} which loads after the DOM has been created,

window.onload = function() {

let user: string = "Jane";
let sentence: string = `${user} is super
and totally cool!`;

document.body.innerHTML = "<p><strong>" + sentence + "</strong></p>";
}

Unfortunately the last three words “and totally cool!” are not appearing on a new line as would be expected with the `…` notation.

Of course we compile the app.ts file to app.js using,

$ tsc

or to keep watching the file use,

$ tsc -w

See previous post for setup.

TypeScript Notes

See tsconfig.json configuration and compiler options

Install TypeScript if it is not done already,

$ npm install -g typescript

Create a new directory

$ mkdir typescript

Change directory into new typescript directory,

$ cd typescript
$ npm init

Hit enter to apply default to all options. This will create a package.json file in the directory.

$ tsc --init

Creates the tsconfig.json file for configuring typescript compile settings.

$ npm install

Creates the node_modules directory.

In tsconfig.json setting,

"sourceMap": true,

will allow you see a .ts file in the developer tools of the browser and even to debug the .ts file itself and see the immediate result in the browser without needing to compile again.

Install lite-server locally in this directory,

$ npm install lite-server

To install lite-server and add the package to package.json with the –save option flag,

$ npm install lite-server --save

The script,

  "start": "lite-server"

should be added to package.json to run lite-server with

$ npm start

In tsconfig.json

"noImplicitAny: false"

is by default set to false and so any variable with no type declared will be of type ‘any’. However by changing this to ‘true’ then all variables must be declared and will not default to ‘any’.

Create index.html and add the app.js script,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./app.js">
  </script>
</head>
<body>
  <h1>Typescrip blah</h1>
</body>
</html>

See tsconfig.json configuration and compiler options

ES6 (ECMA SCRIPT 6) features supported by Typescript
Compatibility chart

Compile in watchmode to constantly check for changes to the app.js file.
Run the following in one terminal

$ tsc -w

and the in another terminal start the lite-server,

$ npm start

‘let’ and ‘const’
With let we can change the variable’s value

let variable = "Tests"
console.log(variable); // output 'Tests'

variable = "thingsss"
console.log(variable); // output 'thingsss'

const num = 100;
console.log("num  = " + num);
// num = 99;// will give error as const has set this variable to constant

block scope

let variable = "thingsss";
function reset(){
  let variable = null;// this variable is independent of the variable outside this function or block scope
  console.log(variable); // outputs null
}

reset();
console.log(variable); // outputs thingss

Arrow functions
are an ES6 feature. Basic syntax,

const multiplyingNumbers1 = (number1 : number, number2: number) => number1 * number2 // automatically return a single line functions, no need for curly brackets {...}
console.log(multiplyingNumbers1(2,9));

Otherwise write it like this,

const multiplyingNumbers = (number1 : number, number2: number) => {
  return number1 * number2
}
console.log(multiplyingNumbers(2,7));

A single parameter ‘args’ can be added like this without parenthesis

const fun = args => console.log(args);
fun("Ya");

passing no parameters

const greet = () => { 
  console.log("Hello!")
}

That could be written like this

const greet1 = () => console.log("heya!");
greet();

Default parameters
Set default parameter to 10, also a second parameter ‘end’ could depend on the first parameter. Also ‘void’ means function doesn’t return anything.

const countDown = (start:number = 10, end: number = start - 5): void => { 
  while (start >0){
    start--;
  }
  console.log("Done!", start);
}
countDown();

Spread operator
To get the max of the array we use the spread operator which is three dots …
The Math.max() operator cannot take an array, but it’s elements can be spread out into a list using the spread operator.

const numbers = [1,3,25,-5];
console.log(Math.max(33, 99, 10, -3));
console.log(Math.max(...numbers));

Rest operator or parameter
Turn any number of args into an array, with three dots before the parameter,

function makeArray(...args: number[]){
  return args;
}
console.log(makeArray(1,2,3));

Other parameters can be included in the function like this, only the numbers in the array are considered, the string is ignored,

function makeArray1(name: string, ...args: number[]){//turn any number of args into an array
  return args;
}
console.log(makeArray1("Max",1,2,3));

Destructuring arrays
Giving a variable name to each element in the array.

const myHobbies = ["Cooking", "Sports"];
const [hobby1, hobby2] = myHobbies;//array to be destructured
console.log(hobby1, hobby2);

Destructuring objects

const userData = {userName: "Max", age: 27};
const {userName, age} = userData;
console.log(userName, age);

Or you could assign names other than the object’s property names, these are aliases,

const {userName : myName, age: myAge} = userData;
console.log(myName, myAge);

template literals
Similar to extended strings. Use back-ticks `…` for multi-line strings, also use template variables such as ${userName}

const userName = "Max";
const greeting = `Hello,
I am ${userName}
I'm so cool!`;
console.log(greeting);

Push an array to an existing array
Use the spread operator …

const numbers = [-3, 33, 38, 5];
console.log(Math.min(...numbers));

const newArray = [66, 2];
newArray.push(...numbers);
console.log(newArray);
// output [6, 2, -3, 33, 38, 5]

Transpile TypeScript to javaScript

TypeScript is a super set of JavaScript, brought to us by Microsoft.

Browsers can’t run TypeScript yet it is needed for Angular2+. So it is necessary to convert or ‘transpile’ your TypeScript code to JavaScript to that it will run in a browser, if you need it to run in a browser that is.

Start by intsalling typescript

$ npm install -g typescript

make a typescript file, e.g. filename.ts

let num: number = 4;

transpile with,

$ tsc filename.ts

and you’ll get a new file filename.js

var number = 4;

and that’s it!

What’s great about typescript is it gives you the errors on transpile.

Try this in your file,

console.log(blah);

without defining blah so that you get an error.

Note that the file will still run despite error showing.

Kali-Linux on microSD for Rasperry Pi 3

https://docs.kali.org/kali-on-arm/install-kali-linux-arm-raspberry-pi

For Mac-book-pro and raspberry-Pi 3

Download Kali-Linux from https://www.offensive-security.com/kali-linux-arm-images/ under the RasperryPi Foundation section. It should appear in your downloads directory as kali-2017.2-rpi3-nexmon.img.xz

Unzip this with,

$ gunzip kali-2017.2-rpi3-nexmon.img.xz

This should create the image file kali-2017.2-rpi3-nexmon.img

Insert microSD card, use an adaptor if you don’t have a slot for it. I used a 16GB class 10 microSD card.

Check the path to the microSD with,

$ diskutil list

If your microSD card may be at something such as /dev/disk2. It is very important that you get this correct, because using it incorrectly later, could wipe your hard-drive.

Unmount this,

$ diskutil unmountDisk /dev/disk2

Put the image file on the microSD with,

$ sudo dd if=~/Downloads/kali-2017.2-rpi3-nexmon.img of=/dev/disk2 bs=2m

Insert the microSD in the R-Pi, works for me on a Pi 3, not working on a Pi-zero.

Power it up and that’s it.

Next you should change the SSH host key. See here,

https://docs.kali.org/kali-on-arm/install-kali-linux-arm-raspberry-pi

Angular2+ jsPDF and html2canvas File Generation

To generate pdf files in Angular2+ (specifically angular4), first install jspdf

$ npm install jspdf

Then install typings for jspdf,

$ npm install --save @types/jspdf

Import jspdf into app.component.ts

import * as jsPDF from 'jspdf';

Add a download button to app.component.html which calls the dowload() function,

<button (click)="download()" class="btn btn-warning btn-sm">Download results</button>

Using jspdf in app.component.ts

  download(){
    var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.addPage();
        doc.text(20, 20, 'Hi again this I page two');
        doc.save('Test.pdf');
  }

html2canvas enables you to grab the html page or just an element in it and place it in a pdf. First install html2canvas and its typings,

$ npm install --save html2canvas
$ npm install --save @types/html2canvas

Then import this at the top of app.component.ts,

import * as html2canvas from 'html2canvas';

and to call an element on the html page with id of ‘results’,

  download(){
    html2canvas(document.getElementById('results')).then(function(canvas) {
    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    doc.addImage(img,'JPEG',5,20);
    doc.save('testCanvas.pdf');
    });
  }

You could call the whole html page with,

html2canvas(document.body).then(function(canvas) {...

It is possible to instead wrap jsPDF around html2canvas like this,

  generatePDF(){
      var doc = new jsPDF();
      doc.text(50,90,this.problems.length.toString());
      doc.text(50,100,'page 1')
      doc.addPage();
      doc.text(50,100,'page 2')
      html2canvas(document.getElementById('graph')).then(function(canvas) {
      var img = canvas.toDataURL("image/png");
      doc.addImage(img, 'JPEG', 100, 100);
      doc.save('test.pdf');
    });
    // doc.save('test.pdf');//fails to add image to pdf
  }

But then the image is always the last things which runs before the pdf is generated with the line,

doc.save('test.pdf');

So nothing can be added after that. Passing this to the outside of html2canvas does not work either, as in the commented out line above.

Therefore wrapping html2canvas around jsPDF would seem the best way to proceed. However, this will not allow you use an external variable such as in this case this.problems.length.

So to use an external variable such as this.problems.length inside htm2canvas use,

var self = this;

and then reference with ‘self’ inside of ‘this, as in this example below,

generatePDF(){
      console.log("outside: this.problem.length = " + this.problems.length);

    html2canvas(document.getElementById('graph')).then(function(canvas) {
      var self = this;
      console.log("inside: self.problem.length = " + self.problems.length);

      var doc = new jsPDF();
      doc.text(50,100,'page 1');
      var img = canvas.toDataURL("image/png");
      doc.addImage(img, 'JPEG', 100, 100);
      doc.addPage();
      doc.text(50,100,'page 2')
      doc.save('test.pdf');
    });
    // doc.save('test.pdf');//fails to add image to pdf
  }

Run D3.js in Node.js

Running d3.js in node can be useful. Here is the basic setup.

First globally install the d3.js package in node,

$ sudo npm install -g d3

Then use require(“d3”) in your javascript file src.js

var d3 = require("d3");
console.log(d3.range(24));

To run the file,

$ node src.js

D3.js v4 prepare an object for a Pie Chart

Prepare an array object for a pie chart using d3.pie()(data).value().

   var = data_count = [{
        key: "f",
        value: 2
      },
      {
        key: "m",
        value: 1
      }
    ]

    var arcs = d3.pie()
      .value(function(d) {
        return d.value;
      })
      (data_count);

    arcs.forEach(function(element) {
      console.log(element);
    });

This will generate the array object,

arcs = [
{index: 0, value: 2, startAngle: 0, endAngle: 4.1887902047863905, padAngle: 0},
{index: 1, value: 1, startAngle: 4.1887902047863905, endAngle: 6.283185307179586, padAngle: 0}
]

D3.js v4 prepare array for a Pie Chart

Use d3.pie()(data) to prepare an array of numbers for a pie chart.

var data = [1, 1, 2, 3, 5, 8, 13, 21];
    var arcs = d3.pie()(data);

    arcs.forEach(function(element) {
      console.log(element);
    });

This will generate a new array object,

arcs = [
{data: 1, index: 6, value: 1, startAngle: 6.050474740247008, endAngle: 6.166830023713296, padAngle: 0},
{data: 1, index: 7, value: 1, startAngle: 6.166830023713296, endAngle: 6.2831853071795845, padAngle: 0},
{data: 2, index: 5, value: 2, startAngle: 5.817764173314431, endAngle: 6.050474740247008, padAngle: 0},
{data: 3, index: 4, value: 3, startAngle: 5.468698322915565, endAngle: 5.817764173314431, padAngle: 0},
{data: 5, index: 3, value: 5, startAngle: 4.886921905584122, endAngle: 5.468698322915565, padAngle: 0},
{data: 8, index: 2, value: 8, startAngle: 3.9560796378538132, endAngle: 4.886921905584122, padAngle: 0},
{data: 13, index: 1, value: 13, startAngle: 2.443460952792061, endAngle: 3.9560796378538132, padAngle: 0},
{data: 21, index: 0, value: 21, startAngle: 0, endAngle: 2.443460952792061, padAngle: 0}
]

D3.js v4 count values in an object

We want to count the number of each value that occurs in an object. In this array of object we want to know how many ‘f’ value and how many ‘m’ values there are on the key ‘gender’.
Great link and more indepth examples on Phoebe Bright‘s page.
Also a running example on github.

var data = [{
        name: "Sarah",
        gender: "f",
        value: 1
      },
      {
        name: "Bob",
        gender: "m",
        value: 2
      },
      {
        name: "Amy",
        gender: "f",
        value: 3
      },
    ]

var data_count = d3.nest()
      .key(function(d) {
        return d.gender;
      })
      // .key(function(d) { return d.priority; })
      .rollup(function(leaves) {
        return leaves.length;
      })
      .entries(data);

    data_count.forEach(function(element) {
      console.log(element);
    });
data_count=[
{key: "f", value: 2},
{key: "m", value: 1}
]

D3.js v4 sum values in an object

Given the following array of objects, we may want to sum values for a particular category. The category is gender in this case. So we want to be able to find the total value for all the ‘f’ and for the ‘m’ categories.
Great link and more indepth examples on Phoebe Bright‘s page.
Also a running example on github.

var data = [{
        name: "Sarah",
        gender: "f",
        value: 1
      },
      {
        name: "Bob",
        gender: "m",
        value: 2
      },
      {
        name: "Amy",
        gender: "f",
        value: 3
      },
    ]

    var genderVals = d3.nest().key(function(d) {
        return d.gender;
      })
      .rollup(function(leaves) {
        return d3.sum(leaves, function(d) {
          return d.value;
        });
      }).entries(data)
      .map(function(d) {
        return {
          Gender: d.key,
          totalValue: d.value
        };
      });

    genderVals.forEach(function(element) {
      console.log(element);
    });

This will output the new array of objects called genderVals,

genderVals = [
{Gender: "f", totalValue: 4},
{Gender: "m", totalValue: 2}
]

Angular 4: Pass data parent to child component (part 2 of 2)

The full code for part 2 here and demo on gh-pages here.

Following on from part 1, next we will pass an array of objects between components.

In child.component.ts we add another @Input like this,

@Input() data: {name: string, id: number}[] = [];

Then to app.component.ts add,

  id: number = null;
  name: string = null;
  details: {name: string, id: number}[] = [];

Then in app.component.html we will add input forms for ‘id’ and ‘name’.

<label for="box2">id:</label>
<input type="number" name="box2" class="form-control" [(ngModel)]="id" />
<label for="box3">name:</label>
<input type="string" name="box3" class="form-control" [(ngModel)]="name" />
<p><button (click)="pushto()" class="btn btn-warning btn-sm">Submit</button></p>

again we are using [(ngModel)]. We also have a submit button and when this data is submitted the pushto() function is called.

The pushto() function in app.component.ts is,

pushto(){
    this.details.push({name: this.name, id: this.id});
    this.name = null;
    this.id = null;
  }

This will push a new object to the details array. Let’s display them on the root app page in app.component.html

<div class="col-xs-4 col-md-4">
  <p *ngFor="let element of details"><strong>name: </strong>{{element.name}} <strong>id: </strong>{{element.id}}</p>
</div>

Next we want to pass the array ‘details’ to the child component. To do this we include ‘[data]=”details”‘ in the <app-child> tag like this,

<app-child [quantity]="newvalue" [data]="details"></app-child>

So now in the child component child.component.html we will use *ngFor to loop through the array ‘data’.

<p *ngFor="let element of data"><strong>name:</strong> {{element.name}} <strong>id:</strong> {{element.id}}</p>

The full code for part 2 here and demo on gh-pages here.

Angular 4: Pass data parent to child component (part 1 of 2)

The full code for part 1 & 2 here and demo on gh-pages here.

This post explains how to pass data from a parent component directly into a child component without iteration using ngFor as we did in the other post on this same issue here.

With angular-cli previously installed, create a new project,

$ ng new angulardataparenttochild

Then change directory into that newly created directory,

$ cd angulardataparenttochild

Next create a child component,

$ ng g c child

In your editor place a tag <app-child$gt;$lt;app-child/$gt; in app.component.html to put the child component inside the parent component. Also add some bootstrap to make it nice! app.component.html should look like this,

<div class="container" style="border: 3px solid #515B89; background-color: #79809E; border-radius: 15px;">
  <div class="row">
    <div class="col-xs-12">
      <h1>
        {{title}}
      </h1>
    </div>
  </div>
  <div class="row">
    <div class="col--xs-12">
      <app-child></app-child>
    </div>
  </div>
</div>

Likewise the child.component.html file is

<div class="container" style="border: 3px solid #458075; background-color: #6D948C; border-radius: 15px;">
  <div class="row">
    <div class="col-xs-12">
      <p>
        child works!
      </p>
    </div>
  </div>
</div>

Let’s check this works with

$ ng serve

Navigate in your browser to localhost:4200

First be sure to import ‘Input’ into the top of the child component’s ts file child.component.ts,

import { Component, ElementRef, NgZone, OnDestroy, OnInit, Input } from '@angular/core';

Then just inside the child component’s class, in child.component.ts, use the input decorator to setup the data structure of the data being input to this child component,

@Input() quantity: number = null;

Add an input form to the root app, app.component.html

<input type="number" class="form-control" [(ngModel)]="value" (ngModelChange)="fun()"/>

Here we are using [(ngModel)] and setting any input to “value”. (ngModelChange)=”fun()” will call a function fun() whenever there is a change in the input form.

The full app.component.html file should look like this,

<div class="container" style="border: 3px solid #515B89; background-color: #79809E; border-radius: 15px;">
  <div class="row">
    <div class="col-xs-12">
      <h1>
        {{title}}
      </h1>
      <label for="box">Value:</label>
      <input type="number" class="form-control" [(ngModel)]="value" (ngModelChange)="fun()" />
      <p>value = {{ value }}</p>
      <p>newvalue = value + 2 = {{ newvalue }}</p>
    </div>
  </div>
  <div class="row">
    <div class="col--xs-12">
      <app-child [quantity]="newvalue"></app-child>
    </div>
  </div>
</div>

In app.component.ts just inside the “export class AppComponent(” we will define value and also in this class we will create the fun() function which increase “value” by 2, just to do something with it! We also set this then equal to “newvalue” and define that as we did with “value”.

So app.component.ts should look like this,

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'root app';
  value: number = null;
  newvalue: number = null;

  constructor(){
  }

  ngOnInit(){
  }

  fun(){
    this.newvalue = this.value + 2;
  }
}

We will display the values “value” and “newvalue” in app.component.html using interpolation which is just a fancy word for the double curly brackets {{ newvalue }},

<p>value = {{ value }}</p>
<p>newvalue = value + 2 = {{ newvalue }}</p>

Also in the file we will include child component using it’s selector which is app-child, like this,

<app-child></app-child>

But this where we pass the parent component value “newvalue” to the child value “quantity”.

<app-child [quantity]="newvalue"></app-child>

But we don’t want to pass it to the child.component.html just yet. We will like to get it into the child.componet.ts file first and do soemthing with it. We will again just increase it’s value by 2. This is done using the ngOnChanges() function.

But do use this you must import ‘OnChanges’ at the tope of child.component.ts,

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

Also you need to implement it with the class like this,

export class ChildComponent implements OnInit, OnChanges {...

Increasing the this.quantity value by 2 in ngOnChanges() is done like this,

  ngOnChanges(){
      this.quantity = this.quantity + 2;
  }

The function ngOnChanges() runs anytime the quantity value changes. In other words when there is an change to “newvalue” in the parent component. This is very useful!

Next we display that value in child.component.html using the {{quantity}}.

The child.component.html file,

<div class="container" style="border: 3px solid #458075; background-color: #6D948C; border-radius: 15px;">
  <div class="row">
    <div class="col-xs-12">
      <h3>child app</h3>
      <p>
        value + 4 = newvalue + 2 = quantity = <span *ngIf="quantity">{{quantity}}</span>
      </p>
    </div>
  </div>
</div>

However I found this always displayed the ‘quantity’ value as 2, even before anything was input.

As a result I put an if(quantity){…} around this line. So child.component.ts looks like this,

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {
@Input() quantity: number = null;

  constructor() {
  }

  ngOnInit() {
  }

  ngOnChanges(){
    if(this.quantity){
      this.quantity = this.quantity + 2;
    }
  }
}

The full code for part 1 & 2 here and demo on gh-pages here.

Angular 4 & D3.js

Code is on github on d3graph repo.
View demo on gh-pages.


Having angular-cli installed (how to install angular-cli), then create a project called ‘angular-d3-example’

$ ng new angular-d3-example

Next we’ll add a component for the graph, which we’ll call ‘d3graph’,

$ ng g c d3graph

Add the selector to the app.component.html file.
We need to install the service ‘d3-ng2-service’. The github page for this is here. Install this service with npm using,

$ npm install d3-ng2-service --save

You will need to import the ‘D3Service’ from ‘d3-ng2-service’ by adding to the top of app.module.ts,

import { D3Service } from 'd3-ng2-service';

Also import ‘D3Service’ to the providers array in the same file.
Then module.ts should look like this,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { D3graphComponent } from './d3graph/d3graph.component';

import { D3Service } from 'd3-ng2-service'; // <-- import statement

@NgModule({
  declarations: [
    AppComponent,
    D3graphComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [D3Service], // <-- import provider
  bootstrap: [AppComponent]
})
export class AppModule { }

Services can be greated with angular-cli using,

$ ng g s SERVICENAME

At this stage it is a good idea to check everything is working by running,

$ ng serve

and navigate to http://localhost:4200 where is should say ‘app works!’ and below it ‘d3graph works!’

We’ll create a bar chart using,

data = [
          {name : 'A', yVal : 1},
          {name : 'B', yVal : 4},
          {name : 'C', yVal : 2},
          {name : 'D', yVal : 3}
      ];

The d3graph.componet.ts will look like this,

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

import {
  D3Service,
  D3,
  Axis,
  BrushBehavior,
  BrushSelection,
  D3BrushEvent,
  ScaleLinear,
  ScaleOrdinal,
  Selection,
  Transition
} from 'd3-ng2-service';


@Component({
  selector: 'app-d3graph',
  template: '<svg width="200" height="200"></svg>'
})
export class D3graphComponent implements OnInit {
  private d3: D3;
  private parentNativeElement: any;
  private d3Svg: Selection<SVGSVGElement, any, null, undefined>;

  constructor(element: ElementRef, private ngZone: NgZone, d3Service: D3Service) {
    this.d3 = d3Service.getD3();
    this.parentNativeElement = element.nativeElement;
  }

  ngOnInit() {
            let self = this;
            let d3 = this.d3;
            let d3ParentElement: any;
            let svg: any;
            let name: string;
            let yVal: number;
            let colors: any = [];
            let data: {name: string, yVal: number}[] = [];
            let padding: number = 25;
            let width: number = 500;
            let height: number = 150;
            let xScale: any;
            let yScale: any;
            let xColor: any;
            let xAxis: any;
            let yAxis: any;

    if (this.parentNativeElement !== null) {
      svg = d3.select(this.parentNativeElement)
          .append('svg')        // create an <svg> element
          .attr('width', width) // set its dimensions
          .attr('height', height);

      colors = ['red', 'yellow', 'green', 'blue'];

      data = [
          {name : 'A', yVal : 1},
          {name : 'B', yVal : 4},
          {name : 'C', yVal : 2},
          {name : 'D', yVal : 3}
      ];

      xScale = d3.scaleBand()
          .domain(data.map(function(d){ return d.name; }))
          .range([0, 200]);

      yScale = d3.scaleLinear()
          .domain([0,d3.max(data, function(d) {return d.yVal})])
          .range([100, 0]);

      xAxis = d3.axisBottom(xScale) // d3.js v.4
          .ticks(5)
          .scale(xScale);

      yAxis = d3.axisLeft(xScale) // d3.js v.4
          .scale(yScale)
          .ticks(7);

        svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + (padding) + "," + padding + ")")
        .call(yAxis);

	       svg.append('g')            // create a <g> element
         .attr('class', 'axis')   // specify classes
	       .attr("transform", "translate(" + padding + "," + (height - padding) + ")")
         .call(xAxis);            // let the axis do its thing

      var rects = svg.selectAll('rect')
          .data(data);
          rects.size();

      var newRects = rects.enter();

      newRects.append('rect')
          .attr('x', function(d,i) {
            return xScale(d.name );
          })
          .attr('y', function(d) {
              return yScale(d.yVal);
            })
	        .attr("transform","translate(" + (padding -5  + 25) + "," + (padding - 5) + ")")
          .attr('height', function(d) {
              return height - yScale(d.yVal) - (2*padding) + 5})
          .attr('width', 10)
          .attr('fill', function(d, i) {
            return colors[i];
          });
     }
   }
 }

Should look like this,

Code is on github on d3graph repo.
View demo on gh-pages.

Angular 4: Simple Routing

All code is on github https://github.com/shanegibney/angular-routing
A demo is available on gh-pages https://shanegibney.github.io/angular-routing/

Start a new project using angular-cli,

$ ng new angularRouting

Move into the project root directory

$ cd angularRouting

Create app-routing.module.ts

$ ng g module app-routing

Set the app-routing.module.ts to add components and routes. Also note the changes to ngModule imports and exports.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { InfoComponent } from '../info/info.component'
import { AboutComponent } from '../about/about.component'

const routes: Routes = [
{
path: 'about',
component: AboutComponent,
},
{
path: 'info',
component: InfoComponent,
},
];

@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
export class AppRoutingModule { }

Next create two components ‘about’ and ‘info’.

$ ng g c info
$ ng g c about

To app.module.ts import the AppRoutingModule and to ngModule imports add AppRoutingModule, so that app.module.ts looks like this,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing/app-routing.module';

import { AppComponent } from './app.component';
import { InfoComponent } from './info/info.component';
import { AboutComponent } from './about/about.component';

@NgModule({
declarations: [
AppComponent,
InfoComponent,
AboutComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

To app.component.html add the element. This is where the component will render. Also add link to the components,

<h1>
{{title}}
</h1>
<a routerLink="/info" routerLinkActive="active">Info</a>
<a routerLink="/about" routerLinkActive="active">About</a>
<router-outlet></router-outlet>

Add the following routes to redirect empty routes ” and wildcards ‘**’ to home,

    
{
path: '',
redirectTo: '/home',
pathMatch: 'full',
},
{
path: '**',
redirectTo: '/home',
pathMatch: 'full'
}

Note Angular checks the routes in order so empty routes and wildcards must be after all other routes with the wildcard route at the end.

All code is on github https://github.com/shanegibney/angular-routing
and a demo is available on gh-pages https://shanegibney.github.io/angular-routing/

Useful link: http://shermandigital.com/blog/configure-routing-in-an-angular-cli-project/

Angular 4: Building a Simple Service

Create the project with angular-cli

$ ng new angular-service-project

Create a service with angular-cli

The service was created with,

$ ng g s example-service

where ‘g’ is a shortcut for ‘generate’ and ‘s’ is a shortcut for ‘service’.

The actual service is at: example-service-service.ts

import { Injectable } from '@angular/core';
@Injectable()
export class ExampleServiceService {
someMethod(){
return "Heya!";
}
constructor() { }
}

Then make the changes to app.component.ts

import { Component, OnInit } from '@angular/core'; // added OnInit
import { ExampleServiceService } from './example-service.service' // added this import

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ExampleServiceService]
})
export class AppComponent {
title = 'app works!';
example: string;
constructor(private _exampleServiceService: ExampleServiceService){ // added this constructor
}
// added this ngOnInit method
ngOnInit(){
this.example = this._exampleServiceService.someMethod();
}
}

Get example into the app.component.html file,

<h1>{{ title }}</h1>
<h3>{{ example }}</h3>

To make this service available to all components, cut the line

providers: [ExampleServiceService]

from app.component.ts and put it is app.module.ts and also make it available with

import { ExampleServiceService } from './example-service.service'

app.module.ts should look like this,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ExampleServiceService } from './example-service.service'
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [ExampleServiceService],
bootstrap: [AppComponent]
})
export class AppModule { }

Angular 4: Set yarn as global package manager

It can be better to use ‘yarn’ as a package manager instead of ‘npm’. This is because ‘yarn’ will not install a dependency again if it has already been installed for another package. In this way ‘yarn’ is faster and more efficient.

To set yarn globally for Angular4.

$ ng set --global packageManager=yarn

Angular4: Pass data from parent to child component (part 5)

Set  up an ng project,

$ ng new angularcomponentpassing

Create a new component,

$ ng g c cockpit

File: cockpit.component.ts

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

@Component({
selector: 'app-cockpit',
templateUrl: './cockpit.component.html',
styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {
@Input('srvElement') element: {name: string, id: number;}
constructor() { }

ngOnInit() {
}
}

Note: ‘srvElement’ is an alias for ‘element’ and can be left out above like this,

@Input() element: {name: string, id: number;}
constructor() { }

File: cockpit.component.html

<hr>
<p>
cockpit works!
</p>
<p><strong>Name:</strong> {{ element.name }}, <strong>id:</strong> {{ element.id }}</p>

File: app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'app works!';
serverElements = [{name: 'John', id: 8}, {name: 'Matt', id: 10}];
}

File: app.component.html

<h1>
{{title}}
</h1>
<app-cockpit *ngFor="let serverElement of serverElements" [srvElement]="serverElement">hello</app-cockpit>

If the alias for ‘element’, which is ‘srvElement’ is not used then the above line should be,

<app-cockpit *ngFor="let serverElement of serverElements" [element]="serverElement">hello</app-cockpit>

Angular 4: Deploy to gh-pages (part 4)

Presuming: you have an Angular 2 or 4 project ready to deploy to gh-pages, and that you’ve created a github repo connected to your local directory and git inited it. Also you need to have installed and be using angular-cli. If not look at this post.

Angular 4 projects can be deployed on gh-pages by first installing the npm package angular-cli-ghpages,

$ sudo npm i -g angular-cli-ghpages

The previous command is run in your local master branch. There is no need to create a local gh-pages branch or in fact a remote one in your repository. First create your dist folder and set the base-href with,

$ ng build --prod --base-href https://<USERNAME>.github.io/<REPONAME>/

Do not forget the trailing forward slash at the end.

Then sent this to your remote gh-pages branch, which does not need to be previously created.

$ sudo angular-cli-ghpages --branch gh-pages

This is also run in your local master branch. Running this commands as deparately as above did not work for me, I had to create a script called ‘deploy’ which I placed at the end of the package.json “scripts” object, like this,

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"deploy": "ng build --prod --base-href https://shanegibney.github.io/basic-maths-app/ && angular-cli-ghpages --branch gh-pages"
},

Then run this script with,

$ sudo npm run deploy

Then navigate to,

https:/<USERNAME>/.github.io/<REPO-NAME>/

The following blog post from shermandigital.com may be useful.

Angular 4: Forms (part 3)

Let’s add an input for with type=”number”. This will be in the sum app’s html file, src/app/sum/sum.component.html

What’s important here in the ngModel and it’s round and square brackets. We can set the inputted value to num1 with,

[(ngModel)]="num1"

Also the onSum() method is called when the button is clicked.

We need to set num1, num2 and sum variables in src/app/sum/sum.component.ts and create the onSum() method which is called to sum the numbers when the button is clicked.

Angular 4: Bootstrap & Components (part 2)

First install Bootstrap,

$ npm install --save bootstrap

Then add bootstrap to .angular-cli.json which can be found in the root of the project. Find the ‘styles’ and add the path for bootstrap like this,

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

Then in the project root run,

$ npm install,

Create a component called ‘sum’ with,

$ ng g c sum

Next get the sum component into the root component.
Go to src/app/app.component.html and place the selector for the sum component which is,

<app-sum></app-sum>

This gets placed as follows,

Now that we’ve placed our sum component in the root component we would like to set it’s contents. This can be done in src/app/sum/sum.component.html

And so at http://localhost:4200 we should see the contents of the sum component inside the root component like this,

Angular 4: Getting started Install angular-cli (part 1)

We’ll create a simple app with Angular 4 which will sum two numbers input into a form.

First install Angular CLI (https://cli.angular.io/)

$ npm install -g @angular/cli

Create a new project called mathapp,

$ ng new mathapp

Move into this newly created directory,

$ cd mathapp

Now create a component called sum

$ ng g c sum

where g is short for generate and c is for component.

Next be sure to be in the same directory that has package.json and install all packages in there with npm. yarn is also a good package manager, consider faster than npm because it will not install package dependecies already installed in previous packages.

$ npm install

Now let us run the server with,

$ ng serve

Navigate to http://localhost:4200

and you should see the text,

So now we are well on our way! Well done!

Angular 4: Generating Components and How to Use

To create a new component in Angular 4 automatically with the Angular CLI, in the projects root directory type,

$ ng generate component my-component

Where ‘my-component’ is the name of the component. The commands ‘generate’ and ‘component’ can respectively be replaced with ‘g’ and ‘c’. The following command does the same as the above command,

$ ng g c my-component

This will create a new folder in the app directory with the following files,

The command also makes changes to the file src/app/app.module.ts on lines 7 and 12,

Also the file src/app/my-component/my-component.component.ts is created as follows,

These changes could all be implemented manually instead of using the command.

To create a new component without the src/app/my-component/my-component.component.spec.ts which is for unit unit testing,

$ ng g c my-component --spec false

my-component.component.ts contains

templateUrl: './my-component.component.html',

to use the contents of srcv/app/my-component.component.html in the root app html file src/app/app.component.html add a custom html tag with the component name as follows,

<app-my-component></app-my-component>

Angular 4: Data Binding Two-Way-Binding

Initially the button is disabled until a username is input, after which time it is possible to reset the username by clicking the button.


In app.component.ts he simply declare two variables and set ‘username’ to an empty string. The function clears the string and resets the username.

export class AppComponent {
username: string = '';
allowButton: boolean = false;
onUsernameReset(){
this.username = '';
}
}

In app.component.html we use [(ngModel)] for two-way-databinding. This uses both square and round brackets. The input is set to ‘username’ and because of the two-way-binding this is available everywhere, e.g. for string interploation on the next line using {{ username }} and for property binding [disabled]=”!username”

<div class="container">
  <div class="row">
    <div class="col-md-4">
     <label for="box">Username:</label>
     <input name="box" type="text" class="form-control" [(ngModel)]="username"/>
     <p> {{ username }} </p>
     <button class="btn btn-primary" [disabled]="!username" (click)="onUsernameReset()">Reset username</button>
    </div>
  </div>
</div>

The ‘click’ event is put in round brackets and it calls the function onUsernameReset() which can be found in app.component.ts

Angular 4: Data Binding Event Binding

When an event occurs i.e. clicking a button we want a function onButton() to be called.

In app.component.ts we have the function onButton() which simply logs a few words to the console,

export class AppComponent {
onButton(){
   console.log("You pressed it, well done!")
   }
}

In app.component.html the event, in this case ‘click’, is in round brackets,

<button class="btn btn-primary" (click)="onButton()">Button</button>

Angular 4: Basic Setup & Bootstrap

https://cli.angular.io/

Install Angular 4 using the Angular CLI tool,

$ npm install -g @angular/cli

Create a new app or project,

$ ng new my-new-app

This creates a new directory, next move in to it,

$ cd my-new-app

Run the app in development,

$ ng serve

Install bootstrap,

$ npm install --save bootstrap

Then add bootstrap to .angular-cli.json which can be found in the root of the project. Find the ‘styles’ and add the path for bootstrap like this,

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

It may be necessary here to run,

$ npm install

from the project root directory, the directory containing the node_modules directory.

You can then use bootstrap in my-new-app/src/app/app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-4">one</div>
    <div class="col-md-4">two</div>
    <div class="col-md-4">three</div>
  </div>
</div>

Addyosmani dotfiles

The dotfiles I use can be found on Addyosmani’s github.

To install simply copy this into the terminal, (first install git)

$ git clone https://github.com/addyosmani/dotfiles.git && cd dotfiles && ./sync.sh

You may need to prepend this with ‘sudo’ and you may need to reboot for it to work.