Skip to content

Instantly share code, notes, and snippets.

View twerske's full-sized avatar

Emma Twersky twerske

View GitHub Profile
@twerske
twerske / Angular Slack theme
Last active January 14, 2021 09:21
Angular custom Slack theme
#1F1C18, #8E0E00, #C3002F, #FFFFFF, #3E403F, #FFFFFF, #DD0031, #DD0031, #C3002F, #FFFFFF
@twerske
twerske / .eslintrc.json
Created June 1, 2021 20:04
ESLint Accessibility rules recommendation
"@angular-eslint/template/accessibility-alt-text": 2,
"@angular-eslint/template/accessibility-elements-content": 2,
"@angular-eslint/template/accessibility-label-for": 2,
"@angular-eslint/template/no-positive-tabindex": 2,
"@angular-eslint/template/accessibility-table-scope": 2,
"@angular-eslint/template/accessibility-valid-aria": 2,
"@angular-eslint/template/click-events-have-key-events": 2,
"@angular-eslint/template/mouse-events-have-key-events": 2,
"@angular-eslint/template/no-autofocus": 2,
"@angular-eslint/template/no-distracting-elements": 2
@twerske
twerske / live-announcer.component.ts
Created June 1, 2021 20:26
Announce changes with LiveAnnouncer
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { Component } from '@angular/core';
@Component(...)
export class ColorPickerDialogComponent {
color = '#fff';
public defaultColors: string[] = [...];
constructor(private liveAnnouncer: LiveAnnouncer) { }
@twerske
twerske / typed-forms.ts
Created May 5, 2022 22:37
Angular v14 Typed Forms
const party = new FormGroup({
address: new FormGroup({
house: new FormControl(123),
street: new FormGroup({
name: new FormControl('Powell'),
kind: new FormControl('St'),
}),
}),
formal: new FormControl(true),
foodOptions: new FormArray([
@twerske
twerske / main.ts
Last active May 13, 2022 17:28
Simplifying Angular with Standalone Components
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // includes NgIf and TitleCasePipe
import { bootstrapApplication } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card';
import { ImageComponent } from './app/image.component';
import { HighlightDirective } from './app/highlight.directive';
@Component({
selector: 'app-root',
@twerske
twerske / typed-angular-forms.ts
Created May 13, 2022 17:31
Typed Angular Forms
const cat = new FormGroup({
name: new FormGroup({
first: new FormControl('Barb'),
last: new FormControl('Smith'),
}),
lives: new FormControl(9),
});
// Type-checking for forms values!
// TS Error: Property 'substring' does not exist on type 'number'.
@twerske
twerske / migrating-typed-forms.ts
Created May 13, 2022 17:32
Update schematics allows for incremental migration to typed forms
// v13 untyped form
const cat = new FormGroup({
name: new FormGroup(
first: new FormControl('Barb'),
last: new FormControl('Smith'),
),
lives: new FormControl(9)
});
// v14 untyped form after running `ng update`
@twerske
twerske / patrially-typed-forms.ts
Created May 13, 2022 17:33
Migrating to the new typed forms API surface where possible
// v14 partial typed form, migrating `UntypedFormGroup` -> `FormGroup`
const cat = new FormGroup({
name: new FormGroup(
first: new UntypedFormControl('Barb'),
last: new UntypedFormControl('Smith'),
),
lives: new UntypedFormControl(9)
});
@twerske
twerske / app-routing.module.ts
Created May 13, 2022 17:35
Streamlined page title accessibility
const routes: Routes = [{
path: 'home',
component: HomeComponent
title: 'My App - Home' // <-- Page title
}, {
path: 'about',
component: AboutComponent,
title: 'My App - About Me' // <-- Page title
}];
@twerske
twerske / app-routing.module.ts
Created May 13, 2022 17:36
Streamlined page title accessibility with a TitleStrategy
const routes: Routes = [{
path: 'home',
component: HomeComponent
}, {
path: 'about',
component: AboutComponent,
title: 'About Me' // <-- Page title
}];
@Injectable()