Skip to content

Instantly share code, notes, and snippets.

View robwormald's full-sized avatar

Rob Wormald robwormald

View GitHub Profile
View ng-templates.ts
const helloWorld = (props) => ngHtml`<h1>Hello ${props.name}</h1>`
const TodoItemTemplate = props => ngHtml`<li>${props.$index} - ${props.name}</li>`
function TodoAppComponent(){
const todoService = inject(TodoService);
return ngHtml`
<h3>Todos</h3>
<ul>${ngRepeat(todoService.todos, TodoItemTemplate)}</ul>`
View elements.ts
customElements.define('app-shell', class extends HTMLElement {
constructor(){
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<h1>App</h1>
<slot></slot>
`
}
});
View rollup.config.js
import node from 'rollup-plugin-node-resolve'
import buildOptimizer from '@angular-devkit/build-optimizer/src/build-optimizer/rollup-plugin'
import terser from 'rollup-plugin-terser'
export default {
input: {
app: './lib/app.js'
},
output: {
dir: 'public'
View tagged-template-literals.md

Thinking about tagged template literals and HTML templating.

(Disclaimer: I work on the Angular team, but this isn't something the Angular team is considering (yet). This is simply me capturing some thoughts...)

ES2015 added Template Literals to JavaScript (Template Literals is the current term, they were known as "Template Strings" in the first edition)

They're useful for all kinds of things, the most obvious of which is interpolating values in a much more concise way than concatting strings together:

View templates.ts
@Component({
selector: 'wt-greeting',
template: (ctx: WtGreeting) => ngHtml`<h1>Hello ${uppercase(ctx.name)}</h1>`
})
class WtGreeting {
@Input() name: string;
}
@Component({
View comp-a.ts
function toResponseActions(successSelector, errorSelector){
return (requests$) => requests$.pipe(
catchError(err, => errorSelector(err)),
map(res => successSelector(res))
)
}
const buttonClicks = fromEvent('button', 'click');
const requests = buttonClicks.pipe(switchMap(() => http.get('foo.json')));
View zone-build.js
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
typeof define === 'function' && define.amd ? define(factory) :
View decorators.ts
//existing proposal
@Component({
selector: 'foo'
})
export class MyComponent {
render(){}
}
//new proposal
View device-detail.component.ts
@Component({
selector: 'app-device-detail',
templateUrl: './device-detail.component.html',
styleUrls: ['./device-detail.component.css']
})
export class DeviceDetailComponent {
constructor(private route: ActivatedRoute, private deviceService: DeviceService) { }
device$ = this.route.params.pipe(this.deviceService.toDevice);
deviceState$ = this.device$.pipe(this.deviceService.toDeviceState);
View component.ts
export class DeviceDetailComponent {
constructor(private route: ActivatedRoute, private deviceService: DeviceService) { }
device$ = this.route.params.pipe(this.deviceService.toDevice);
deviceState$ = this.device$.pipe(this.deviceService.toDeviceState);
deviceMeasurements$ = this.device$.pipe(this.deviceService.toMeasurements);
trackMeasurement = (id, rec) => (`${rec.timestamp.seconds}${rec.timestamp.nanoseconds}`);
}