mrshawnspencer’s gists

mrshawnspencer / *ngIf with [ngClass] CSS Class Switching

Created November 1, 2019 17:04

	/*
	There are probably more efficient ways of doing this, but this works:
	1. The li click event sets activeTab to true or false:
	(click)="activeTab = tab; false;"
	2. Based on that, we can set the class accordingly:
	[ngClass]="{'active-tab': tab === activeTab, 'inactive-tab': tab !== activeTab}"
	*/

	<ul id="tab-list" class="tab-list contain" *ngIf="!isEditing">
	<li id="tab-button" class="tab-button" (click)="activeTab = tab; false;" *ngFor="let tab of tabs" (mouseover)="tabHover=true" (mouseout)="tabHover=false" [ngClass]="{'active-tab': tab === activeTab, 'inactive-tab': tab !== activeTab}">

mrshawnspencer / modal dialog box simple html css js standalone

Last active October 16, 2021 22:07

mrshawnspencer / convertCharsToSpaces Angular Custom Pipe

Last active October 25, 2019 19:55

	/*
	Simple Custom Pipe Example
	Angular 7/8
	(must be imported in the module where it is needed, after imports[], in the declarations[] section)
	convert-chars-to-spaces.pipe.ts
	*/

	@Pipe({
	name: 'convertCharsToSpaces'
	})

mrshawnspencer / Open File Explorer from the command line

Created October 22, 2019 17:37

start D:\selecthealth.org\selecthealth.org.website\static

mrshawnspencer / Quotes vs Back Ticks in Angular 2019 HTML template

Last active October 22, 2019 14:32

	/*
	Angular @Component Directive
	If you are using an HTML file as the template in an angular component:
	*/

	@Component({
	selector: 'app-provider-search',
	templateUrl: './provider-search.component.html',
	styleUrls: ['./provider-search.component.scss']
	})

mrshawnspencer / http or https check in JavaScript

Created October 21, 2019 15:48

	// Test: https://gist.github.com
	// console.log(window.location.protocol);
	// Result: https

	var wlp = window.location.protocol;

mrshawnspencer / hostname JavaScript

Created October 21, 2019 14:58

	// Just get the hostname of the URL
	// Example: https://electmyhealthplan.org/find-a-doctor
	// Result: electmyhealthplan
	// Test this in the browser console:
	// var hostname = window.location.hostname.split('.')[0]; console.log(hostname);

	var hostname = window.location.hostname.split('.')[0];

mrshawnspencer / Launch New Chrome Incognito Window with Windows Command Line

Created October 18, 2019 20:15

	[System.Diagnostics.Process]::Start("chrome.exe","--incognito http://localhost:3000")

	[System.Diagnostics.Process]::Start("chrome.exe","--inconito http://www.google.com")

mrshawnspencer / Show or Hide Div with Angular *ngIf

Created October 18, 2019 20:08

	<!--
	Angular/HTML/CSS

	Sometimes, when you work with a corporate CMS,you cannot predict what people do.
	I encountered sections on a corporate website with lots of empty DIVs. That
	created lots of white space and negatively affected the layout.

	You can hide empty DIVs with (S)CSS: div:empty { display: none !important; }

	Or you can add an ng-container with *ngIf, shown below.

mrshawnspencer / IE11 and IE10 CSS Hack 2019

Created October 17, 2019 16:02

	/*
	As published elsewhere on the web:
	IE10 and IE11
	==================
	The first snippet might cause problems if you are coding
	in Visual Studio Code, because some formatters will insert
	a line break after the comma:
	*/

	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Handy Dandy HTML5 Modal</title>
	<meta name="description" content="JavaScript Interview Assignment">
	<meta name="author" content="Mr. Shawn Spencer">
	<!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->
	<!-- Plastic Buttons Style: https://1stwebdesigner.com/free-code-snippets-css-buttons/ -->