Skip to content

Instantly share code, notes, and snippets.

Rob Wormald robwormald

Block or report user

Report or block robwormald

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
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}`);
}
View mixins.ts
importrenderTemplate as renderTemplate} from '@angular/core'
export function withNgTemplate(Base = HTMLElement){
return class NgTemplateElement extends HTMLElement {
_renderRoot: HTMLElement | ShadowRoot;
_host:any;
_renderer(root:HTMLElement | ShadowRoot, renderFn:any){
renderFn();
}
View ihg.md

Hello -

I am currently staying at the David Intercontinental in Tel Aviv, Israel - I'm here on business for 10 days - I'm a web software engineer at Google in Mountain View, California.

While reading a close friend's blog using the hotel wifi (note I am using the paid service), a popup appeared midway down the page asking me to use my room number to "get the latest digital services" from the hotel:

ad

As my friend's blog is hosted in the US, and he's never been to to the David hotel or Israel, for that matter, I thought it was somewhat odd that his website would be asking me anything like this. So, I jumped on my laptop, and visited the page from there with Chrome's developer tools running.

View elements.ts
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { NgModule, Injector, NgModuleFactory, NgModuleRef } from '@angular/core';
import { SomeService } from './service'
import { AppComponent } from './app.component';
import { DemoElementModule, DemoElement } from './demo-element'
import { DemoElementModuleNgFactory } from './demo-element.ngfactory'
You can’t perform that action at this time.