Michael Prentice 09970d52e8 docs(core): in template syntax guide, make SVG example more clear (#31356)
add e2e test for SVG template example
fix template syntax example app
- linting errors
- runtime exceptions
- template type errors
- deprecated type casting
- deprecated currency pipe example

Relates to #30559

PR Close #31356
2019-07-02 11:30:15 -07:00

44 lines
1.2 KiB
TypeScript

/* tslint:disable directive-selector directive-class-suffix */
// #docplaster
import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
@Directive({selector: '[myClick]'})
export class ClickDirective {
// #docregion output-myClick
@Output('myClick') clicks = new EventEmitter<string>(); // @Output(alias) propertyName = ...
// #enddocregion output-myClick
toggle = false;
constructor(el: ElementRef) {
el.nativeElement
.addEventListener('click', (event: Event) => {
this.toggle = !this.toggle;
this.clicks.emit(this.toggle ? 'Click!' : '');
});
}
}
// #docregion output-myClick2
@Directive({
// #enddocregion output-myClick2
selector: '[myClick2]',
// tslint:disable: no-outputs-metadata-property
// #docregion output-myClick2
outputs: ['clicks:myClick'] // propertyName:alias
})
// #enddocregion output-myClick2
// tslint:enable: no-outputs-metadata-property
export class ClickDirective2 {
clicks = new EventEmitter<string>();
toggle = false;
constructor(el: ElementRef) {
el.nativeElement
.addEventListener('click', (event: Event) => {
this.toggle = !this.toggle;
this.clicks.emit(this.toggle ? 'Click2!' : '');
});
}
}