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 / multiselect-search.component.css
Last active February 12, 2022 11:10
Angular (Material) multiselect with server search
mat-form-field {
width: 100%;
}
mat-option {
height: fit-content !important;
padding: 8px 16px !important;
}
label {
@dkhrunov
dkhrunov / multiselect-search.component.css
Last active March 27, 2024 12:15
Multiselect Search Angular component with loading and empty search message
mat-form-field {
width: 100%;
}
mat-option {
height: fit-content !important;
padding: 8px 16px !important;
}
label {
@dkhrunov
dkhrunov / app-component.html
Last active February 12, 2022 12:23
Example of use multiselect-search
<multiselect-search
label="System"
[value]="value"
[optionTemplate]="optionTemplate"
[searchResults]="searchResults$ | async"
[loading]="loading$ | async"
(search)="onSearchSystems($event)"
>
</multiselect-search>
import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
@Directive({
selector: '[appDragAndDrop]'
})
export class DragAndDropDirective {
@Output()
public fileDropped = new EventEmitter<FileList>();
import { Observable } from "rxjs";
export interface ISheduler {
event: Observable<number>;
isOnSchedule$: Observable<boolean>;
isOnSchedule: boolean;
setSchedule(time: number): void;
start(): void;
stop(): void;
}
import { Directive, Input } from '@angular/core';
import { FormGroupDirective } from '@angular/forms';
@Directive({
selector: '[ngrxConnectForm]'
})
export class NgrxConnectFormDirective {
@Input('ngrxConnectForm')
set data(value: any) {
if (value) {
@dkhrunov
dkhrunov / on-destroy.service.ts
Last active July 14, 2022 13:34
Сервис реализующий "живой" поток пока компонент не будет удален, после удаления завершает поток.
import { Injectable, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
/**
* Сервис реализующий "живой" поток пока компонент не будет удален,
* после удаления завершает поток.
*
* @see {@link https://medium.com/ngx/why-do-you-need-unsubscribe-ee0c62b5d21f|
* Ссылка на статью, параграф - 'Использование сервиса NgOnDestroy'}
*
@dkhrunov
dkhrunov / spy.directive.ts
Created July 10, 2021 18:53
A spy directive like this can provide insight into a DOM object that you cannot change directly. You can't touch the implementation of a native <div>, or modify a third party component. You can, however watch these elements with a directive.
// Spy on any element to which it is applied.
// Usage: <div appSpy>...</div>
@Directive({ selector: '[appSpy]' })
export class SpyDirective implements OnInit, OnDestroy {
constructor(private logger: LoggerService) { }
ngOnInit() {
this.logger.log(`Spy: onInit`);
}
@dkhrunov
dkhrunov / app.component.ts
Created July 15, 2021 08:02
Default boolean @input() prop
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
@Component({
selector: 'app-indicator',
templateUrl: './indicator.component.html',
styleUrls: ['./indicator.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class.active]': `active`,
'[class.pulse]': `pulse`,
@dkhrunov
dkhrunov / outsideZone.old.ts
Last active August 13, 2021 12:59
RxJs operator that run task outside angular zone and don`t trigger change detection
// for Angular less than 9 version
// EXAMPLE:
// fromEvent(window, 'scroll')
// .pipe(outsideZone(this.zone))
// .subscribe(...);
export function outsideZone<T>(zone: NgZone) {
return function(source: Observable<T>) {
return new Observable(observer => {
let sub: Subscription;