Tomas Trajan tomastrajan

## some.component.ts
@Component({ /* ... */ })
export class SomeComponent {

  // streamifies input
  @Input$() prop: Observable<string>;

  // lifecycle notifier as an Observable stream
  @OnDestroy$() destroy$: Obseravble<void>;

  // lifecycle hook as decorator instead of implements interface

## element.ts
/*

This is then built as Angualr element
with

ngDoBootstrap() {
    const ElementExample = createCustomElement(ElementExampleComponent, { injector: this.injector });
    customElements.define('element-example', ElementExample);
}

## change-mac.sh
function changeMac() {
  local mac=$(openssl rand -hex 6 | sed 's/\(..\)/\1:/g; s/.$//')
  sudo ifconfig en0 ether $mac
  sudo ifconfig en0 down
  sudo ifconfig en0 up
  echo "Your new physical address is $mac"
}

## some-lib.js
import { Injectable, Component, NgModule, defineInjectable } from '@angular/core';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var SomeLibService = /** @class */ (function () {
    function SomeLibService() {
    }
    SomeLibService.decorators = [

## app.component.ts
import { OverlayContainer } from '@angular/cdk/overlay';

export class AppComponent implements OnInit {

  // use this to set correct theme class on app holder
  // eg: <div [class]="themeClass">...</div>
  themeClass: string;

  constructor(
    private overlayContainer: OverlayContainer

## big-input-component.scss-theme.scss
@import '~@angular/material/theming';

// mixin name will be used in main style.scss
@mixin big-input-component-theme($theme) {

  // retrieve variables from theme
  // (all possible variables, use only what you really need)
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, accent);

## style.scss
@import '~@angular/material/theming';

@include mat-core();

@import 'my-theme.scss';

// import custom componenet themes
// unofficial naming convention to support nice ordering of files in IDE
// to see theme under the original style file of the componenent
@import 'app/shared/big-input/big-input.component.scss-theme';

## style.scss
@import '~@angular/material/theming';

// always include only once per project
@include mat-core();

// import our custom themes
@import 'my-theme.scss';
@import 'my-light-theme.scss';
@import 'my-dark-theme.scss';

## style.scss
@import '~@angular/material/theming';

// always include only once per project
@include mat-core();

// import our custom theme
@import 'my-theme.scss';

// specify theme class eg: <body class="my-theme"> ... </body>
.my-theme {

## theme.scss
// define 3 theme color
// mat-palette accepts $palette-name, main, lighter and darker variants
$my-theme-primary: mat-palette($mat-indigo, 700, 300, 900);
$my-theme-accent: mat-palette($mat-light-blue);
$my-theme-warn: mat-palette($mat-deep-orange, A200);

// create theme (use mat-dark-theme for themes with dark backgrounds)
$my-theme: mat-light-theme(
    $my-theme-primary,
    $my-theme-accent,
	@Component({ /* ... */ })
	export class SomeComponent {

	// streamifies input
	@Input$() prop: Observable<string>;

	// lifecycle notifier as an Observable stream
	@OnDestroy$() destroy$: Obseravble<void>;

	// lifecycle hook as decorator instead of implements interface
	/*

	This is then built as Angualr element
	with

	ngDoBootstrap() {
	const ElementExample = createCustomElement(ElementExampleComponent, { injector: this.injector });
	customElements.define('element-example', ElementExample);
	}
	function changeMac() {
	local mac=$(openssl rand -hex 6 \| sed 's/\(..\)/\1:/g; s/.$//')
	sudo ifconfig en0 ether $mac
	sudo ifconfig en0 down
	sudo ifconfig en0 up
	echo "Your new physical address is $mac"
	}
	import { Injectable, Component, NgModule, defineInjectable } from '@angular/core';

	/**
	* @fileoverview added by tsickle
	* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
	*/
	var SomeLibService = /** @class */ (function () {
	function SomeLibService() {
	}
	SomeLibService.decorators = [
	import { OverlayContainer } from '@angular/cdk/overlay';

	export class AppComponent implements OnInit {

	// use this to set correct theme class on app holder
	// eg: <div [class]="themeClass">...</div>
	themeClass: string;

	constructor(
	private overlayContainer: OverlayContainer
	@import '~@angular/material/theming';

	// mixin name will be used in main style.scss
	@mixin big-input-component-theme($theme) {

	// retrieve variables from theme
	// (all possible variables, use only what you really need)
	$primary: map-get($theme, primary);
	$accent: map-get($theme, accent);
	$warn: map-get($theme, accent);
	@import '~@angular/material/theming';

	@include mat-core();

	@import 'my-theme.scss';

	// import custom componenet themes
	// unofficial naming convention to support nice ordering of files in IDE
	// to see theme under the original style file of the componenent
	@import 'app/shared/big-input/big-input.component.scss-theme';
	@import '~@angular/material/theming';

	// always include only once per project
	@include mat-core();

	// import our custom themes
	@import 'my-theme.scss';
	@import 'my-light-theme.scss';
	@import 'my-dark-theme.scss';
	// define 3 theme color
	// mat-palette accepts $palette-name, main, lighter and darker variants
	$my-theme-primary: mat-palette($mat-indigo, 700, 300, 900);
	$my-theme-accent: mat-palette($mat-light-blue);
	$my-theme-warn: mat-palette($mat-deep-orange, A200);

	// create theme (use mat-dark-theme for themes with dark backgrounds)
	$my-theme: mat-light-theme(
	$my-theme-primary,
	$my-theme-accent,