Skip to content

Instantly share code, notes, and snippets.

// ACTUAL FILE: ngsw-config.json
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
@riapacheco
riapacheco / filter-all_pipe.ts
Created July 20, 2022 18:12
Angular pipe to filter all values in an array of objects [no key/field name required]
export class FilterAllPipe implements PipeTransform {
transform(value: any, searchText: any): any {
if (!searchText) { return value; }
return value.filter((data: any) => this.matchValue(data, searchText));
}
matchValue(data: any, value: any) {
return Object.keys(data).map((key) => {
return new RegExp(value, 'gi').test(data[key]);
@riapacheco
riapacheco / enable-tabing-method.html
Created July 20, 2022 18:37
Keydown Method that Enables Tabbing in Textarea Elements
<textarea
(keydown)="enableTabbing($event)">
</textarea>
@riapacheco
riapacheco / custom-legend-charts.html
Created July 20, 2022 18:38
Custom Legend for Ng2-Charts
<div style="display: block; width: 80%; margin: auto; padding: 3rem;">
<canvas
[chartType]="'line'"
[legend]="false"
[datasets]="chartData"
[options]="chartOptions"
[labels]="chartLabels"
baseChart>
</canvas>
</div>
@riapacheco
riapacheco / firestore-date-pipe.ts
Created July 20, 2022 18:39
Firestore Date Pipe
import {formatDate} from '@angular/common';
import {Inject, LOCALE_ID, Pipe, PipeTransform} from '@angular/core';
import firebase from 'firebase/app';
import Timestamp = firebase.firestore.Timestamp;
/**
* Can change style of date rendered to 'medium', 'shortDate', etc.
* Change on line 26
*
* Example
@riapacheco
riapacheco / mixin-functions.scss
Last active September 1, 2022 21:31
Utility functions in SCSS
// Center an absolute item [assumption that container is `position: relative`]
// Provide direction, length of item to be centered [any unit type], and length of container along side of direction
// Usage: @include center-absolute('top', 90px, 100%);
@mixin center-absolute(
$direction,
$itemSize,
$containerSize) {
position: absolute;
@if (
@riapacheco
riapacheco / component.scss
Last active November 19, 2022 04:44
Centering a DIV with `absolute`
@import '../mixins.scss';
// Variables are easy to use and enable calc() to work with different unit types (px, vh, in, etc)
$container-width: 800px;
$div-width: 20px;
.container {
width: $container-width;
position: relative;