Skip to content

Instantly share code, notes, and snippets.

@LayZeeDK
LayZeeDK / content-child.md
Last active September 16, 2023 21:35
Strict framework-injected properties in Angular components
flowchart TD
    A[ContentChild] --> B;
    B{Is static?} -- No --> C;
    B -- Yes --> D;
    C[Make the query<br>type optional] --> E(Access in<br>ngAfterContentInit<br>or later);
    D(Add assertion<br>in ngOnInit or<br>ngOnChanges) --> F;
    F[Add ! to<br>the query type] --> G(Access in<br>ngOnInit<br>or later)
@ThomasBurleson
ThomasBurleson / untilDestroyed.ts
Last active April 18, 2023 07:47
Using untilViewDestroyed to link component ngOnDestroy to observable unsubscribe.
/**
* When manually subscribing to an observable in a view component, developers are traditionally required
* to unsubscribe during ngOnDestroy. This utility method auto-configures and manages that relationship
* by watching the DOM with a MutationObserver and internally using the takeUntil RxJS operator.
*
* Angular 7 has stricter enforcements and throws errors with monkey-patching of view component life-cycle methods.
* Here is an updated version that uses MutationObserver to accomplish the same goal.
*
* @code
*
@PCreations
PCreations / rxjs-diagrams.md
Last active January 18, 2024 08:52
Super Intuitive Interactive Diagrams to learn combining RxJS sequences by Max NgWizard K
@ediblecode
ediblecode / package-json-build-number.ps1
Created August 23, 2017 07:22
Powershell script to parse a package.json version and use as the build number in TeamCity
$version = (Get-Content package.json) -join "`n" | ConvertFrom-Json | Select -ExpandProperty "version"
$buildCounter = "%build.counter%"
$buildNumber = "$version.$buildCounter"
Write-Host "##teamcity[buildNumber '$buildNumber']"
@mhevery
mhevery / microsyntax.md
Last active November 21, 2022 09:53
Angular microsyntax gramar

Microsyntax

Microsyntax in Angular allows you to write <div *ngFor="let item of items">{{item}}</div> instead of <ng-template ngFor [ngForOf]="items"><div>{{item}}</div></ng-template.

Constraints

The microsyntax must:

  • be know ahead of time so that IDEs can parse it without knowing what is the underlying semantics of the directive or what directives are present.
  • must translate to key-value attributes in the DOM.
@adamrecsko
adamrecsko / highlight.pipe.ts
Created May 1, 2016 20:28
Angular2 text highlight pipe
import {PipeTransform, Pipe} from 'angular2/core';
@Pipe({ name: 'highlight' })
export class HighLightPipe implements PipeTransform {
transform(text: string, [search]): string {
return search ? text.replace(new RegExp(search, 'i'), `<span class="highlight">${search}</span>`) : text;
}
}
/** Usage:
@carcinocron
carcinocron / debugger pause beforeunload
Last active April 25, 2024 16:48
Chrome: pause before redirect
// Run this in the F12 javascript console in chrome
// if a redirect happens, the page will pause
// this helps because chrome's network tab's
// "preserve log" seems to technically preserve the log
// but you can't actually LOOK at it...
// also the "replay xhr" feature does not work after reload
// even if you "preserve log".
window.addEventListener("beforeunload", function() { debugger; }, false)
@addyosmani
addyosmani / README.md
Last active April 2, 2024 20:18 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version