Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View tomastrajan's full-sized avatar
🍰
Where is the cake?

Tomas Trajan tomastrajan

🍰
Where is the cake?
885 followers · 63 following
View GitHub Profile
@tomastrajan
tomastrajan / some.component.ts
Created October 20, 2022 21:38
Angular DX syntax proposal - more decorators 😅
@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
@tomastrajan
tomastrajan / app.component.ts
Last active May 2, 2022 06:02
Angular Material Theming - overlay handling
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
@tomastrajan
tomastrajan / element.ts
Last active April 21, 2022 11:36
Angular elements change detection problem
/*
This is then built as Angualr element
with
ngDoBootstrap() {
const ElementExample = createCustomElement(ElementExampleComponent, { injector: this.injector });
customElements.define('element-example', ElementExample);
}
@tomastrajan
tomastrajan / style.scss
Last active February 1, 2021 02:41
Angular Material Theming - multiple themes
@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';
@tomastrajan
tomastrajan / style.scss
Created May 31, 2017 13:18
Angular Material Theming - include theme
@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 {
@tomastrajan
tomastrajan / theme.scss
Last active September 16, 2019 04:58
Angular Material Theming - theme
// 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,
@tomastrajan
tomastrajan / cancelable.decorator.ts
Last active September 16, 2019 04:58
@Cancelable
export function cancelable() : MethodDecorator {
return function ( target : any, propertyKey : string, descriptor : PropertyDescriptor ) {
const originalFn = descriptor.value;
const subject = new BehaviorSubject(undefined);
const result$ = subject.asObservable().switchMap(args => originalFn(...args));
descriptor.value = (...args) => {
subject.next(args);
@tomastrajan
tomastrajan / ampe-app-service.ts
Last active September 16, 2019 04:58
Angular Model Pattern - orchestration
export class AuthApplicationService {
// inject all needed services
constructor(
private sessionService: SessionService,
private authService: AuthService
) {}
// orchestrate multi service execution
// note that subscription and cancelation are responsibility of the caller
@tomastrajan
tomastrajan / ampe-service.ts
Created May 4, 2017 23:10
Angular Model Pattern - use model in service
@Injectable()
export class TodosService {
private model: Model<Todo[]>;
todos$: Observable<Todo[]>;
constructor(private modelFactory: ModelFactory<Todo[]>) {
this.model = this.modelFactory.create([]);
this.todos$ = this.model.data$;
@tomastrajan
tomastrajan / ampe-core-module.ts
Created May 4, 2017 22:45
Angular Model Pattern - register model provider
import { NgModule } from '@angular/core';
import { MODEL_PROVIDER } from './model.service';
@NgModule({
/* ... */
providers: [MODEL_PROVIDER]
})
export class CoreModule { }