',
() => async.done());
}));
}
});
});
}
@Injectable()
class MyService {
greeting: string;
constructor() { this.greeting = 'hello'; }
}
@Component({selector: 'simple-imp-cmp'})
@View({renderer: 'simple-imp-cmp-renderer', template: ''})
@Injectable()
class SimpleImperativeViewComponent {
done;
constructor(self: ElementRef, viewManager: AppViewManager, renderer: DomRenderer) {
var shadowViewRef = viewManager.getComponentView(self);
renderer.setComponentViewRootNodes(shadowViewRef.render, [el('hello imp view')]);
}
}
@Directive({selector: 'dynamic-vp'})
@Injectable()
class DynamicViewport {
done;
constructor(vc: ViewContainerRef, compiler: Compiler) {
var myService = new MyService();
myService.greeting = 'dynamic greet';
var bindings = Injector.resolve([bind(MyService).toValue(myService)]);
this.done = compiler.compileInHost(ChildCompUsingService)
.then((hostPv) => {vc.create(hostPv, 0, null, bindings)});
}
}
@Directive({selector: '[my-dir]', properties: ['dirProp: elprop'], exportAs: 'mydir'})
@Injectable()
class MyDir {
dirProp: string;
constructor() { this.dirProp = ''; }
}
@Component({selector: 'push-cmp', properties: ['prop'], changeDetection: ON_PUSH})
@View({template: '{{field}}'})
@Injectable()
class PushCmp {
numberOfChecks: number;
prop;
constructor() { this.numberOfChecks = 0; }
get field() {
this.numberOfChecks++;
return "fixed";
}
}
@Component({selector: 'push-cmp-with-ref', properties: ['prop'], changeDetection: ON_PUSH})
@View({template: '{{field}}'})
@Injectable()
class PushCmpWithRef {
numberOfChecks: number;
ref: ChangeDetectorRef;
prop;
constructor(ref: ChangeDetectorRef) {
this.numberOfChecks = 0;
this.ref = ref;
}
get field() {
this.numberOfChecks++;
return "fixed";
}
propagate() { this.ref.requestCheck(); }
}
@Injectable()
class PipesWithDouble extends Pipes {
constructor() { super({"double": [new DoublePipeFactory()]}); }
}
@Component({
selector: 'my-comp-with-pipes',
viewInjector: [new Binding(Pipes, {toClass: PipesWithDouble})]
})
@View({directives: []})
@Injectable()
class MyCompWithPipes {
ctxProp: string = "initial value";
}
@Component({selector: 'my-comp'})
@View({directives: []})
@Injectable()
class MyComp {
ctxProp: string;
ctxNumProp;
ctxBoolProp;
constructor() {
this.ctxProp = 'initial value';
this.ctxNumProp = 0;
this.ctxBoolProp = false;
}
}
@Component({selector: 'child-cmp', properties: ['dirProp'], viewInjector: [MyService]})
@View({directives: [MyDir], template: '{{ctxProp}}'})
@Injectable()
class ChildComp {
ctxProp: string;
dirProp: string;
constructor(service: MyService) {
this.ctxProp = service.greeting;
this.dirProp = null;
}
}
@Component({selector: 'child-cmp-no-template'})
@View({directives: [], template: ''})
@Injectable()
class ChildCompNoTemplate {
ctxProp: string = 'hello';
}
@Component({selector: 'child-cmp-svc'})
@View({template: '{{ctxProp}}'})
@Injectable()
class ChildCompUsingService {
ctxProp: string;
constructor(service: MyService) { this.ctxProp = service.greeting; }
}
@Directive({selector: 'some-directive'})
@Injectable()
class SomeDirective {
}
class SomeDirectiveMissingAnnotation {}
@Component({selector: 'cmp-with-parent'})
@View({template: '
Component with an injected parent
', directives: [SomeDirective]})
@Injectable()
class CompWithParent {
myParent: SomeDirective;
constructor(@Parent() someComp: SomeDirective) { this.myParent = someComp; }
}
@Component({selector: 'cmp-with-ancestor'})
@View({template: '
Component with an injected ancestor
', directives: [SomeDirective]})
@Injectable()
class CompWithAncestor {
myAncestor: SomeDirective;
constructor(@Ancestor() someComp: SomeDirective) { this.myAncestor = someComp; }
}
@Component({selector: '[child-cmp2]', viewInjector: [MyService]})
@Injectable()
class ChildComp2 {
ctxProp: string;
dirProp: string;
constructor(service: MyService) {
this.ctxProp = service.greeting;
this.dirProp = null;
}
}
@Directive({selector: '[some-viewport]'})
@Injectable()
class SomeViewport {
constructor(container: ViewContainerRef, protoView: ProtoViewRef) {
container.create(protoView).setLocal('some-tmpl', 'hello');
container.create(protoView).setLocal('some-tmpl', 'again');
}
}
@Injectable()
class DoublePipe implements Pipe {
onDestroy() {}
supports(obj) { return true; }
transform(value, args = null) { return `${value}${value}`; }
}
@Injectable()
class DoublePipeFactory implements PipeFactory {
supports(obj) { return true; }
create(cdRef) { return new DoublePipe(); }
}
@Directive({selector: '[emitter]', events: ['event']})
@Injectable()
class DirectiveEmitingEvent {
msg: string;
event: EventEmitter;
constructor() {
this.msg = '';
this.event = new EventEmitter();
}
fireEvent(msg: string) { ObservableWrapper.callNext(this.event, msg); }
}
@Directive({selector: '[update-host-attributes]', host: {'role': 'button'}})
@Injectable()
class DirectiveUpdatingHostAttributes {
}
@Directive({selector: '[update-host-properties]', host: {'[id]': 'id'}})
@Injectable()
class DirectiveUpdatingHostProperties {
id: string;
constructor() { this.id = "one"; }
}
@Directive({selector: '[update-host-actions]', host: {'@setAttr': 'setAttribute'}})
@Injectable()
class DirectiveUpdatingHostActions {
setAttr: EventEmitter;
constructor() { this.setAttr = new EventEmitter(); }
triggerSetAttr(attrValue) { ObservableWrapper.callNext(this.setAttr, ["key", attrValue]); }
}
@Directive({selector: '[listener]', host: {'(event)': 'onEvent($event)'}})
@Injectable()
class DirectiveListeningEvent {
msg: string;
constructor() { this.msg = ''; }
onEvent(msg: string) { this.msg = msg; }
}
@Directive({
selector: '[listener]',
host: {
'(domEvent)': 'onEvent($event.type)',
'(window:domEvent)': 'onWindowEvent($event.type)',
'(document:domEvent)': 'onDocumentEvent($event.type)',
'(body:domEvent)': 'onBodyEvent($event.type)'
}
})
@Injectable()
class DirectiveListeningDomEvent {
eventType: string;
constructor() { this.eventType = ''; }
onEvent(eventType: string) { this.eventType = eventType; }
onWindowEvent(eventType: string) { this.eventType = "window_" + eventType; }
onDocumentEvent(eventType: string) { this.eventType = "document_" + eventType; }
onBodyEvent(eventType: string) { this.eventType = "body_" + eventType; }
}
var globalCounter = 0;
@Directive({selector: '[listenerother]', host: {'(window:domEvent)': 'onEvent($event.type)'}})
@Injectable()
class DirectiveListeningDomEventOther {
eventType: string;
counter: int;
constructor() { this.eventType = ''; }
onEvent(eventType: string) {
globalCounter++;
this.eventType = "other_" + eventType;
}
}
@Directive({selector: '[listenerprevent]', host: {'(click)': 'onEvent($event)'}})
@Injectable()
class DirectiveListeningDomEventPrevent {
onEvent(event) { return false; }
}
@Directive({selector: '[listenernoprevent]', host: {'(click)': 'onEvent($event)'}})
@Injectable()
class DirectiveListeningDomEventNoPrevent {
onEvent(event) { return true; }
}
@Directive({selector: '[id]', properties: ['id']})
@Injectable()
class IdDir {
id: string;
}
@Directive({selector: '[static]'})
@Injectable()
class NeedsAttribute {
typeAttribute;
titleAttribute;
fooAttribute;
constructor(@Attribute('type') typeAttribute: String, @Attribute('title') titleAttribute: String,
@Attribute('foo') fooAttribute: String) {
this.typeAttribute = typeAttribute;
this.titleAttribute = titleAttribute;
this.fooAttribute = fooAttribute;
}
}
@Directive({selector: '[public-api]'})
@Injectable()
class PublicApi {
}
@Directive({selector: '[private-impl]'})
@Injectable()
class PrivateImpl extends PublicApi {
}
@Directive({selector: '[needs-public-api]'})
@Injectable()
class NeedsPublicApi {
constructor(@Parent() api: PublicApi) { expect(api instanceof PrivateImpl).toBe(true); }
}
@Directive({selector: '[toolbarpart]'})
@Injectable()
class ToolbarPart {
protoViewRef: ProtoViewRef;
elementRef: ElementRef;
constructor(protoViewRef: ProtoViewRef, elementRef: ElementRef) {
this.elementRef = elementRef;
this.protoViewRef = protoViewRef;
}
}
@Directive({selector: '[toolbar-vc]', properties: ['toolbarVc']})
@Injectable()
class ToolbarViewContainer {
vc: ViewContainerRef;
constructor(vc: ViewContainerRef) { this.vc = vc; }
set toolbarVc(part: ToolbarPart) {
var view = this.vc.create(part.protoViewRef, 0, part.elementRef);
view.setLocal('toolbarProp', 'From toolbar');
}
}
@Component({selector: 'toolbar'})
@View({
template: 'TOOLBAR(
)',
directives: [ToolbarViewContainer, NgFor]
})
@Injectable()
class ToolbarComponent {
query: QueryList
;
ctxProp: string;
constructor(@Query(ToolbarPart) query: QueryList) {
this.ctxProp = 'hello world';
this.query = query;
}
}
@Directive({selector: '[two-way]', properties: ['value: control'], events: ['control']})
@Injectable()
class DirectiveWithTwoWayBinding {
control: EventEmitter;
value: any;
constructor() { this.control = new EventEmitter(); }
triggerChange(value) { ObservableWrapper.callNext(this.control, value); }
}
@Injectable()
class InjectableService {
}
function createInjectableWithLogging(inj: Injector) {
inj.get(ComponentProvidingLoggingInjectable).created = true;
return new InjectableService();
}
@Component({
selector: 'component-providing-logging-injectable',
hostInjector:
[new Binding(InjectableService, {toFactory: createInjectableWithLogging, deps: [Injector]})]
})
@View({template: ''})
@Injectable()
class ComponentProvidingLoggingInjectable {
created: boolean = false;
}
@Directive({selector: 'directive-providing-injectable', hostInjector: [[InjectableService]]})
@Injectable()
class DirectiveProvidingInjectable {
}
@Component({selector: 'directive-providing-injectable', viewInjector: [[InjectableService]]})
@View({template: ''})
@Injectable()
class DirectiveProvidingInjectableInView {
}
@Component({
selector: 'directive-providing-injectable',
hostInjector: [new Binding(InjectableService, {toValue: 'host'})],
viewInjector: [new Binding(InjectableService, {toValue: 'view'})]
})
@View({template: ''})
@Injectable()
class DirectiveProvidingInjectableInHostAndView {
}
@Component({selector: 'directive-consuming-injectable'})
@View({template: ''})
@Injectable()
class DirectiveConsumingInjectable {
injectable;
constructor(@Ancestor() @Inject(InjectableService) injectable) { this.injectable = injectable; }
}
@Component({selector: 'directive-containing-directive-consuming-an-injectable'})
@Injectable()
class DirectiveContainingDirectiveConsumingAnInjectable {
directive;
}
@Component({selector: 'directive-consuming-injectable-unbounded'})
@View({template: ''})
@Injectable()
class DirectiveConsumingInjectableUnbounded {
injectable;
constructor(@Unbounded() injectable: InjectableService,
@Ancestor() parent: DirectiveContainingDirectiveConsumingAnInjectable) {
this.injectable = injectable;
parent.directive = this;
}
}
@CONST()
class EventBus {
parentEventBus: EventBus;
name: string;
constructor(parentEventBus: EventBus, name: string) {
this.parentEventBus = parentEventBus;
this.name = name;
}
}
@Directive({
selector: 'grand-parent-providing-event-bus',
hostInjector: [new Binding(EventBus, {toValue: new EventBus(null, "grandparent")})]
})
class GrandParentProvidingEventBus {
bus: EventBus;
constructor(bus: EventBus) { this.bus = bus; }
}
function createParentBus(peb) {
return new EventBus(peb, "parent");
}
@Component({
selector: 'parent-providing-event-bus',
hostInjector: [
new Binding(EventBus,
{toFactory: createParentBus, deps: [[EventBus, new UnboundedMetadata()]]})
]
})
@View({
directives: [forwardRef(() => ChildConsumingEventBus)],
template: `
`
})
class ParentProvidingEventBus {
bus: EventBus;
grandParentBus: EventBus;
constructor(bus: EventBus, @Unbounded() grandParentBus: EventBus) {
this.bus = bus;
this.grandParentBus = grandParentBus;
}
}
@Directive({selector: 'child-consuming-event-bus'})
class ChildConsumingEventBus {
bus: EventBus;
constructor(@Unbounded() bus: EventBus) { this.bus = bus; }
}
@Directive({selector: '[some-impvp]', properties: ['someImpvp']})
@Injectable()
class SomeImperativeViewport {
view: ViewRef;
anchor;
constructor(public vc: ViewContainerRef, public protoView: ProtoViewRef,
public renderer: DomRenderer, @Inject(ANCHOR_ELEMENT) anchor) {
this.view = null;
this.anchor = anchor;
}
set someImpvp(value: boolean) {
if (isPresent(this.view)) {
this.vc.clear();
this.view = null;
}
if (value) {
this.view = this.vc.create(this.protoView);
var nodes = this.renderer.getRootNodes(this.view.render);
for (var i = 0; i < nodes.length; i++) {
DOM.appendChild(this.anchor, nodes[i]);
}
}
}
}
@Directive({selector: '[export-dir]', exportAs: 'dir'})
class ExportDir {
}
@Component({selector: 'comp'})
class ComponentWithoutView {
}
@Directive({selector: '[no-duplicate]'})
class DuplicateDir {
constructor(renderer: DomRenderer, private elRef: ElementRef) {
DOM.setText(elRef.nativeElement, DOM.getText(elRef.nativeElement) + 'noduplicate');
}
}
@Directive({selector: '[no-duplicate]'})
class OtherDuplicateDir {
constructor(renderer: DomRenderer, private elRef: ElementRef) {
DOM.setText(elRef.nativeElement, DOM.getText(elRef.nativeElement) + 'othernoduplicate');
}
}