Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Preston Lamb pjlamb12

🏠
Working from home
View GitHub Profile
@pjlamb12
pjlamb12 / button-styles.util.ts
Created Feb 2, 2021
Custom Tailwind Button Directive
View button-styles.util.ts
export const DEFAULT_BUTTON_STYLES =
'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
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
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';
@NgModule({
declarations: [AppComponent],
imports: [
@pjlamb12
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
@NgModule({
imports: [
IconManagerModule.forRoot({ configUrl: './assets/icons/heroicons.json' }),
]
})
export class AppModule {}
View _output.yaml
pdf_book:
pandoc_args: --listings
includes:
in_header: preamble.tex
@pjlamb12
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;
@Injectable({
providedIn: 'root',
@pjlamb12
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
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) {
View article.md

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:

@Component({
	selector: 'alerts-display',
	template: '<ng-template ngFor let-alert [ngForOf]="alerts$ | async" [ngForTemplate]="alertTemplate"></ng-template>',
	styleUrls: ['./alerts-display.component.scss'],
})
@pjlamb12
pjlamb12 / buildCE.sh
Created Mar 5, 2019
Angular Elements Build script
View buildCE.sh
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