Mat icons allow a quick way of utilising many different icons without needing to ref local files.
You can find many examples on the web but here’s one of the sites you can get them from https://material.io/icons/.
Here’s one way I’m using them in practice:
DoorsUsing DevExpress toolkit
There a many premade Angular tools out there. For instance the DevExtreme tool kit which can be found here: https://js.devexpress.com/.
Here’s an example of using it for creating a table:
XML Config File Load Angular
config.json file:
This is the file we want to load information from. This needs to be globally accessible so will need to be put in a directory under assets.
{ "apiUrl":"http://localhost:9000", "readerUrl": "http://localhost:8088" }main.ts file:
This loads are new config file.
import {Config} from "./app/app.config"; Config.loadInstance('assets/config/config.json') .then(() => { platformBrowserDynamic().bootstrapModule(AppModule); });app.module.ts file:
This gets the instance and provides it.
import {Config} from "./app.config"; providers: [ {provide: Config, useFactory: () => Config.getInstance('assets/config/config.json')}, ]app.config.ts file:
This is the main config code.
import {Injectable} from "@angular/core"; @Injectable() export class Config { private static cache = {}; constructor(private data: any) { } public static loadInstance(jsonFile: string) { return new Promise((resolve, reject) => { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("application/json"); xobj.open('GET', jsonFile, true); xobj.onreadystatechange = () => { if (xobj.readyState == 4) { if (xobj.status == 200) { this.cache[jsonFile] = new Config(JSON.parse(xobj.responseText)); resolve(); } else { reject(`Could not load file '${jsonFile}': ${xobj.status}`); } } } xobj.send(null); }); } public static getInstance(jsonFile: string) { if (jsonFile in this.cache) { return this.cache[jsonFile]; } throw `Could not find config '${jsonFile}', did you load it?`; } public get(key: string) { if (this.data == null) { return null; } if (key in this.data) { return this.data[key]; } return null; } }Issues with Node and NPM?
Setup NPM:
If you change to the windows installation folder then you can update NPM. Otherwise it sometimes gets stuck for you.Cd\Program Files (x86)\nodejs npm install npmReinstall angular:
npm uninstall -g angular-cli npm cache clean npm install -g angular-cli@latestAngular Christmas Countdown
A quick play with some JavaScript and Angular.js to create a Christmas Counter for my Daughters
The HTML:
Imogen and Emily’s Christmas Counter
Time Now: {{ time | date:’dd/MM/yyyy HH:mm:ss’ }}
How Long to go: {{ myDays }} days, {{ myHours }} hours, {{ myMinutes }} mins, {{ mySeconds }} seconds.
The JavaScript Code:
(function(){ var app = angular.module('store',['angularMoment']); app.controller('StoreController', function($scope,$interval, $filter){ $scope.time = new Date(); $scope.myTime = ""; $scope.mySeconds = ""; $scope.myMinutes = ""; $scope.myHours = ""; $scope.myDays = ""; $interval(function() { var current = new Date(); var cm = new Date(2016,11,25); var period = cm.getTime() - current.getTime(); $scope.time = current; //take out milliseconds var difference_ms = period/1000; //seconds var secs = Math.floor(difference_ms % 60); difference_ms = difference_ms/60; // minutes var mins = Math.floor(difference_ms % 60); difference_ms = difference_ms/60; //hours var hours = Math.floor(difference_ms % 24); var days = Math.floor(difference_ms/24); $scope.mySeconds = secs; $scope.myMinutes = mins; $scope.myHours = hours; $scope.myDays = days; $scope.myTime = days + " days, " + hours + " hours, " + mins + " mins, " + secs + " seconds."; },1000); }); })();