Skip to content

Instantly share code, notes, and snippets.

View yokoishioka's full-sized avatar

yoko ishioka yokoishioka

View GitHub Profile
@yokoishioka
yokoishioka / list-routes.js
Created May 6, 2023 06:16
How to write dynamic routes to a file for pre-rendering
const fs = require('fs');
const axios = require('axios');
const endOfLine = require('os').EOL;
const domain = `https://cloudengineering.studio`;
const routesOutputFile = 'example-file-name.txt';
const routes = [];
@yokoishioka
yokoishioka / color.service.ts
Created March 12, 2022 02:10
Color Converter Service
import { Injectable } from '@angular/core';
import { ColorHsl, ColorRgb, ColorRgbCalculations } from './color';
@Injectable({
providedIn: 'root'
})
export class ColorService {
hexToRgb(hex: string): ColorRgb {
hex.trim();
@yokoishioka
yokoishioka / table-row.component.html
Created November 3, 2021 04:37
How to find a parent using Angular DI
<ng-content></ng-content>
@yokoishioka
yokoishioka / link-menu.component.html
Created March 19, 2021 05:16
A new and improved self-creating navigation menu
@yokoishioka
yokoishioka / test-lifecycles-log.component.scss
Last active July 28, 2020 15:48
test angular lifecycles
.log {
.header {
display: flex;
justify-content: space-between;
}
.body {
position: absolute;
height: 50vh;
width: 100%;
@yokoishioka
yokoishioka / demos-menu.component.html
Last active July 2, 2020 03:37
Angular resolver that creates a navigation menu based on the module's routes
<nav>
<ces-menu-toggle class="nav-buttons align-left" menuTitle="navigation" toggleIcon="ellipsis-vertical">
<ces-button-route *ngFor="let button of buttons" [link]="button.path" [title]="button.title" [label]="button.label" [icon]="button.icon" [activeSelfOnly]="button.activeSelfOnly" class="nav-button">
</ces-button-route>
</ces-menu-toggle>
</nav>
import { Injectable, ErrorHandler } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SvgsApiService implements ErrorHandler {
@yokoishioka
yokoishioka / click-edit.directive.ts
Last active August 29, 2023 23:36
make any element editable with this Angular directive
import { Directive, HostListener, ElementRef, Renderer2, Output, EventEmitter, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { EditUpdate } from '../forms';
@Directive({
selector: '[cesClickEdit]'
})
export class ClickEditDirective {
value: string;
<div cesDeviceScreenSize>
<div *ngIf="showMenuContent" [ngClass]="{'slide-down': this.allowToggle}" class="menu-container">
<ces-button title="close {{ menuTitle }}" class="button-icon-only menu-button-close" (click)="closeMenu()">
<ces-svg-x-circle class="menu-icon-close"></ces-svg-x-circle>
</ces-button>
<div class="menu-content" (click)="toggleNav()">
<ng-content></ng-content>
</div>
</div>
<ces-button *ngIf="showMenuButton" title="open {{ menuTitle }}" class="button-icon-only menu-button-open fade-in" (click)="openMenu()">
import { Injectable, Input } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { ScreenSize, DetectType } from './devices';
@Injectable({
providedIn: 'root'
})
export class DevicesService {
screenSize: Subject<any> = new Subject();
@Input() detectSize: DetectType;