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

Angular Service Example

The following code demonstrates how a service can be created in AngularJS. index.html <html> <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js”></script> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js”></script> <script src=”app.js”></script> <script src=”anotherModule.js”></script> </head> <body> <div ng-app=”mainModule” ng-controller=”mainController as alias”> <b>Invoice:</b> <p>The input is: {{alias.quantity}}</p> <div> Quantity: <input type=”number” min=”0″ ng-model=”alias.quantity”required> </div> <div><p>Add 4 and double it!</p></div> <div> <b>Result:</b> <span>{{alias.total(alias.quantity)}}</span> <button…Read More