css selector with attribute value

$('a[href$="ABC"]')...

= is exactly equal
!= is not equal
^= is starts with
$= is ends with
*= is contains
~= is contains word
|= is starts with prefix (i.e., |= "prefix" matches "prefix-...")

css selector with attribute's value contains

Length of Number in JavaScript

get length of number with out converting to string.

Method 1: 

var x = 1234567;

x.toString().length;

Method 2:

const num = 123456
`${num}`.length // 6

detect webview or browser

This is working and tested in all platforms

Step1: create a Utility file

export class Utility {
constructor() { }

public static get isMobile(): boolean {

if (this.isIOS || this.isAndroid) {
return true;
} else {
return false;
}
}

public static get isWebview(): boolean {
const useragent = navigator.userAgent;
const rules = ['WebView', '(iPhone|iPod|iPad)(?!.*Safari\/)', 'Android.*(wv|\.0\.0\.0)'];
const regex = new RegExp(`(${rules.join('|')})`, 'ig');
return Boolean(useragent.match(regex));
}

public static get isWindowsPhone(): boolean {
const userAgent = navigator.userAgent || navigator.vendor || window['opera'];
// Windows Phone must come first because its UA also contains "Android"
if (/windows phone/i.test(userAgent)) {
return true;
} else {
return false;
}
}

public static get isAndroid(): boolean {
const userAgent = navigator.userAgent || navigator.vendor || window['opera'];
return /android/i.test(userAgent);
}

public static get isIOS(): boolean {
const userAgent = navigator.userAgent || navigator.vendor || window['opera'];
if (/iPad|iPhone|iPod/.test(userAgent) && !window['MSStream']) {
return true;
} else {
return false;
}
}
}

Step2: import in ur file .ts
import { Utility } from '../../classes/util';

Usage :
if (Utility.isWebview && Utility.isAndroid) {

} else if (Utility.isWebview && Utility.isIOS) {

}

table with fixed td

This combined solution worked for me, I wanted equal width columns

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

Angular directive that automatically adjusts textarea height to fit content.

Angular directive that automatically adjusts textarea height to fit content.

HTML:
<textarea MyAppAutoHeight 
class="my-textarea">Hello, this is an example of Autosize in Angular.</textarea>

TS - Directive:
import { Directive, HostListener, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[MyAppAutoHeight]' // Attribute selector
})
export class AutoHeightDirective implements OnInit {
  // @Input('autoresize') maxHeight: string;
  @Input() maxHeight: string;

  @HostListener('input', ['$event.target'])
  onInput(textArea: HTMLTextAreaElement): void {
    this.adjust();
  }

  constructor(public element: ElementRef) {
  }

  ngOnInit(): void {
    this.adjust();
  }

  adjust(): void {
    const ta = this.element.nativeElement;
    let newHeight;

    if (ta) {
      ta.style.overflow = 'hidden';
      ta.style.height = 'auto';
      if (this.maxHeight) {
        newHeight = Math.min(ta.scrollHeight, +this.maxHeight);
      } else {
        newHeight = ta.scrollHeight;
      }
      if (newHeight === 0) {
        ta.style.height = '50px';
      } else {
        ta.style.height = newHeight + 'px';
      }
    }
  }
}