Fabio Biondi fabiobiondi

Google Developer Expert in Web Technologies & Angular - Microsoft MVP - React Instructor

fabiobiondi / AAA

Last active November 24, 2022 00:56

• [title](url)

fabiobiondi / ngrx-cdk-drag-utils.ts

Last active December 11, 2020 02:57

Angular CDK drag-utils: rewritten to work with NGRX & Immutability

	// Angular CDK Drag Utils source: https://github.com/angular/components/blob/master/src/cdk/drag-drop/drag-utils.ts

	/**
	* Moves an item one index in an array to another.
	* @param arraySource Array in which to move the item.
	* @param fromIndex Starting index of the item.
	* @param toIndex Index to which the item should be moved.
	*/
	export function moveItemInArray<T = any>(arraySource: T[], fromIndex: number, toIndex: number): T[] {
	const array = JSON.parse(JSON.stringify(arraySource));

fabiobiondi / app.component.ts

Created June 2, 2019 20:20

Angular 8: Custom Form Control (stars) with Control Value Accessor

	import { Component, OnInit } from '@angular/core';
	import { FormBuilder, FormGroup, Validators } from '@angular/forms';

	@Component({
	selector: 'app-demo',
	template: `
	<form [formGroup]="form">
	<input type="text" formControlName="yourname">
	<app-stars formControlName="stars"></app-stars>
	</form>

fabiobiondi / 1. highcharts.component.ts

Last active May 17, 2018 16:00

Simple HighChart component in Angular 5

	import { AfterViewInit, Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
	import { HighChartService } from './highchart.service';

	@Component({
	selector: 'fb-highchart',
	template: '<div *ngIf="config"></div>',
	providers: [HighChartService]
	})
	export class HighChartComponent implements OnChanges, AfterViewInit {
	@Input() config: any;

fabiobiondi / gist:1938e555a36179f858018a1878b459b0

Created July 21, 2017 22:54

ES6 - Class - Preserving context with arrow syntax

	class MyClass {
	text = 'Mario';
	constructor() {
	setTimeout(() => console.log(this.text), 1000);
	}
	}

	var a = new MyClass();

fabiobiondi / hello-panel.component.js

Last active September 19, 2016 14:35

Angular 1.5 Component Test

	'use strict';

	angular.module('myHelloModule', [])
	.component('helloPanel', {
	bindings: {
	title: '@',
	body: '<'
	},
	templateUrl: 'app/hello-panel.tpl.html',
	controller: function() {

fabiobiondi / App.js

Last active April 14, 2019 17:21

EaselJS and HTML5 Canvas - ES6 Custom Display Objects (based on ES5 version: http://www.createjs.com/tutorials/Inheritance/)

	import CircleButton from './CircleButton';

	// Init stage
	const stage = new createjs.Stage("demo");

	// Button black
	const btn = new CircleButton('Hi');
	btn.x = 50; btn.y = 50;
	stage.addChild(btn);

fabiobiondi / MyButton.js

Last active January 3, 2016 16:23

EaselJS Custom Display Object in ES6 - v.0.0.2 - DOESN'T WORK (to delete in feb 2016)

	class MyButton extends createjs.Container{

	constructor(color) {
	super();
	this.radius = 40;
	this.color = color \|\| 'grey';
	}

	// NOTE: draw is never invoked! :(
	draw() {

fabiobiondi / App.js

Last active January 2, 2016 22:16

EaselJS Custom Display Object in ES6 - v.0.0.1

	import MyButton from './MyButton.js';
	const stage = new createjs.Stage("demo");

	const btn = new MyButton('red');
	stage.addChild(btn);
	btn.x = 100;
	btn.y = 100;
	stage.update();

fabiobiondi / index.html

Last active August 29, 2015 14:07

D3 SVG displayy

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>

	<script type="text/javascript">