Skip to content

Instantly share code, notes, and snippets.

View dkhrunov's full-sized avatar
📭
Searching for a job

Denis Khrunov dkhrunov

📭
Searching for a job
  • Russia, Penza
View GitHub Profile
@dkhrunov
dkhrunov / cache-options.interface.ts
Last active July 14, 2022 13:30
Angular HttpClient request caching decorator / any other Observables caching decorator
export interface ICacheOptions {
/**
* Кастомное хранилище кэша, если не передать,
* то будет использоваться стандартное хранилище `CacheService` из `RootModule`.
*
* @default CacheService - хранилище из `RootModule`.
*/
storage?: ICacheStorage;
/**
* `Observable` инвалидации кэша.
@dkhrunov
dkhrunov / _convert.scss
Created May 23, 2022 15:37
Sass mixins for converting px to rem and px to em
@use 'sass:meta';
@use 'sass:math';
/// Default font size
/// @type Number
/// @access public
$base-font-size: 16px !default;
/// Convert a given px unit to a rem unit
/// @param {Number} $px - Number with px unit
@dkhrunov
dkhrunov / _breakpoints.scss
Last active May 23, 2022 16:31
Sass mixins for responsive layout (Adaptive design)
// ---------------
// Helper map function
// ---------------
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
@dkhrunov
dkhrunov / app-routing.module.ts
Last active May 14, 2022 11:28
Medium: Simple and fast setup JWT Authentication in the Angular app
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard, UnAuthGuard } from '@dekh/ngx-jwt-auth';
import { LoginComponent, RegistrationComponent } from '../auth';
import { DashboardComponent } from '../dashboard';
const routes: Routes = [
{
path: 'auth',
@dkhrunov
dkhrunov / utilities-types.ts
Last active August 23, 2022 07:46
Typescript Utility Types
/**
* Make fields as optional, by specific keys.
* Example:
* // new type - { b: string, a?: string, c?: number }
* type optionalType = SomePartial<{ a: string, b: string, c: number }, 'a' | 'c'>;
*/
export type SomePartial<T, K extends keyof T> = Omit<T, K> & Partial<T>;
/**
* Make fields as required, by specific keys.
@dkhrunov
dkhrunov / class_decorator.ts
Created February 5, 2022 13:18 — forked from remojansen/class_decorator.ts
TypeScript Decorators Examples
function logClass(target: any) {
// save a reference to the original constructor
var original = target;
// a utility function to generate instances of a class
function construct(constructor, args) {
var c : any = function () {
return constructor.apply(this, args);
}
@dkhrunov
dkhrunov / validate-on-blur.directive.ts
Created January 22, 2022 08:59
Angular directive that helps trigger validation on blur event
@Directive({
selector: '[validate-onblur]',
host: {
'(focus)': 'onFocus($event)',
'(blur)': 'onBlur($event)',
'(keyup)': 'onKeyup($event)',
'(change)': 'onChange($event)',
'(ngModelChange)': 'onNgModelChange($event)'
}
})
@dkhrunov
dkhrunov / confirm-dialog-data.interface.ts
Last active July 18, 2022 15:04
[Angular] Confirm method decorator
import { TemplateRef } from '@angular/core';
import { ConfirmDialogType } from './confirm-dialog-type.enum';
export interface ConfirmDialogData {
type?: ConfirmDialogType;
title?: string | TemplateRef<unknown>;
content?: string | TemplateRef<unknown>;
cancelText?: string | TemplateRef<unknown>;
okText?: string | TemplateRef<unknown>;
}
@dkhrunov
dkhrunov / tickets.facade.md
Created August 19, 2021 06:38 — forked from ThomasBurleson/tickets.facade.md
Using ngrx with Effects + Facades

NgRx State Management with TicketFacade

Facades are a programming pattern in which a simpler public interface is provided to mask a composition of internal, more-complex, component usages.

When writing a lot of NgRx code - as many enterprises do - developers quickly accumulate large collections of actions and selectors classes. These classes are used to dispatch and query [respectively] the NgRx Store.

Using a Facade - to wrap and blackbox NgRx - simplifies accessing and modifying your NgRx state by masking internal all interactions with the Store, actions, reducers, selectors, and effects.

For more introduction, see Better State Management with Ngrx Facades

@dkhrunov
dkhrunov / README.md
Last active August 24, 2021 07:10
@UntilDestroy class decorator. This decorator automate the unsubscribing process.

UntilDestroy

@TakeUntilDestroy class decorator. This decorator automate the unsubscribing process:

  1. Mark the component with @TakeUntilDestroy
  2. Implement ngOnDestroy hook
  3. Create the componentDestroy property in the body of our decorated class
  4. Further, wherever you need to unsubscribe, you can use a combination of the takeUntil operator and componentDestroy invocation

original resource