riapacheco

@import '../mixins.scss';

// Variables are easy to use and enable calc() to work with different unit types (px, vh, in, etc)
$container-width: 800px;
$div-width: 20px;

.container {
  width: $container-width;
  position: relative;
  

riapacheco

// Center an absolute item [assumption that container is `position: relative`]
// Provide direction, length of item to be centered [any unit type], and length of container along side of direction
// Usage: @include center-absolute('top', 90px, 100%);

@mixin center-absolute(
  $direction, 
  $itemSize, 
  $containerSize) {
    position: absolute;
    @if (

riapacheco

import {formatDate} from '@angular/common';
import {Inject, LOCALE_ID, Pipe, PipeTransform} from '@angular/core';
import firebase from 'firebase/app';
import Timestamp = firebase.firestore.Timestamp;

/**
 * Can change style of date rendered to 'medium', 'shortDate', etc.
 * Change on line 26
 * 
 * Example

riapacheco

<div style="display: block; width: 80%; margin: auto; padding: 3rem;">
  <canvas
    [chartType]="'line'"
    [legend]="false"
    [datasets]="chartData"
    [options]="chartOptions"
    [labels]="chartLabels"
    baseChart>
  </canvas>
</div>

riapacheco

<textarea
  (keydown)="enableTabbing($event)">
</textarea>

riapacheco

export class FilterAllPipe implements PipeTransform {

  transform(value: any, searchText: any): any {
    if (!searchText) { return value; }
    return value.filter((data: any) => this.matchValue(data, searchText));
  }

  matchValue(data: any, value: any) {
    return Object.keys(data).map((key) => {
      return new RegExp(value, 'gi').test(data[key]);

riapacheco

// ACTUAL FILE: ngsw-config.json 

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {

riapacheco

<div [ngStyle]="isMobile ? {'font-size': '0.8rem'} : {'font-size': '1rem'} ">
  This is a div
</div>

<div [ngStyle]="isMobile ? {  'margin-right': '10px',
                              'font-size': '2rem',
                              'margin-top': '5rem'
                              } : { 'margin-right': '0px',
                                    'font-size': '1rem'} ">
  This is a div

riapacheco

:host {
  background-color: white;
}

:host(.change-bg) {
  background-color: red;
}

riapacheco

import { BehaviorSubject, Observable } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';

export class StateService {
  private state$!: BehaviorSubject<any>;

  protected get state(): any {
    return this.state$.getValue();
  }