mrshawnspencer

## *ngIf with [ngClass] CSS Class Switching
/*
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}">

## modal dialog box simple html css js standalone
<!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/ -->

## convertCharsToSpaces Angular Custom Pipe
/*
  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'
})

## Open File Explorer from the command line
start D:\selecthealth.org\selecthealth.org.website\static

## Quotes vs Back Ticks in Angular 2019 HTML template
/*
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']
})

## http or https check in JavaScript
//  Test: https://gist.github.com
//  console.log(window.location.protocol);
//  Result: https

var wlp = window.location.protocol;

## hostname JavaScript
//  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];

## Launch New Chrome Incognito Window with Windows Command Line
[System.Diagnostics.Process]::Start("chrome.exe","--incognito http://localhost:3000")

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

## Show or Hide Div with Angular *ngIf
<!--
    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.

## IE11 and IE10 CSS Hack 2019
/*
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) {
	/*
	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}">
	<!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/ -->
	/*
	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'
	})
	/*
	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']
	})
	// Test: https://gist.github.com
	// console.log(window.location.protocol);
	// Result: https

	var wlp = window.location.protocol;
	// 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];
	[System.Diagnostics.Process]::Start("chrome.exe","--incognito http://localhost:3000")

	[System.Diagnostics.Process]::Start("chrome.exe","--inconito http://www.google.com")
	<!--
	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.
	/*
	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) {