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…Read More

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…Read More

Angular 4: Simple Routing

All code is on github A demo is available on gh-pages 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…Read More

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 {…Read More

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() { } }…Read More

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, $…Read More