Skip to content

Instantly share code, notes, and snippets.

Working from home

Preston Lamb pjlamb12

Working from home
View GitHub Profile
pjlamb12 / button-styles.util.ts
Created Feb 2, 2021
Custom Tailwind Button Directive
View button-styles.util.ts
'px-5 py-3 text-white text-sm text-center uppercase font-semibold tracking-wide rounded-lg hover:shadow-md focus:outline-none focus:shadow-outline transition duration-300';
export const BUTTON_COLOR_STYLES = {
orange: 'bg-orange-500 hover:bg-orange-600 active:bg-orange-600',
green: 'bg-green-500 hover:bg-green-600 active:bg-green-600',
red: 'bg-red-500 hover:bg-red-600 active:bg-red-600',
blue: 'bg-blue-500 hover:bg-blue-600 active:bg-blue-600',
pjlamb12 / tailwind-theme.service.spec.ts
Last active Jan 21, 2021
Tailwind Theme Service and test
View tailwind-theme.service.spec.ts
import { waitForAsync } from '@angular/core/testing';
import { TailwindThemeService } from './tailwind-theme.service';
import { of, throwError } from 'rxjs';
import { TailwindThemeConfig } from '../tailwind-theme-config.class';
import * as mockTailwindUtilFunctions from '@workspace/shared/util';
describe('Shared Tailwind Theme Service', () => {
let tailwindThemeService: TailwindThemeService;
let mockConfig: TailwindThemeConfig = {
pjlamb12 / app.module.ts
Last active Jan 21, 2021
Tailwind Theme Loader Service
View app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TailwindThemeModule } from './tailwind-theme';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
declarations: [AppComponent],
imports: [
pjlamb12 / app.module.ts
Last active Dec 7, 2020
SVG Icon Manager Module for Angular using the angular-svg-icon library
View app.module.ts
imports: [
IconManagerModule.forRoot({ configUrl: './assets/icons/heroicons.json' }),
export class AppModule {}
View _output.yaml
pandoc_args: --listings
in_header: preamble.tex
pjlamb12 / google-analytics.service.ts
Created Aug 21, 2020
Example Google Analytics service for Angular apps
View google-analytics.service.ts
import { Injectable, Renderer2, Inject, RendererFactory2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { RuntimeConfigLoaderService } from 'runtime-config-loader';
import { Router, RouterEvent, NavigationEnd } from '@angular/router';
import { filter, tap } from 'rxjs/operators';
declare let gtag: Function;
providedIn: 'root',
pjlamb12 / book-list.js
Created Aug 29, 2019
Book/Rating List for Blake
View book-list.js
const bookList = [['Book 1', 'some Author'], ['Book 2', 'some Author'], ['Book 3', 'some Author']];
const ratingList = [[0, 3, 5], [3, 0, 5]];
const nameList = ['Preston', 'Blake'];
function getRatings() {
let personIndex = 0;
const returnObj = {};
while (personIndex < nameList.length) {
pjlamb12 / compodoc.js
Last active Sep 14, 2020
Generate Compodoc Documentation for each App and Library in an Nx workspace from a script
View compodoc.js
const angularJson = require('./angular.json');
const exec = require('child_process').exec;
const fs = require('fs');
const mainProjects = Object.keys(angularJson.projects).filter(proj => !proj.includes('e2e'));
const tsConfigPaths = parseTsconfigPaths();
function parseTsconfigPaths() {
const pathsArray = [];
for (const projectName of mainProjects) {

The next Angular item we’ll test is a component. This is going to be very similar to the directive we just tested. But, even though it’ll look almost the exact same, I think it’ll be worth going through the exercise of testing the component.

This component’s purpose is to display a list of alerts that we want to show to our users. There is a related service that adds and removes the alerts and passes them along using a Subject. It is slightly complicated because we’re going to use a TemplateRef to pass in the template that the ngFor loop should use for the alerts. That way the implementing application can determine what the alerts should look like. Here’s the component:

	selector: 'alerts-display',
	template: '<ng-template ngFor let-alert [ngForOf]="alerts$ | async" [ngForTemplate]="alertTemplate"></ng-template>',
	styleUrls: ['./alerts-display.component.scss'],
pjlamb12 /
Created Mar 5, 2019
Angular Elements Build script
ng build --prod --output-hashing=none && cat dist/ng-elements/runtime.js dist/ng-elements/polyfills.js dist/ng-elements/scripts.js dist/ng-elements/main.js > ../demo/ngelements.js