Skip to content

Instantly share code, notes, and snippets.

@marcorinck
marcorinck / blueprint
Created Aug 25, 2013
AngularJS directive blueprint
View blueprint
var myModule = angular.module(...);
myModule.directive('directiveName', function (injectables) {
return {
restrict: 'A',
template: '<div></div>',
templateUrl: 'directive.html',
replace: false,
priority: 0,
transclude: false,
scope: false,
@marcorinck
marcorinck / dropshadow.html
Created Dec 6, 2016
svg wave with dropshadow
View dropshadow.html
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<defs xmlns="http://www.w3.org/2000/svg">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="2" result="offsetblur" />
<feComponentTransfer xmlns="http://www.w3.org/2000/svg">
<feFuncA type="linear" slope="0.4" />
</feComponentTransfer>
<feMerge>
<feMergeNode/>
@marcorinck
marcorinck / animated-item.component.html
Last active Feb 13, 2018
An example when you need dynamic properties inside of an angular animation and need to implement the animation in ts code and not in the animation DSL
View animated-item.component.html
<card (click)="clicked()">
<card-content>
<card-title [ngStyle]="{'font-size': fontsize}">{{itemDetails.name}}</ion-card-title>
<icon [svgIcon]="itemDetails.icon" [style.height.px]="iconWidthHeight"
[style.width.px]="iconWidthHeight" ></icon>
</card-content>
</card>
@marcorinck
marcorinck / slide-down.transition.ts
Last active Jan 21, 2019
custom ionic page transitions: "slide" and "slide-down"
View slide-down.transition.ts
import {Animation} from "ionic-angular/animations/animation";
import {isPresent} from "ionic-angular/util/util";
import {PageTransition} from "ionic-angular/transitions/page-transition";
const DURATION = 500;
const TRANSFORM = "transform";
const MOVED_DOWN = "translateY(100%)";
const NOT_MOVED = "translateY(0)";
const ZINDEX = "z-index";
const OPACITY = "opacity";
@marcorinck
marcorinck / example.ts
Last active May 2, 2020
semi-automatic mock generation in TypeScript (uses Jest as testing framework)
View example.ts
import {clearMocks, Mock, mockClass, initMocks} from "mockclass";
import {ErrorService} from "../components/http/error.service";
describe('MyService', () => {
//use as a decorator in an empty holder class
class Mocks extends MockHolder {
@Mock(ErrorService)
errorService: ErrorService;
}
View highlight.directive.ts
import {Directive, HostBinding, Input, OnChanges, SecurityContext, SimpleChanges} from "@angular/core";
import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
@Directive({
selector: "[appHighlight]",
})
export class HighlightDirective implements OnChanges {
@Input()
searchTerm: string;