test(compiler-cli): convert components & directives compliance tests (#39920)

This commit converts the components & directives compliance tests taken
from `r3_compiler_compliance_spec.ts` to the new test runner.

PR Close #39920
This commit is contained in:
JoostK 2020-12-01 22:35:10 +01:00 committed by Misko Hevery
parent e84ea8d6a7
commit 76ae87406f
136 changed files with 5819 additions and 2 deletions

View File

@ -106,3 +106,7 @@ export class NgZone {}
export interface PipeTransform {
transform(value: any, ...args: any[]): any;
}
export interface OnDestroy {
ngOnDestroy(): void;
}

View File

@ -0,0 +1,424 @@
/****************************************************************************************************
* PARTIAL FILE: forward_referenced_directive.js
****************************************************************************************************/
import { Component, Directive, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class HostBindingComp {
}
HostBindingComp.ɵfac = function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); };
HostBindingComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: HostBindingComp, selector: "host-binding-comp", ngImport: i0, template: { source: `
<my-forward-directive></my-forward-directive>
`, isInline: true }, directives: [{ type: function () { return MyForwardDirective; }, selector: "my-forward-directive" }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(HostBindingComp, [{
type: Component,
args: [{
selector: 'host-binding-comp',
template: `
<my-forward-directive></my-forward-directive>
`
}]
}], null, null); })();
class MyForwardDirective {
}
MyForwardDirective.ɵfac = function MyForwardDirective_Factory(t) { return new (t || MyForwardDirective)(); };
MyForwardDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: MyForwardDirective, selector: "my-forward-directive", ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyForwardDirective, [{
type: Directive,
args: [{ selector: 'my-forward-directive' }]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [HostBindingComp, MyForwardDirective] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [HostBindingComp, MyForwardDirective] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: forward_referenced_directive.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class HostBindingComp {
static ɵfac: i0.ɵɵFactoryDef<HostBindingComp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<HostBindingComp, "host-binding-comp", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof HostBindingComp, typeof MyForwardDirective], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: forward_referenced_pipe.js
****************************************************************************************************/
import { Component, NgModule, Pipe } from '@angular/core';
import * as i0 from "@angular/core";
export class HostBindingComp {
}
HostBindingComp.ɵfac = function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); };
HostBindingComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: HostBindingComp, selector: "host-binding-comp", ngImport: i0, template: { source: `
<div [attr.style]="{} | my_forward_pipe">...</div>
`, isInline: true }, pipes: { "my_forward_pipe": function () { return MyForwardPipe; } } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(HostBindingComp, [{
type: Component,
args: [{
selector: 'host-binding-comp',
template: `
<div [attr.style]="{} | my_forward_pipe">...</div>
`
}]
}], null, null); })();
class MyForwardPipe {
}
MyForwardPipe.ɵfac = function MyForwardPipe_Factory(t) { return new (t || MyForwardPipe)(); };
MyForwardPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "my_forward_pipe", type: MyForwardPipe, pure: true });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyForwardPipe, [{
type: Pipe,
args: [{ name: 'my_forward_pipe' }]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [HostBindingComp, MyForwardPipe] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [HostBindingComp, MyForwardPipe] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: forward_referenced_pipe.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class HostBindingComp {
static ɵfac: i0.ɵɵFactoryDef<HostBindingComp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<HostBindingComp, "host-binding-comp", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof HostBindingComp, typeof MyForwardPipe], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: export_as.js
****************************************************************************************************/
import { Directive, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class SomeDirective {
}
SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[some-directive]", exportAs: ["someDir", "otherDir"], ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
type: Directive,
args: [{ selector: '[some-directive]', exportAs: 'someDir, otherDir' }]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [SomeDirective] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: export_as.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SomeDirective {
static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[some-directive]", ["someDir", "otherDir"], {}, {}, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SomeDirective], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: no_selector.js
****************************************************************************************************/
import { Directive } from '@angular/core';
import * as i0 from "@angular/core";
export class AbstractDirective {
}
AbstractDirective.ɵfac = function AbstractDirective_Factory(t) { return new (t || AbstractDirective)(); };
AbstractDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: AbstractDirective, ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AbstractDirective, [{
type: Directive
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: no_selector.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class AbstractDirective {
static ɵfac: i0.ɵɵFactoryDef<AbstractDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<AbstractDirective, never, never, {}, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: constant_object_literals.js
****************************************************************************************************/
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{ template: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>' }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: constant_object_literals.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
}
/****************************************************************************************************
* PARTIAL FILE: constant_array_literals.js
****************************************************************************************************/
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{ template: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>' }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: constant_array_literals.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
}
/****************************************************************************************************
* PARTIAL FILE: object_literals_null_vs_empty.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: `
<div [dir]="{foo: null}"></div>
<div [dir]="{foo: {}}"></div>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{
template: `
<div [dir]="{foo: null}"></div>
<div [dir]="{foo: {}}"></div>
`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyApp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyApp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: object_literals_null_vs_empty.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyApp], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: array_literals_null_vs_empty.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: `
<div [dir]="{foo: null}"></div>
<div [dir]="{foo: []}"></div>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{
template: `
<div [dir]="{foo: null}"></div>
<div [dir]="{foo: []}"></div>
`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyApp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyApp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: array_literals_null_vs_empty.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyApp], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: object_literals_null_vs_function.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class MyApp {
getFoo() {
return 'foo!';
}
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "ng-component", ngImport: i0, template: { source: `
<div [dir]="{foo: null}"></div>
<div [dir]="{foo: getFoo()}"></div>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{
template: `
<div [dir]="{foo: null}"></div>
<div [dir]="{foo: getFoo()}"></div>
`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyApp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyApp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: object_literals_null_vs_function.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyApp {
getFoo(): string;
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "ng-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyApp], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: custom_decorator_es5.js
****************************************************************************************************/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, InjectionToken } from '@angular/core';
import * as i0 from "@angular/core";
var token = new InjectionToken('token');
export function Custom() {
return function (target) { };
}
var Comp = /** @class */ (function () {
function Comp() {
}
Comp_1 = Comp;
var Comp_1;
Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); };
Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", providers: [{ provide: token, useExisting: Comp_1 }], ngImport: i0, template: { source: '', isInline: true } });
Comp = Comp_1 = __decorate([
Custom()
], Comp);
return Comp;
}());
export { Comp };
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{
type: Component,
args: [{
template: '',
providers: [{ provide: token, useExisting: Comp }],
}]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: custom_decorator_es5.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare function Custom(): (target: any) => void;
export declare class Comp {
static ɵfac: i0.ɵɵFactoryDef<Comp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<Comp, "ng-component", never, {}, {}, never, never>;
}
/****************************************************************************************************
* PARTIAL FILE: ng_template_empty_binding.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class MyComponent {
}
MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-app", ngImport: i0, template: { source: '<ng-template [id]=""></ng-template>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
type: Component,
args: [{ selector: 'my-app', template: '<ng-template [id]=""></ng-template>' }]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: ng_template_empty_binding.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyComponent {
static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-app", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}

View File

@ -0,0 +1,163 @@
{
"$schema": "../../test_case_schema.json",
"cases": [
{
"description": "should instantiate directives in a closure when they are forward referenced",
"inputFiles": [
"forward_referenced_directive.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"forward_referenced_directive.js"
]
}
]
},
{
"description": "should instantiate pipes in a closure when they are forward referenced",
"inputFiles": [
"forward_referenced_pipe.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"forward_referenced_pipe.js"
]
}
]
},
{
"description": "should split multiple `exportAs` values into an array",
"inputFiles": [
"export_as.ts"
],
"expectations": [
{
"failureMessage": "Incorrect SomeDirective.ɵdir",
"files": [
"export_as.js"
]
}
]
},
{
"description": "should not generate a selectors array if the directive does not have a selector",
"inputFiles": [
"no_selector.ts"
],
"expectations": [
{
"failureMessage": "Invalid directive definition",
"files": [
"no_selector.js"
]
}
]
},
{
"description": "should generate a pure function for constant object literals",
"inputFiles": [
"constant_object_literals.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"constant_object_literals.js"
]
}
]
},
{
"description": "should generate a pure function for constant array literals",
"inputFiles": [
"constant_array_literals.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"constant_array_literals.js"
]
}
]
},
{
"description": "should not share pure functions between null and object literals",
"inputFiles": [
"object_literals_null_vs_empty.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"object_literals_null_vs_empty.js"
]
}
]
},
{
"description": "should not share pure functions between null and array literals",
"inputFiles": [
"array_literals_null_vs_empty.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"array_literals_null_vs_empty.js"
]
}
]
},
{
"description": "should not share pure functions between null and function calls",
"inputFiles": [
"object_literals_null_vs_function.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"object_literals_null_vs_function.js"
]
}
]
},
{
"description": "should emit a valid setClassMetadata call in ES5 if a class with a custom decorator is referencing itself inside its own metadata",
"inputFiles": [
"custom_decorator_es5.ts"
],
"compilerOptions": {
"target": "ES5"
},
"excludeFromPartialTests": true,
"expectations": [
{
"failureMessage": "Incorrect setClassMetadata call",
"files": [
"custom_decorator_es5.js"
]
}
]
},
{
"description": "should support empty property bindings on ng-template",
"inputFiles": [
"ng_template_empty_binding.ts"
],
"expectations": [
{
"failureMessage": "Incorrect template",
"files": [
"ng_template_empty_binding.js"
]
}
]
}
]
}

View File

@ -0,0 +1,23 @@
const $c0$ = function () { return { foo: null }; };
const $c1$ = function () { return []; };
const $c2$ = function (a0) { return { foo: a0 }; };
// ...
MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp,
selectors: [["ng-component"]],
decls: 2,
vars: 6,
consts: [[__AttributeMarker.Bindings__, "dir"]],
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "div", 0);
$r3$.ɵɵelement(1, "div", 0);
}
if (rf & 2) {
$r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction0(2, $c0$));
$r3$.ɵɵadvance(1);
$r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction1(4, $c2$, $r3$.ɵɵpureFunction0(3, $c1$)));
}
},
encapsulation: 2
});

View File

@ -0,0 +1,14 @@
import {Component, NgModule} from '@angular/core';
@Component({
template: `
<div [dir]="{foo: null}"></div>
<div [dir]="{foo: []}"></div>
`
})
export class MyApp {
}
@NgModule({declarations: [MyApp]})
export class MyModule {
}

View File

@ -0,0 +1,19 @@
const $c0$ = function () { return []; };
const $c1$ = function () { return [0, 1, 2]; };
// ...
MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp,
selectors: [["ng-component"]],
decls: 1,
vars: 4,
consts: [[__AttributeMarker.Bindings__, "prop", "otherProp"]],
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "some-comp", 0);
}
if (rf & 2) {
$r3$.ɵɵproperty("prop", $r3$.ɵɵpureFunction0(2, $c0$))("otherProp", $r3$.ɵɵpureFunction0(3, $c1$));
}
},
encapsulation: 2
});

View File

@ -0,0 +1,5 @@
import {Component} from '@angular/core';
@Component({template: '<some-comp [prop]="[]" [otherProp]="[0, 1, 2]"></some-comp>'})
export class MyApp {
}

View File

@ -0,0 +1,19 @@
const $c0$ = function () { return {}; };
const $c1$ = function () { return { a: 1, b: 2 }; };
// ...
MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp,
selectors: [["ng-component"]],
decls: 1,
vars: 4,
consts: [[__AttributeMarker.Bindings__, "prop", "otherProp"]],
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "some-comp", 0);
}
if (rf & 2) {
$r3$.ɵɵproperty("prop", $r3$.ɵɵpureFunction0(2, $c0$))("otherProp", $r3$.ɵɵpureFunction0(3, $c1$));
}
},
encapsulation: 2
});

View File

@ -0,0 +1,5 @@
import {Component} from '@angular/core';
@Component({template: '<some-comp [prop]="{}" [otherProp]="{a: 1, b: 2}"></some-comp>'})
export class MyApp {
}

View File

@ -0,0 +1,355 @@
/****************************************************************************************************
* PARTIAL FILE: root_template.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class SimpleComponent {
}
SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); };
SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '<div><ng-content></ng-content></div>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{
type: Component,
args: [{ selector: 'simple', template: '<div><ng-content></ng-content></div>' }]
}], null, null); })();
export class ComplexComponent {
}
ComplexComponent.ɵfac = function ComplexComponent_Factory(t) { return new (t || ComplexComponent)(); };
ComplexComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ComplexComponent, selector: "complex", ngImport: i0, template: { source: `
<div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
<div id="second"><ng-content SELECT="span[title=toSecond]"></ng-content></div>`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ComplexComponent, [{
type: Component,
args: [{
selector: 'complex',
template: `
<div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
<div id="second"><ng-content SELECT="span[title=toSecond]"></ng-content></div>`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent, ComplexComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [SimpleComponent, ComplexComponent] }]
}], null, null); })();
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple>content</simple> <complex></complex>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{ selector: 'my-app', template: '<simple>content</simple> <complex></complex>' }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: root_template.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SimpleComponent {
static ɵfac: i0.ɵɵFactoryDef<SimpleComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleComponent, "simple", never, {}, {}, never, ["*"]>;
}
export declare class ComplexComponent {
static ɵfac: i0.ɵɵFactoryDef<ComplexComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<ComplexComponent, "complex", never, {}, {}, never, ["span[title=toFirst]", "span[title=toSecond]"]>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SimpleComponent, typeof ComplexComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
}
/****************************************************************************************************
* PARTIAL FILE: multiple_wildcards.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
class Cmp {
}
Cmp.ɵfac = function Cmp_Factory(t) { return new (t || Cmp)(); };
Cmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Cmp, selector: "ng-component", ngImport: i0, template: { source: `
<ng-content></ng-content>
<ng-content select="[spacer]"></ng-content>
<ng-content></ng-content>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Cmp, [{
type: Component,
args: [{
template: `
<ng-content></ng-content>
<ng-content select="[spacer]"></ng-content>
<ng-content></ng-content>
`,
}]
}], null, null); })();
class Module {
}
Module.ɵmod = i0.ɵɵdefineNgModule({ type: Module });
Module.ɵinj = i0.ɵɵdefineInjector({ factory: function Module_Factory(t) { return new (t || Module)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Module, { declarations: [Cmp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Module, [{
type: NgModule,
args: [{ declarations: [Cmp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: multiple_wildcards.d.ts
****************************************************************************************************/
export {};
/****************************************************************************************************
* PARTIAL FILE: nested_template.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
class Cmp {
}
Cmp.ɵfac = function Cmp_Factory(t) { return new (t || Cmp)(); };
Cmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Cmp, selector: "ng-component", ngImport: i0, template: { source: `
<div id="second" *ngIf="visible">
<ng-content SELECT="span[title=toFirst]"></ng-content>
</div>
<div id="third" *ngIf="visible">
No ng-content, no instructions generated.
</div>
<ng-template>
'*' selector: <ng-content></ng-content>
</ng-template>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Cmp, [{
type: Component,
args: [{
template: `
<div id="second" *ngIf="visible">
<ng-content SELECT="span[title=toFirst]"></ng-content>
</div>
<div id="third" *ngIf="visible">
No ng-content, no instructions generated.
</div>
<ng-template>
'*' selector: <ng-content></ng-content>
</ng-template>
`,
}]
}], null, null); })();
class Module {
}
Module.ɵmod = i0.ɵɵdefineNgModule({ type: Module });
Module.ɵinj = i0.ɵɵdefineInjector({ factory: function Module_Factory(t) { return new (t || Module)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Module, { declarations: [Cmp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Module, [{
type: NgModule,
args: [{ declarations: [Cmp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: nested_template.d.ts
****************************************************************************************************/
export {};
/****************************************************************************************************
* PARTIAL FILE: root_and_nested.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
class Cmp {
}
Cmp.ɵfac = function Cmp_Factory(t) { return new (t || Cmp)(); };
Cmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Cmp, selector: "ng-component", ngImport: i0, template: { source: `
<ng-content select="[id=toMainBefore]"></ng-content>
<ng-template>
<ng-content select="[id=toTemplate]"></ng-content>
<ng-template>
<ng-content select="[id=toNestedTemplate]"></ng-content>
</ng-template>
</ng-template>
<ng-template>
'*' selector in a template: <ng-content></ng-content>
</ng-template>
<ng-content select="[id=toMainAfter]"></ng-content>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Cmp, [{
type: Component,
args: [{
template: `
<ng-content select="[id=toMainBefore]"></ng-content>
<ng-template>
<ng-content select="[id=toTemplate]"></ng-content>
<ng-template>
<ng-content select="[id=toNestedTemplate]"></ng-content>
</ng-template>
</ng-template>
<ng-template>
'*' selector in a template: <ng-content></ng-content>
</ng-template>
<ng-content select="[id=toMainAfter]"></ng-content>
`,
}]
}], null, null); })();
class Module {
}
Module.ɵmod = i0.ɵɵdefineNgModule({ type: Module });
Module.ɵinj = i0.ɵɵdefineInjector({ factory: function Module_Factory(t) { return new (t || Module)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Module, { declarations: [Cmp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Module, [{
type: NgModule,
args: [{ declarations: [Cmp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: root_and_nested.d.ts
****************************************************************************************************/
export {};
/****************************************************************************************************
* PARTIAL FILE: ng_project_as_selector.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class SimpleComponent {
}
SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); };
SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '<div><ng-content select="[title]"></ng-content></div>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{
type: Component,
args: [{ selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></div>' }]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [SimpleComponent] }]
}], null, null); })();
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple><h1 ngProjectAs="[title]"></h1></simple>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{ selector: 'my-app', template: '<simple><h1 ngProjectAs="[title]"></h1></simple>' }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: ng_project_as_selector.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SimpleComponent {
static ɵfac: i0.ɵɵFactoryDef<SimpleComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleComponent, "simple", never, {}, {}, never, ["[title]"]>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SimpleComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
}
/****************************************************************************************************
* PARTIAL FILE: ng_project_as_compound_selector.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class SimpleComponent {
}
SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); };
SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '<div><ng-content select="[title]"></ng-content></div>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{
type: Component,
args: [{ selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></div>' }]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SimpleComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [SimpleComponent] }]
}], null, null); })();
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{ selector: 'my-app', template: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>' }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: ng_project_as_compound_selector.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SimpleComponent {
static ɵfac: i0.ɵɵFactoryDef<SimpleComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleComponent, "simple", never, {}, {}, never, ["[title]"]>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof SimpleComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
}
/****************************************************************************************************
* PARTIAL FILE: ng_project_as_attribute.js
****************************************************************************************************/
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
export class MyApp {
constructor() {
this.show = true;
}
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '<div *ngIf="show" ngProjectAs=".someclass"></div>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{ selector: 'my-app', template: '<div *ngIf="show" ngProjectAs=".someclass"></div>' }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: ng_project_as_attribute.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyApp {
show: boolean;
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
}
/****************************************************************************************************
* PARTIAL FILE: ng_content_with_structural_dir.js
****************************************************************************************************/
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
export class SimpleComponent {
}
SimpleComponent.ɵfac = function SimpleComponent_Factory(t) { return new (t || SimpleComponent)(); };
SimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleComponent, selector: "simple", ngImport: i0, template: { source: '<ng-content *ngIf="showContent"></ng-content>', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleComponent, [{
type: Component,
args: [{ selector: 'simple', template: '<ng-content *ngIf="showContent"></ng-content>' }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: ng_content_with_structural_dir.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SimpleComponent {
static ɵfac: i0.ɵɵFactoryDef<SimpleComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleComponent, "simple", never, {}, {}, never, ["*"]>;
}

View File

@ -0,0 +1,129 @@
{
"$schema": "../../../test_case_schema.json",
"cases": [
{
"description": "should support content projection in root template",
"inputFiles": [
"root_template.ts"
],
"expectations": [
{
"failureMessage": "Incorrect SimpleComponent definition",
"files": [
{
"expected": "root_template_simple_def.js",
"generated": "root_template.js"
}
]
},
{
"failureMessage": "Incorrect ComplexComponent definition",
"files": [
{
"expected": "root_template_complex_def.js",
"generated": "root_template.js"
}
]
}
]
},
{
"description": "should support multi-slot content projection with multiple wildcard slots",
"inputFiles": [
"multiple_wildcards.ts"
],
"expectations": [
{
"failureMessage": "Invalid content projection instructions generated",
"files": [
"multiple_wildcards.js"
]
}
]
},
{
"description": "should support content projection in nested templates",
"inputFiles": [
"nested_template.ts"
],
"expectations": [
{
"failureMessage": "Invalid content projection instructions generated",
"files": [
"nested_template.js"
]
}
]
},
{
"description": "should support content projection in both the root and nested templates",
"inputFiles": [
"root_and_nested.ts"
],
"expectations": [
{
"failureMessage": "Invalid content projection instructions generated",
"files": [
"root_and_nested.js"
]
}
]
},
{
"description": "should parse the selector that is passed into ngProjectAs",
"inputFiles": [
"ng_project_as_selector.ts"
],
"expectations": [
{
"failureMessage": "Incorrect SimpleComponent definition",
"files": [
"ng_project_as_selector.js"
]
}
]
},
{
"description": "should take the first selector if multiple values are passed into ngProjectAs",
"inputFiles": [
"ng_project_as_compound_selector.ts"
],
"expectations": [
{
"failureMessage": "Incorrect SimpleComponent definition",
"files": [
"ng_project_as_compound_selector.js"
]
}
]
},
{
"description": "should include parsed ngProjectAs selectors into template attrs",
"inputFiles": [
"ng_project_as_attribute.ts"
],
"expectations": [
{
"failureMessage": "Incorrect MyApp definition",
"files": [
"ng_project_as_attribute.js"
]
}
]
},
{
"description": "should capture the node name of ng-content with a structural directive",
"inputFiles": [
"ng_content_with_structural_dir.ts"
],
"expectations": [
{
"failureMessage": "Incorrect SimpleComponent definition",
"files": [
"ng_content_with_structural_dir.js"
]
}
]
}
]
}

View File

@ -0,0 +1,19 @@
const $c0$ = ["*", [["", "spacer", ""]], "*"];
const $c1$ = ["*", "[spacer]", "*"];
// ...
Cmp.ɵcmp = $r3$.ɵɵdefineComponent({
type: Cmp,
selectors: [["ng-component"]],
ngContentSelectors: $c1$,
decls: 3,
vars: 0,
template: function Cmp_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵprojectionDef($c0$);
i0.ɵɵprojection(0);
i0.ɵɵprojection(1, 1);
i0.ɵɵprojection(2, 2);
}
},
encapsulation: 2
});

View File

@ -0,0 +1,15 @@
import {Component, NgModule} from '@angular/core';
@Component({
template: `
<ng-content></ng-content>
<ng-content select="[spacer]"></ng-content>
<ng-content></ng-content>
`,
})
class Cmp {
}
@NgModule({declarations: [Cmp]})
class Module {
}

View File

@ -0,0 +1,34 @@
function Cmp_div_0_Template(rf, ctx) { if (rf & 1) {
$r3$.ɵɵelementStart(0, "div", 2);
$r3$.ɵɵprojection(1);
$r3$.ɵɵelementEnd();
} }
function Cmp_div_1_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div", 3);
$r3$.ɵɵtext(1, " No ng-content, no instructions generated. ");
$r3$.ɵɵelementEnd();
}
}
function Cmp_ng_template_2_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtext(0, " '*' selector: ");
$r3$.ɵɵprojection(1, 1);
}
}
const $_c4$ = [[["span", "title", "tofirst"]], "*"];
// ...
consts: [["id", "second", __AttributeMarker.Template__, "ngIf"], ["id", "third", __AttributeMarker.Template__, "ngIf"], ["id", "second"], ["id", "third"]],
template: function Cmp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵprojectionDef($_c4$);
$r3$.ɵɵtemplate(0, Cmp_div_0_Template, 2, 0, "div", 0);
$r3$.ɵɵtemplate(1, Cmp_div_1_Template, 2, 0, "div", 1);
$r3$.ɵɵtemplate(2, Cmp_ng_template_2_Template, 2, 0, "ng-template");
}
if (rf & 2) {
$r3$.ɵɵproperty("ngIf", ctx.visible);
$r3$.ɵɵadvance(1);
$r3$.ɵɵproperty("ngIf", ctx.visible);
}
}

View File

@ -0,0 +1,21 @@
import {Component, NgModule} from '@angular/core';
@Component({
template: `
<div id="second" *ngIf="visible">
<ng-content SELECT="span[title=toFirst]"></ng-content>
</div>
<div id="third" *ngIf="visible">
No ng-content, no instructions generated.
</div>
<ng-template>
'*' selector: <ng-content></ng-content>
</ng-template>
`,
})
class Cmp {
}
@NgModule({declarations: [Cmp]})
class Module {
}

View File

@ -0,0 +1,18 @@
SimpleComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: SimpleComponent,
selectors: [["simple"]],
ngContentSelectors: $c0$,
decls: 1,
vars: 1,
consts: [[__AttributeMarker.Template__, "ngIf"]],
template: function SimpleComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵtemplate(0, SimpleComponent_ng_content_0_Template, 1, 0, "ng-content", 0);
}
if (rf & 2) {
i0.ɵɵproperty("ngIf", ctx.showContent);
}
},
encapsulation: 2
});

View File

@ -0,0 +1,5 @@
import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
@Component({selector: 'simple', template: '<ng-content *ngIf="showContent"></ng-content>'})
export class SimpleComponent {
}

View File

@ -0,0 +1,21 @@
MyApp.ɵcmp = i0.ɵɵdefineComponent({
type: MyApp,
selectors: [
["my-app"]
],
decls: 1,
vars: 1,
consts: [
["ngProjectAs", ".someclass", __AttributeMarker.ProjectAs__, ["", 8, "someclass"], __AttributeMarker.Template__, "ngIf"],
["ngProjectAs", ".someclass", __AttributeMarker.ProjectAs__, ["", 8, "someclass"]]
],
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵtemplate(0, MyApp_div_0_Template, 1, 0, "div", 0);
}
if (rf & 2) {
i0.ɵɵproperty("ngIf", ctx.show);
}
},
encapsulation: 2
});

View File

@ -0,0 +1,6 @@
import {Component} from '@angular/core';
@Component({selector: 'my-app', template: '<div *ngIf="show" ngProjectAs=".someclass"></div>'})
export class MyApp {
show = true;
}

View File

@ -0,0 +1,20 @@
// NOTE: the c0 and c1 constants aren't being used in this particular test,
// NOTE: but they are used in some of the logic that is folded under the ellipsis.
const $_c0$ = [[["", "title", ""]]];
const $_c1$ = ["[title]"];
// ...
MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp,
selectors: [["my-app"]],
decls: 2,
vars: 0,
consts: [["ngProjectAs", "[title],[header]", 5, ["", "title", ""]]],
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "simple");
$r3$.ɵɵelement(1, "h1", 0);
$r3$.ɵɵelementEnd();
}
},
encapsulation: 2
})

View File

@ -0,0 +1,14 @@
import {Component, NgModule} from '@angular/core';
@Component({selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></div>'})
export class SimpleComponent {
}
@NgModule({declarations: [SimpleComponent]})
export class MyModule {
}
@Component(
{selector: 'my-app', template: '<simple><h1 ngProjectAs="[title],[header]"></h1></simple>'})
export class MyApp {
}

View File

@ -0,0 +1,18 @@
const $_c0$ = [[["", "title", ""]]];
const $_c1$ = ["[title]"];
// ...
MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp,
selectors: [["my-app"]],
decls: 2,
vars: 0,
consts: [["ngProjectAs", "[title]", 5, ["", "title", ""]]],
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "simple");
$r3$.ɵɵelement(1, "h1", 0);
$r3$.ɵɵelementEnd();
}
},
encapsulation: 2
})

View File

@ -0,0 +1,13 @@
import {Component, NgModule} from '@angular/core';
@Component({selector: 'simple', template: '<div><ng-content select="[title]"></ng-content></div>'})
export class SimpleComponent {
}
@NgModule({declarations: [SimpleComponent]})
export class MyModule {
}
@Component({selector: 'my-app', template: '<simple><h1 ngProjectAs="[title]"></h1></simple>'})
export class MyApp {
}

View File

@ -0,0 +1,29 @@
function Cmp_ng_template_1_ng_template_1_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵprojection(0, 3);
}
}
function Cmp_ng_template_1_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵprojection(0, 2);
$r3$.ɵɵtemplate(1, Cmp_ng_template_1_ng_template_1_Template, 1, 0, "ng-template");
}
}
function Cmp_ng_template_2_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtext(0, " '*' selector in a template: ");
$r3$.ɵɵprojection(1, 4);
}
}
const $_c0$ = [[["", "id", "tomainbefore"]], [["", "id", "tomainafter"]], [["", "id", "totemplate"]], [["", "id", "tonestedtemplate"]], "*"];
const $_c1$ = ["[id=toMainBefore]", "[id=toMainAfter]", "[id=toTemplate]", "[id=toNestedTemplate]", "*"];
// ...
template: function Cmp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵprojectionDef($_c0$);
$r3$.ɵɵprojection(0);
$r3$.ɵɵtemplate(1, Cmp_ng_template_1_Template, 2, 0, "ng-template");
$r3$.ɵɵtemplate(2, Cmp_ng_template_2_Template, 2, 0, "ng-template");
$r3$.ɵɵprojection(3, 1);
}
}

View File

@ -0,0 +1,23 @@
import {Component, NgModule} from '@angular/core';
@Component({
template: `
<ng-content select="[id=toMainBefore]"></ng-content>
<ng-template>
<ng-content select="[id=toTemplate]"></ng-content>
<ng-template>
<ng-content select="[id=toNestedTemplate]"></ng-content>
</ng-template>
</ng-template>
<ng-template>
'*' selector in a template: <ng-content></ng-content>
</ng-template>
<ng-content select="[id=toMainAfter]"></ng-content>
`,
})
class Cmp {
}
@NgModule({declarations: [Cmp]})
class Module {
}

View File

@ -0,0 +1,22 @@
import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
@Component({selector: 'simple', template: '<div><ng-content></ng-content></div>'})
export class SimpleComponent {
}
@Component({
selector: 'complex',
template: `
<div id="first"><ng-content select="span[title=toFirst]"></ng-content></div>
<div id="second"><ng-content SELECT="span[title=toSecond]"></ng-content></div>`
})
export class ComplexComponent {
}
@NgModule({declarations: [SimpleComponent, ComplexComponent]})
export class MyModule {
}
@Component({selector: 'my-app', template: '<simple>content</simple> <complex></complex>'})
export class MyApp {
}

View File

@ -0,0 +1,22 @@
const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]];
// ...
ComplexComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ComplexComponent,
selectors: [["complex"]],
ngContentSelectors: $c2$,
decls: 4,
vars: 0,
consts: [["id","first"], ["id","second"]],
template: function ComplexComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵprojectionDef($c1$);
$r3$.ɵɵelementStart(0, "div", 0);
$r3$.ɵɵprojection(1);
$r3$.ɵɵelementEnd();
$r3$.ɵɵelementStart(2, "div", 1);
$r3$.ɵɵprojection(3, 1);
$r3$.ɵɵelementEnd();
}
},
encapsulation: 2
});

View File

@ -0,0 +1,16 @@
SimpleComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: SimpleComponent,
selectors: [["simple"]],
ngContentSelectors: $c0$,
decls: 2,
vars: 0,
template: function SimpleComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵprojectionDef();
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵprojection(1);
$r3$.ɵɵelementEnd();
}
},
encapsulation: 2
});

View File

@ -0,0 +1,6 @@
(function() {
i0.ɵsetClassMetadata(Comp, [{
type: Component,
args: [{
template: '',
providers: [{ provide: token, useExisting: Comp }]

View File

@ -0,0 +1,15 @@
import {Component, InjectionToken} from '@angular/core';
const token = new InjectionToken('token');
export function Custom() {
return function(target: any) {};
}
@Custom()
@Component({
template: '',
providers: [{provide: token, useExisting: Comp}],
})
export class Comp {
}

View File

@ -0,0 +1,5 @@
SomeDirective.ɵdir = $r3$.ɵɵdefineDirective({
type: SomeDirective,
selectors: [["", "some-directive", ""]],
exportAs: ["someDir", "otherDir"]
});

View File

@ -0,0 +1,9 @@
import {Directive, NgModule} from '@angular/core';
@Directive({selector: '[some-directive]', exportAs: 'someDir, otherDir'})
export class SomeDirective {
}
@NgModule({declarations: [SomeDirective]})
export class MyModule {
}

View File

@ -0,0 +1,3 @@
// ...
directives: function () { return [MyForwardDirective]; }
// ...

View File

@ -0,0 +1,18 @@
import {Component, Directive, NgModule} from '@angular/core';
@Component({
selector: 'host-binding-comp',
template: `
<my-forward-directive></my-forward-directive>
`
})
export class HostBindingComp {
}
@Directive({selector: 'my-forward-directive'})
class MyForwardDirective {
}
@NgModule({declarations: [HostBindingComp, MyForwardDirective]})
export class MyModule {
}

View File

@ -0,0 +1,3 @@
// ...
pipes: function () { return [MyForwardPipe]; }
// ...

View File

@ -0,0 +1,18 @@
import {Component, NgModule, Pipe} from '@angular/core';
@Component({
selector: 'host-binding-comp',
template: `
<div [attr.style]="{} | my_forward_pipe">...</div>
`
})
export class HostBindingComp {
}
@Pipe({name: 'my_forward_pipe'})
class MyForwardPipe {
}
@NgModule({declarations: [HostBindingComp, MyForwardPipe]})
export class MyModule {
}

View File

@ -0,0 +1,259 @@
/****************************************************************************************************
* PARTIAL FILE: local_reference.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class MyComponent {
}
MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: '<input #user>Hello {{user.value}}!', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
type: Component,
args: [{ selector: 'my-component', template: '<input #user>Hello {{user.value}}!' }]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: local_reference.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyComponent {
static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: local_reference_nested.js
****************************************************************************************************/
import { Component, Directive, NgModule, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
export class IfDirective {
constructor(template) { }
}
IfDirective.ɵfac = function IfDirective_Factory(t) { return new (t || IfDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
IfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: IfDirective, selector: "[if]", ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(IfDirective, [{
type: Directive,
args: [{ selector: '[if]' }]
}], function () { return [{ type: i0.TemplateRef }]; }, null); })();
export class MyComponent {
}
MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
<div #foo></div>
{{foo}}
<div *if>
{{foo}}-{{bar}}
<span *if>{{foo}}-{{bar}}-{{baz}}</span>
<span #bar></span>
</div>
<div #baz></div>
`, isInline: true }, directives: [{ type: IfDirective, selector: "[if]" }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
type: Component,
args: [{
selector: 'my-component',
template: `
<div #foo></div>
{{foo}}
<div *if>
{{foo}}-{{bar}}
<span *if>{{foo}}-{{bar}}-{{baz}}</span>
<span #bar></span>
</div>
<div #baz></div>
`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [IfDirective, MyComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [IfDirective, MyComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: local_reference_nested.d.ts
****************************************************************************************************/
import { TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
export declare class IfDirective {
constructor(template: TemplateRef<any>);
static ɵfac: i0.ɵɵFactoryDef<IfDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<IfDirective, "[if]", never, {}, {}, never>;
}
export declare class MyComponent {
static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof IfDirective, typeof MyComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: local_reference_and_context_variables.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class MyComponent {
}
MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
<div *ngFor="let item of items">
<div #foo></div>
<span *ngIf="showing">
{{ foo }} - {{ item }}
</span>
</div>`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
type: Component,
args: [{
selector: 'my-component',
template: `
<div *ngFor="let item of items">
<div #foo></div>
<span *ngIf="showing">
{{ foo }} - {{ item }}
</span>
</div>`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: local_reference_and_context_variables.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyComponent {
static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: lifecycle_hooks.js
****************************************************************************************************/
import { Component, Input, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
let events = [];
export class LifecycleComp {
ngOnChanges() {
events.push('changes' + this.nameMin);
}
ngOnInit() {
events.push('init' + this.nameMin);
}
ngDoCheck() {
events.push('check' + this.nameMin);
}
ngAfterContentInit() {
events.push('content init' + this.nameMin);
}
ngAfterContentChecked() {
events.push('content check' + this.nameMin);
}
ngAfterViewInit() {
events.push('view init' + this.nameMin);
}
ngAfterViewChecked() {
events.push('view check' + this.nameMin);
}
ngOnDestroy() {
events.push(this.nameMin);
}
}
LifecycleComp.ɵfac = function LifecycleComp_Factory(t) { return new (t || LifecycleComp)(); };
LifecycleComp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: LifecycleComp, selector: "lifecycle-comp", inputs: { nameMin: ["name", "nameMin"] }, usesOnChanges: true, ngImport: i0, template: { source: '', isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(LifecycleComp, [{
type: Component,
args: [{ selector: 'lifecycle-comp', template: '' }]
}], null, { nameMin: [{
type: Input,
args: ['name']
}] }); })();
export class SimpleLayout {
constructor() {
this.name1 = '1';
this.name2 = '2';
}
}
SimpleLayout.ɵfac = function SimpleLayout_Factory(t) { return new (t || SimpleLayout)(); };
SimpleLayout.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: SimpleLayout, selector: "simple-layout", ngImport: i0, template: { source: `
<lifecycle-comp [name]="name1"></lifecycle-comp>
<lifecycle-comp [name]="name2"></lifecycle-comp>
`, isInline: true }, directives: [{ type: LifecycleComp, selector: "lifecycle-comp", inputs: ["name"] }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SimpleLayout, [{
type: Component,
args: [{
selector: 'simple-layout',
template: `
<lifecycle-comp [name]="name1"></lifecycle-comp>
<lifecycle-comp [name]="name2"></lifecycle-comp>
`
}]
}], null, null); })();
export class LifecycleModule {
}
LifecycleModule.ɵmod = i0.ɵɵdefineNgModule({ type: LifecycleModule });
LifecycleModule.ɵinj = i0.ɵɵdefineInjector({ factory: function LifecycleModule_Factory(t) { return new (t || LifecycleModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LifecycleModule, { declarations: [LifecycleComp, SimpleLayout] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(LifecycleModule, [{
type: NgModule,
args: [{ declarations: [LifecycleComp, SimpleLayout] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: lifecycle_hooks.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class LifecycleComp {
nameMin: string;
ngOnChanges(): void;
ngOnInit(): void;
ngDoCheck(): void;
ngAfterContentInit(): void;
ngAfterContentChecked(): void;
ngAfterViewInit(): void;
ngAfterViewChecked(): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDef<LifecycleComp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<LifecycleComp, "lifecycle-comp", never, { "nameMin": "name"; }, {}, never, never>;
}
export declare class SimpleLayout {
name1: string;
name2: string;
static ɵfac: i0.ɵɵFactoryDef<SimpleLayout, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<SimpleLayout, "simple-layout", never, {}, {}, never, never>;
}
export declare class LifecycleModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<LifecycleModule, [typeof LifecycleComp, typeof SimpleLayout], never, never>;
static ɵinj: i0.ɵɵInjectorDef<LifecycleModule>;
}

View File

@ -0,0 +1,73 @@
{
"$schema": "../../../test_case_schema.json",
"cases": [
{
"description": "local reference",
"inputFiles": [
"local_reference.ts"
],
"expectations": [
{
"failureMessage": "Incorrect MyComponent.ɵcmp",
"files": [
"local_reference.js"
]
}
]
},
{
"description": "local references in nested views",
"inputFiles": [
"local_reference_nested.ts"
],
"expectations": [
{
"failureMessage": "Incorrect MyComponent.ɵcmp",
"files": [
"local_reference_nested.js"
]
}
]
},
{
"description": "should support local refs mixed with context assignments",
"inputFiles": [
"local_reference_and_context_variables.ts"
],
"expectations": [
{
"failureMessage": "Incorrect template",
"files": [
"local_reference_and_context_variables.js"
]
}
]
},
{
"description": "should gen hooks with a few simple components",
"inputFiles": [
"lifecycle_hooks.ts"
],
"expectations": [
{
"failureMessage": "Invalid LifecycleComp definition",
"files": [
{
"expected": "lifecycle_hooks_lifecycle_comp_def.js",
"generated": "lifecycle_hooks.js"
}
]
},
{
"failureMessage": "Invalid SimpleLayout definition",
"files": [
{
"expected": "lifecycle_hooks_simple_layout_def.js",
"generated": "lifecycle_hooks.js"
}
]
}
]
}
]
}

View File

@ -0,0 +1,53 @@
import {Component, Input, NgModule} from '@angular/core';
let events: string[] = [];
@Component({selector: 'lifecycle-comp', template: ''})
export class LifecycleComp {
@Input('name') nameMin!: string;
ngOnChanges() {
events.push('changes' + this.nameMin);
}
ngOnInit() {
events.push('init' + this.nameMin);
}
ngDoCheck() {
events.push('check' + this.nameMin);
}
ngAfterContentInit() {
events.push('content init' + this.nameMin);
}
ngAfterContentChecked() {
events.push('content check' + this.nameMin);
}
ngAfterViewInit() {
events.push('view init' + this.nameMin);
}
ngAfterViewChecked() {
events.push('view check' + this.nameMin);
}
ngOnDestroy() {
events.push(this.nameMin);
}
}
@Component({
selector: 'simple-layout',
template: `
<lifecycle-comp [name]="name1"></lifecycle-comp>
<lifecycle-comp [name]="name2"></lifecycle-comp>
`
})
export class SimpleLayout {
name1 = '1';
name2 = '2';
}
@NgModule({declarations: [LifecycleComp, SimpleLayout]})
export class LifecycleModule {
}

View File

@ -0,0 +1,10 @@
LifecycleComp.ɵcmp = $r3$.ɵɵdefineComponent({
type: LifecycleComp,
selectors: [["lifecycle-comp"]],
inputs: {nameMin: ["name", "nameMin"]},
features: [$r3$.ɵɵNgOnChangesFeature],
decls: 0,
vars: 0,
template: function LifecycleComp_Template(rf, ctx) {},
encapsulation: 2
});

View File

@ -0,0 +1,20 @@
SimpleLayout.ɵcmp = $r3$.ɵɵdefineComponent({
type: SimpleLayout,
selectors: [["simple-layout"]],
decls: 2,
vars: 2,
consts: [[__AttributeMarker.Bindings__, "name"]],
template: function SimpleLayout_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "lifecycle-comp", 0);
$r3$.ɵɵelement(1, "lifecycle-comp", 0);
}
if (rf & 2) {
$r3$.ɵɵproperty("name", ctx.name1);
$r3$.ɵɵadvance(1);
$r3$.ɵɵproperty("name", ctx.name2);
}
},
directives: [LifecycleComp],
encapsulation: 2
});

View File

@ -0,0 +1,20 @@
// ...
MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent,
selectors: [["my-component"]],
decls: 3,
vars: 1,
consts: [["user", ""]],
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "input", null, 0);
$r3$.ɵɵtext(2);
}
if (rf & 2) {
const $user$ = $r3$.ɵɵreference(1);
$r3$.ɵɵadvance(2);
$r3$.ɵɵtextInterpolate1("Hello ", $user$.value, "!");
}
},
encapsulation: 2
});

View File

@ -0,0 +1,9 @@
import {Component, NgModule} from '@angular/core';
@Component({selector: 'my-component', template: '<input #user>Hello {{user.value}}!'})
export class MyComponent {
}
@NgModule({declarations: [MyComponent]})
export class MyModule {
}

View File

@ -0,0 +1,38 @@
function MyComponent_div_0_span_3_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "span");
$i0$.ɵɵtext(1);
$i0$.ɵɵelementEnd();
}
if (rf & 2) {
const $item$ = $i0$.ɵɵnextContext().$implicit;
const $foo$ = $i0$.ɵɵreference(2);
$r3$.ɵɵadvance(1);
$i0$.ɵɵtextInterpolate2(" ", $foo$, " - ", $item$, " ");
}
}
function MyComponent_div_0_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "div");
$i0$.ɵɵelement(1, "div", null, 1);
$i0$.ɵɵtemplate(3, MyComponent_div_0_span_3_Template, 2, 2, "span", 2);
$i0$.ɵɵelementEnd();
}
if (rf & 2) {
const $app$ = $i0$.ɵɵnextContext();
$r3$.ɵɵadvance(3);
$i0$.ɵɵproperty("ngIf", $app$.showing);
}
}
// ...
consts: [[__AttributeMarker.Template__, "ngFor", "ngForOf"], ["foo", ""], [__AttributeMarker.Template__, "ngIf"]],
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 4, 1, "div", 0);
}
if (rf & 2) {
$i0$.ɵɵproperty("ngForOf", ctx.items);
}
}

View File

@ -0,0 +1,18 @@
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div *ngFor="let item of items">
<div #foo></div>
<span *ngIf="showing">
{{ foo }} - {{ item }}
</span>
</div>`
})
export class MyComponent {
}
@NgModule({declarations: [MyComponent]})
export class MyModule {
}

View File

@ -0,0 +1,55 @@
function MyComponent_div_3_span_2_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "span");
$r3$.ɵɵtext(1);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵnextContext();
const $bar$ = $r3$.ɵɵreference(4);
$r3$.ɵɵnextContext();
const $foo$ = $r3$.ɵɵreference(1);
const $baz$ = $r3$.ɵɵreference(5);
$r3$.ɵɵadvance(1);
$r3$.ɵɵtextInterpolate3("", $foo$, "-", $bar$, "-", $baz$, "");
}
}
function MyComponent_div_3_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵtext(1);
$r3$.ɵɵtemplate(2, MyComponent_div_3_span_2_Template, 2, 3, "span", 1);
$r3$.ɵɵelement(3, "span", null, 3);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
const $bar$ = $r3$.ɵɵreference(4);
$r3$.ɵɵnextContext();
const $foo$ = $r3$.ɵɵreference(1);
$r3$.ɵɵadvance(1);
$r3$.ɵɵtextInterpolate2(" ", $foo$, "-", $bar$, " ");
}
}
// ...
MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent,
selectors: [["my-component"]],
decls: 6,
vars: 1,
consts: [["foo", ""], [__AttributeMarker.Template__, "if"], ["baz", ""], ["bar", ""]],
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "div", null, 0);
$r3$.ɵɵtext(2);
$r3$.ɵɵtemplate(3, MyComponent_div_3_Template, 5, 2, "div", 1);
$r3$.ɵɵelement(4, "div", null, 2);
}
if (rf & 2) {
const $foo$ = $r3$.ɵɵreference(1);
$r3$.ɵɵadvance(2);
$r3$.ɵɵtextInterpolate1(" ", $foo$, " ");
}
},
directives:[IfDirective],
encapsulation: 2
});

View File

@ -0,0 +1,26 @@
import {Component, Directive, NgModule, TemplateRef} from '@angular/core';
@Directive({selector: '[if]'})
export class IfDirective {
constructor(template: TemplateRef<any>) {}
}
@Component({
selector: 'my-component',
template: `
<div #foo></div>
{{foo}}
<div *if>
{{foo}}-{{bar}}
<span *if>{{foo}}-{{bar}}-{{baz}}</span>
<span #bar></span>
</div>
<div #baz></div>
`
})
export class MyComponent {
}
@NgModule({declarations: [IfDirective, MyComponent]})
export class MyModule {
}

View File

@ -0,0 +1,15 @@
function MyComponent_ng_template_0_Template(rf, ctx) {}
// ...
MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent,
selectors: [["my-app"]],
decls: 1,
vars: 0,
consts: [[__AttributeMarker.Bindings__, "id"]],
template: function MyComponent_Template(rf, $ctx$) {
if (rf & 1) {
$r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
}
},
encapsulation: 2
});

View File

@ -0,0 +1,9 @@
import {Component, NgModule} from '@angular/core';
@Component({selector: 'my-app', template: '<ng-template [id]=""></ng-template>'})
export class MyComponent {
}
@NgModule({declarations: [MyComponent]})
export class MyModule {
}

View File

@ -0,0 +1,3 @@
AbstractDirective.ɵdir = $r3$.ɵɵdefineDirective({
type: AbstractDirective
});

View File

@ -0,0 +1,5 @@
import {Directive} from '@angular/core';
@Directive()
export class AbstractDirective {
}

View File

@ -0,0 +1,23 @@
const $c0$ = function () { return { foo: null }; };
const $c1$ = function () { return {}; };
const $c2$ = function (a0) { return { foo: a0 }; };
// ...
MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp,
selectors: [["ng-component"]],
decls: 2,
vars: 6,
consts: [[__AttributeMarker.Bindings__, "dir"]],
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "div", 0);
$r3$.ɵɵelement(1, "div", 0);
}
if (rf & 2) {
$r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction0(2, $c0$));
$r3$.ɵɵadvance(1);
$r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction1(4, $c2$, $r3$.ɵɵpureFunction0(3, $c1$)));
}
},
encapsulation: 2
});

View File

@ -0,0 +1,14 @@
import {Component, NgModule} from '@angular/core';
@Component({
template: `
<div [dir]="{foo: null}"></div>
<div [dir]="{foo: {}}"></div>
`
})
export class MyApp {
}
@NgModule({declarations: [MyApp]})
export class MyModule {
}

View File

@ -0,0 +1,22 @@
const $c0$ = function () { return { foo: null }; };
const $c1$ = function (a0) { return { foo: a0 }; };
// ...
MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp,
selectors: [["ng-component"]],
decls: 2,
vars: 5,
consts: [[__AttributeMarker.Bindings__, "dir"]],
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "div", 0);
$r3$.ɵɵelement(1, "div", 0);
}
if (rf & 2) {
$r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction0(2, $c0$));
$r3$.ɵɵadvance(1);
$r3$.ɵɵproperty("dir", $r3$.ɵɵpureFunction1(3, $c1$, ctx.getFoo()));
}
},
encapsulation: 2
});

View File

@ -0,0 +1,17 @@
import {Component, NgModule} from '@angular/core';
@Component({
template: `
<div [dir]="{foo: null}"></div>
<div [dir]="{foo: getFoo()}"></div>
`
})
export class MyApp {
getFoo() {
return 'foo!';
}
}
@NgModule({declarations: [MyApp]})
export class MyModule {
}

View File

@ -0,0 +1,220 @@
/****************************************************************************************************
* PARTIAL FILE: pipes.js
****************************************************************************************************/
import { Component, NgModule, Pipe } from '@angular/core';
import * as i0 from "@angular/core";
export class MyPipe {
transform(value, ...args) {
return value;
}
ngOnDestroy() { }
}
MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(); };
MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: false });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPipe, [{
type: Pipe,
args: [{ name: 'myPipe', pure: false }]
}], null, null); })();
export class MyPurePipe {
transform(value, ...args) {
return value;
}
}
MyPurePipe.ɵfac = function MyPurePipe_Factory(t) { return new (t || MyPurePipe)(); };
MyPurePipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPurePipe", type: MyPurePipe, pure: true });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPurePipe, [{
type: Pipe,
args: [{
name: 'myPurePipe',
pure: true,
}]
}], null, null); })();
export class MyApp {
constructor() {
this.name = 'World';
this.size = 0;
}
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '{{name | myPipe:size | myPurePipe:size }}<p>{{ name | myPipe:1:2:3:4:5 }} {{ name ? 1 : 2 | myPipe }}</p>', isInline: true }, pipes: { "myPurePipe": MyPurePipe, "myPipe": MyPipe } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{
selector: 'my-app',
template: '{{name | myPipe:size | myPurePipe:size }}<p>{{ name | myPipe:1:2:3:4:5 }} {{ name ? 1 : 2 | myPipe }}</p>'
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyPipe, MyPurePipe, MyApp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyPipe, MyPurePipe, MyApp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: pipes.d.ts
****************************************************************************************************/
import { OnDestroy, PipeTransform } from '@angular/core';
import * as i0 from "@angular/core";
export declare class MyPipe implements PipeTransform, OnDestroy {
transform(value: any, ...args: any[]): any;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDef<MyPipe, never>;
static ɵpipe: i0.ɵɵPipeDefWithMeta<MyPipe, "myPipe">;
}
export declare class MyPurePipe implements PipeTransform {
transform(value: any, ...args: any[]): any;
static ɵfac: i0.ɵɵFactoryDef<MyPurePipe, never>;
static ɵpipe: i0.ɵɵPipeDefWithMeta<MyPurePipe, "myPurePipe">;
}
export declare class MyApp {
name: string;
size: number;
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyPipe, typeof MyPurePipe, typeof MyApp], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: pipe_invocation.js
****************************************************************************************************/
import { Component, NgModule, Pipe } from '@angular/core';
import * as i0 from "@angular/core";
export class MyPipe {
transform(value, ...args) {
return value;
}
ngOnDestroy() { }
}
MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(); };
MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: false });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPipe, [{
type: Pipe,
args: [{ name: 'myPipe', pure: false }]
}], null, null); })();
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '0:{{name | myPipe}}1:{{name | myPipe:1}}2:{{name | myPipe:1:2}}3:{{name | myPipe:1:2:3}}4:{{name | myPipe:1:2:3:4}}', isInline: true }, pipes: { "myPipe": MyPipe } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{
selector: 'my-app',
template: '0:{{name | myPipe}}1:{{name | myPipe:1}}2:{{name | myPipe:1:2}}3:{{name | myPipe:1:2:3}}4:{{name | myPipe:1:2:3:4}}'
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyPipe, MyApp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyPipe, MyApp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: pipe_invocation.d.ts
****************************************************************************************************/
import { OnDestroy, PipeTransform } from '@angular/core';
import * as i0 from "@angular/core";
export declare class MyPipe implements PipeTransform, OnDestroy {
transform(value: any, ...args: any[]): any;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDef<MyPipe, never>;
static ɵpipe: i0.ɵɵPipeDefWithMeta<MyPipe, "myPipe">;
}
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyPipe, typeof MyApp], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: pipe_di_change_detector_ref.js
****************************************************************************************************/
import { ChangeDetectorRef, Component, NgModule, Optional, Pipe } from '@angular/core';
import * as i0 from "@angular/core";
export class MyPipe {
constructor(changeDetectorRef) { }
transform(value, ...args) {
return value;
}
}
MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(i0.ɵɵinjectPipeChangeDetectorRef()); };
MyPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myPipe", type: MyPipe, pure: true });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyPipe, [{
type: Pipe,
args: [{ name: 'myPipe' }]
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, null); })();
export class MyOtherPipe {
constructor(changeDetectorRef) { }
transform(value, ...args) {
return value;
}
}
MyOtherPipe.ɵfac = function MyOtherPipe_Factory(t) { return new (t || MyOtherPipe)(i0.ɵɵinjectPipeChangeDetectorRef(8)); };
MyOtherPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "myOtherPipe", type: MyOtherPipe, pure: true });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyOtherPipe, [{
type: Pipe,
args: [{ name: 'myOtherPipe' }]
}], function () { return [{ type: i0.ChangeDetectorRef, decorators: [{
type: Optional
}] }]; }, null); })();
export class MyApp {
constructor() {
this.name = 'World';
}
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: '{{name | myPipe }}<p>{{ name | myOtherPipe }}</p>', isInline: true }, pipes: { "myPipe": MyPipe, "myOtherPipe": MyOtherPipe } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{ selector: 'my-app', template: '{{name | myPipe }}<p>{{ name | myOtherPipe }}</p>' }]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyPipe, MyOtherPipe, MyApp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyPipe, MyOtherPipe, MyApp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: pipe_di_change_detector_ref.d.ts
****************************************************************************************************/
import { ChangeDetectorRef, PipeTransform } from '@angular/core';
import * as i0 from "@angular/core";
export declare class MyPipe implements PipeTransform {
constructor(changeDetectorRef: ChangeDetectorRef);
transform(value: any, ...args: any[]): any;
static ɵfac: i0.ɵɵFactoryDef<MyPipe, never>;
static ɵpipe: i0.ɵɵPipeDefWithMeta<MyPipe, "myPipe">;
}
export declare class MyOtherPipe implements PipeTransform {
constructor(changeDetectorRef: ChangeDetectorRef);
transform(value: any, ...args: any[]): any;
static ɵfac: i0.ɵɵFactoryDef<MyOtherPipe, [{ optional: true; }]>;
static ɵpipe: i0.ɵɵPipeDefWithMeta<MyOtherPipe, "myOtherPipe">;
}
export declare class MyApp {
name: string;
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyPipe, typeof MyOtherPipe, typeof MyApp], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}

View File

@ -0,0 +1,116 @@
{
"$schema": "../../../test_case_schema.json",
"cases": [
{
"description": "should render pipes",
"inputFiles": [
"pipes.ts"
],
"expectations": [
{
"failureMessage": "Invalid pipe definition",
"files": [
{
"expected": "pipes_my_pipe_def.js",
"generated": "pipes.js"
}
]
},
{
"failureMessage": "Invalid pipe factory function",
"files": [
{
"expected": "pipes_my_pipe_fac.js",
"generated": "pipes.js"
}
]
},
{
"failureMessage": "Invalid pure pipe definition",
"files": [
{
"expected": "pipes_my_pure_pipe_def.js",
"generated": "pipes.js"
}
]
},
{
"failureMessage": "Invalid pure pipe factory function",
"files": [
{
"expected": "pipes_my_pure_pipe_fac.js",
"generated": "pipes.js"
}
]
},
{
"failureMessage": "Invalid MyApp definition",
"files": [
{
"expected": "pipes_my_app_def.js",
"generated": "pipes.js"
}
]
}
]
},
{
"description": "should use appropriate function for a given no of pipe arguments",
"inputFiles": [
"pipe_invocation.ts"
],
"expectations": [
{
"failureMessage": "Invalid MyApp definition",
"files": [
"pipe_invocation.js"
]
}
]
},
{
"description": "should generate the proper instruction when injecting ChangeDetectorRef into a pipe",
"inputFiles": [
"pipe_di_change_detector_ref.ts"
],
"expectations": [
{
"failureMessage": "Invalid pipe definition",
"files": [
{
"expected": "pipe_di_change_detector_ref_my_pipe_def.js",
"generated": "pipe_di_change_detector_ref.js"
}
]
},
{
"failureMessage": "Invalid pipe factory function",
"files": [
{
"expected": "pipe_di_change_detector_ref_my_pipe_fac.js",
"generated": "pipe_di_change_detector_ref.js"
}
]
},
{
"failureMessage": "Invalid alternate pipe definition",
"files": [
{
"expected": "pipe_di_change_detector_ref_my_other_pipe_def.js",
"generated": "pipe_di_change_detector_ref.js"
}
]
},
{
"failureMessage": "Invalid alternate pipe factory function",
"files": [
{
"expected": "pipe_di_change_detector_ref_my_other_pipe_fac.js",
"generated": "pipe_di_change_detector_ref.js"
}
]
}
]
}
]
}

View File

@ -0,0 +1,28 @@
import {ChangeDetectorRef, Component, NgModule, Optional, Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'myPipe'})
export class MyPipe implements PipeTransform {
constructor(changeDetectorRef: ChangeDetectorRef) {}
transform(value: any, ...args: any[]) {
return value;
}
}
@Pipe({name: 'myOtherPipe'})
export class MyOtherPipe implements PipeTransform {
constructor(@Optional() changeDetectorRef: ChangeDetectorRef) {}
transform(value: any, ...args: any[]) {
return value;
}
}
@Component({selector: 'my-app', template: '{{name | myPipe }}<p>{{ name | myOtherPipe }}</p>'})
export class MyApp {
name = 'World';
}
@NgModule({declarations: [MyPipe, MyOtherPipe, MyApp]})
export class MyModule {
}

View File

@ -0,0 +1,5 @@
MyOtherPipe.ɵpipe = $r3$.ɵɵdefinePipe({
name: "myOtherPipe",
type: MyOtherPipe,
pure: true
});

View File

@ -0,0 +1 @@
MyOtherPipe.ɵfac = function MyOtherPipe_Factory(t) { return new (t || MyOtherPipe)($r3$.ɵɵinjectPipeChangeDetectorRef(8)); };

View File

@ -0,0 +1,5 @@
MyPipe.ɵpipe = $r3$.ɵɵdefinePipe({
name: "myPipe",
type: MyPipe,
pure: true
});

View File

@ -0,0 +1 @@
MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)($r3$.ɵɵinjectPipeChangeDetectorRef()); };

View File

@ -0,0 +1,29 @@
// ...
MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp,
selectors: [["my-app"]],
decls: 6,
vars: 27,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtext(0);
$r3$.ɵɵpipe(1, "myPipe");
$r3$.ɵɵpipe(2, "myPipe");
$r3$.ɵɵpipe(3, "myPipe");
$r3$.ɵɵpipe(4, "myPipe");
$r3$.ɵɵpipe(5, "myPipe");
}
if (rf & 2) {
$r3$.ɵɵtextInterpolate5(
"0:", i0.ɵɵpipeBind1(1, 5, ctx.name),
"1:", i0.ɵɵpipeBind2(2, 7, ctx.name, 1),
"2:", i0.ɵɵpipeBind3(3, 10, ctx.name, 1, 2),
"3:", i0.ɵɵpipeBind4(4, 14, ctx.name, 1, 2, 3),
"4:", i0.ɵɵpipeBindV(5, 19, $r3$.ɵɵpureFunction1(25, $c0$, ctx.name)),
""
);
}
},
pipes: [MyPipe],
encapsulation: 2
});

View File

@ -0,0 +1,21 @@
import {Component, NgModule, OnDestroy, Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'myPipe', pure: false})
export class MyPipe implements PipeTransform, OnDestroy {
transform(value: any, ...args: any[]) {
return value;
}
ngOnDestroy(): void {}
}
@Component({
selector: 'my-app',
template:
'0:{{name | myPipe}}1:{{name | myPipe:1}}2:{{name | myPipe:1:2}}3:{{name | myPipe:1:2:3}}4:{{name | myPipe:1:2:3:4}}'
})
export class MyApp {
}
@NgModule({declarations: [MyPipe, MyApp]})
export class MyModule {
}

View File

@ -0,0 +1,33 @@
import {Component, NgModule, OnDestroy, Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'myPipe', pure: false})
export class MyPipe implements PipeTransform, OnDestroy {
transform(value: any, ...args: any[]) {
return value;
}
ngOnDestroy(): void {}
}
@Pipe({
name: 'myPurePipe',
pure: true,
})
export class MyPurePipe implements PipeTransform {
transform(value: any, ...args: any[]) {
return value;
}
}
@Component({
selector: 'my-app',
template:
'{{name | myPipe:size | myPurePipe:size }}<p>{{ name | myPipe:1:2:3:4:5 }} {{ name ? 1 : 2 | myPipe }}</p>'
})
export class MyApp {
name = 'World';
size = 0;
}
@NgModule({declarations: [MyPipe, MyPurePipe, MyApp]})
export class MyModule {
}

View File

@ -0,0 +1,29 @@
const $c0$ = function ($a0$) {
return [$a0$, 1, 2, 3, 4, 5];
};
// ...
MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp,
selectors: [["my-app"]],
decls: 7,
vars: 20,
template: function MyApp_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtext(0);
$r3$.ɵɵpipe(1, "myPurePipe");
$r3$.ɵɵpipe(2, "myPipe");
$r3$.ɵɵelementStart(3, "p");
$r3$.ɵɵtext(4);
$r3$.ɵɵpipe(5, "myPipe");
$r3$.ɵɵpipe(6, "myPipe");
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵtextInterpolate($r3$.ɵɵpipeBind2(1, 3, $r3$.ɵɵpipeBind2(2, 6, ctx.name, ctx.size), ctx.size));
$r3$.ɵɵadvance(4);
$r3$.ɵɵtextInterpolate2("", $r3$.ɵɵpipeBindV(5, 9, $r3$.ɵɵpureFunction1(18, $c0$, ctx.name)), " ", ctx.name ? 1 : $r3$.ɵɵpipeBind1(6, 16, 2), "");
}
},
pipes: [MyPurePipe, MyPipe],
encapsulation: 2
});

View File

@ -0,0 +1,5 @@
MyPipe.ɵpipe = $r3$.ɵɵdefinePipe({
name: "myPipe",
type: MyPipe,
pure: false
});

View File

@ -0,0 +1 @@
MyPipe.ɵfac = function MyPipe_Factory(t) { return new (t || MyPipe)(); };

View File

@ -0,0 +1,5 @@
MyPurePipe.ɵpipe = $r3$.ɵɵdefinePipe({
name: "myPurePipe",
type: MyPurePipe,
pure: true
});

View File

@ -0,0 +1 @@
MyPurePipe.ɵfac = function MyPurePipe_Factory(t) { return new (t || MyPurePipe)(); };

View File

@ -0,0 +1,654 @@
/****************************************************************************************************
* PARTIAL FILE: some.directive.js
****************************************************************************************************/
import { Directive } from '@angular/core';
import * as i0 from "@angular/core";
export class SomeDirective {
}
SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
type: Directive,
args: [{
selector: '[someDir]',
}]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: some.directive.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SomeDirective {
static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: view_query_for_directive.js
****************************************************************************************************/
import { Component, NgModule, ViewChild, ViewChildren } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
export class ViewQueryComponent {
}
ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); };
ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true }, { propertyName: "someDirs", predicate: SomeDirective, descendants: true }], ngImport: i0, template: { source: `
<div someDir></div>
`, isInline: true }, directives: [{ type: function () { return SomeDirective; }, selector: "[someDir]" }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{
type: Component,
args: [{
selector: 'view-query-component',
template: `
<div someDir></div>
`
}]
}], null, { someDir: [{
type: ViewChild,
args: [SomeDirective]
}], someDirs: [{
type: ViewChildren,
args: [SomeDirective]
}] }); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective, ViewQueryComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [SomeDirective, ViewQueryComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: view_query_for_directive.d.ts
****************************************************************************************************/
import { QueryList } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
import * as i1 from "./some.directive";
export declare class ViewQueryComponent {
someDir: SomeDirective;
someDirs: QueryList<SomeDirective>;
static ɵfac: i0.ɵɵFactoryDef<ViewQueryComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<ViewQueryComponent, "view-query-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof i1.SomeDirective, typeof ViewQueryComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: view_query_for_local_ref.js
****************************************************************************************************/
import { Component, NgModule, ViewChild, ViewChildren } from '@angular/core';
import * as i0 from "@angular/core";
export class ViewQueryComponent {
}
ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); };
ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"], descendants: true }], ngImport: i0, template: { source: `
<div #myRef></div>
<div #myRef1></div>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{
type: Component,
args: [{
selector: 'view-query-component',
template: `
<div #myRef></div>
<div #myRef1></div>
`
}]
}], null, { myRef: [{
type: ViewChild,
args: ['myRef']
}], myRefs: [{
type: ViewChildren,
args: ['myRef1, myRef2, myRef3']
}] }); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ViewQueryComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [ViewQueryComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: view_query_for_local_ref.d.ts
****************************************************************************************************/
import { QueryList } from '@angular/core';
import * as i0 from "@angular/core";
export declare class ViewQueryComponent {
myRef: any;
myRefs: QueryList<any>;
static ɵfac: i0.ɵɵFactoryDef<ViewQueryComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<ViewQueryComponent, "view-query-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof ViewQueryComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: some.directive.js
****************************************************************************************************/
import { Directive } from '@angular/core';
import * as i0 from "@angular/core";
export class SomeDirective {
}
SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
type: Directive,
args: [{
selector: '[someDir]',
}]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: some.directive.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SomeDirective {
static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: static_view_query.js
****************************************************************************************************/
import { Component, ElementRef, NgModule, ViewChild } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
export class ViewQueryComponent {
}
ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); };
ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, static: true }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true }], ngImport: i0, template: { source: `
<div someDir></div>
`, isInline: true }, directives: [{ type: function () { return SomeDirective; }, selector: "[someDir]" }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{
type: Component,
args: [{
selector: 'view-query-component',
template: `
<div someDir></div>
`
}]
}], null, { someDir: [{
type: ViewChild,
args: [SomeDirective, { static: true }]
}], foo: [{
type: ViewChild,
args: ['foo']
}] }); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective, ViewQueryComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [SomeDirective, ViewQueryComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: static_view_query.d.ts
****************************************************************************************************/
import { ElementRef } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
import * as i1 from "./some.directive";
export declare class ViewQueryComponent {
someDir: SomeDirective;
foo: ElementRef;
static ɵfac: i0.ɵɵFactoryDef<ViewQueryComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<ViewQueryComponent, "view-query-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof i1.SomeDirective, typeof ViewQueryComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: some.directive.js
****************************************************************************************************/
import { Directive } from '@angular/core';
import * as i0 from "@angular/core";
export class SomeDirective {
}
SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
type: Directive,
args: [{
selector: '[someDir]',
}]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: some.directive.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SomeDirective {
static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: view_query_read_token.js
****************************************************************************************************/
import { Component, ElementRef, NgModule, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
export class ViewQueryComponent {
}
ViewQueryComponent.ɵfac = function ViewQueryComponent_Factory(t) { return new (t || ViewQueryComponent)(); };
ViewQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ViewQueryComponent, selector: "view-query-component", viewQueries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true, read: TemplateRef }, { propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, read: ElementRef }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"], descendants: true, read: ElementRef }, { propertyName: "someDirs", predicate: SomeDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: { source: `
<div someDir></div>
<div #myRef></div>
<div #myRef1></div>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ViewQueryComponent, [{
type: Component,
args: [{
selector: 'view-query-component',
template: `
<div someDir></div>
<div #myRef></div>
<div #myRef1></div>
`
}]
}], null, { myRef: [{
type: ViewChild,
args: ['myRef', { read: TemplateRef }]
}], myRefs: [{
type: ViewChildren,
args: ['myRef1, myRef2, myRef3', { read: ElementRef }]
}], someDir: [{
type: ViewChild,
args: [SomeDirective, { read: ElementRef }]
}], someDirs: [{
type: ViewChildren,
args: [SomeDirective, { read: TemplateRef }]
}] }); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ViewQueryComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [ViewQueryComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: view_query_read_token.d.ts
****************************************************************************************************/
import { ElementRef, QueryList, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
export declare class ViewQueryComponent {
myRef: TemplateRef<unknown>;
myRefs: QueryList<ElementRef>;
someDir: ElementRef;
someDirs: QueryList<TemplateRef<unknown>>;
static ɵfac: i0.ɵɵFactoryDef<ViewQueryComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<ViewQueryComponent, "view-query-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof ViewQueryComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: some.directive.js
****************************************************************************************************/
import { Directive } from '@angular/core';
import * as i0 from "@angular/core";
export class SomeDirective {
}
SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
type: Directive,
args: [{
selector: '[someDir]',
}]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: some.directive.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SomeDirective {
static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: content_query_for_directive.js
****************************************************************************************************/
import { Component, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
export class ContentQueryComponent {
}
ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); };
ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true }, { propertyName: "someDirList", predicate: SomeDirective }], ngImport: i0, template: { source: `
<div><ng-content></ng-content></div>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{
type: Component,
args: [{
selector: 'content-query-component',
template: `
<div><ng-content></ng-content></div>
`
}]
}], null, { someDir: [{
type: ContentChild,
args: [SomeDirective]
}], someDirList: [{
type: ContentChildren,
args: [SomeDirective]
}] }); })();
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `
<content-query-component>
<div someDir></div>
</content-query-component>
`, isInline: true }, directives: [{ type: function () { return ContentQueryComponent; }, selector: "content-query-component" }, { type: function () { return SomeDirective; }, selector: "[someDir]" }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{
selector: 'my-app',
template: `
<content-query-component>
<div someDir></div>
</content-query-component>
`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective, ContentQueryComponent, MyApp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [SomeDirective, ContentQueryComponent, MyApp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: content_query_for_directive.d.ts
****************************************************************************************************/
import { QueryList } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
import * as i1 from "./some.directive";
export declare class ContentQueryComponent {
someDir: SomeDirective;
someDirList: QueryList<SomeDirective>;
static ɵfac: i0.ɵɵFactoryDef<ContentQueryComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<ContentQueryComponent, "content-query-component", never, {}, {}, ["someDir", "someDirList"], ["*"]>;
}
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof i1.SomeDirective, typeof ContentQueryComponent, typeof MyApp], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: content_query_for_local_ref.js
****************************************************************************************************/
import { Component, ContentChild, ContentChildren, NgModule } from '@angular/core';
import * as i0 from "@angular/core";
export class ContentQueryComponent {
}
ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); };
ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"] }], ngImport: i0, template: { source: `
<div #myRef></div>
<div #myRef1></div>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{
type: Component,
args: [{
selector: 'content-query-component',
template: `
<div #myRef></div>
<div #myRef1></div>
`
}]
}], null, { myRef: [{
type: ContentChild,
args: ['myRef']
}], myRefs: [{
type: ContentChildren,
args: ['myRef1, myRef2, myRef3']
}] }); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ContentQueryComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [ContentQueryComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: content_query_for_local_ref.d.ts
****************************************************************************************************/
import { QueryList } from '@angular/core';
import * as i0 from "@angular/core";
export declare class ContentQueryComponent {
myRef: any;
myRefs: QueryList<any>;
static ɵfac: i0.ɵɵFactoryDef<ContentQueryComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<ContentQueryComponent, "content-query-component", never, {}, {}, ["myRef", "myRefs"], never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof ContentQueryComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: some.directive.js
****************************************************************************************************/
import { Directive } from '@angular/core';
import * as i0 from "@angular/core";
export class SomeDirective {
}
SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
type: Directive,
args: [{
selector: '[someDir]',
}]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: some.directive.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SomeDirective {
static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: static_content_query.js
****************************************************************************************************/
import { Component, ContentChild, ElementRef, NgModule } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
export class ContentQueryComponent {
}
ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); };
ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, static: true }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true }], ngImport: i0, template: { source: `
<div><ng-content></ng-content></div>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{
type: Component,
args: [{
selector: 'content-query-component',
template: `
<div><ng-content></ng-content></div>
`
}]
}], null, { someDir: [{
type: ContentChild,
args: [SomeDirective, { static: true }]
}], foo: [{
type: ContentChild,
args: ['foo']
}] }); })();
export class MyApp {
}
MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `
<content-query-component>
<div someDir></div>
</content-query-component>
`, isInline: true }, directives: [{ type: function () { return ContentQueryComponent; }, selector: "content-query-component" }, { type: function () { return SomeDirective; }, selector: "[someDir]" }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
type: Component,
args: [{
selector: 'my-app',
template: `
<content-query-component>
<div someDir></div>
</content-query-component>
`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [SomeDirective, ContentQueryComponent, MyApp] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [SomeDirective, ContentQueryComponent, MyApp] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: static_content_query.d.ts
****************************************************************************************************/
import { ElementRef } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
import * as i1 from "./some.directive";
export declare class ContentQueryComponent {
someDir: SomeDirective;
foo: ElementRef;
static ɵfac: i0.ɵɵFactoryDef<ContentQueryComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<ContentQueryComponent, "content-query-component", never, {}, {}, ["someDir", "foo"], ["*"]>;
}
export declare class MyApp {
static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof i1.SomeDirective, typeof ContentQueryComponent, typeof MyApp], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: some.directive.js
****************************************************************************************************/
import { Directive } from '@angular/core';
import * as i0 from "@angular/core";
export class SomeDirective {
}
SomeDirective.ɵfac = function SomeDirective_Factory(t) { return new (t || SomeDirective)(); };
SomeDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: SomeDirective, selector: "[someDir]", ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SomeDirective, [{
type: Directive,
args: [{
selector: '[someDir]',
}]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: some.directive.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class SomeDirective {
static ɵfac: i0.ɵɵFactoryDef<SomeDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<SomeDirective, "[someDir]", never, {}, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: content_query_read_token.js
****************************************************************************************************/
import { Component, ContentChild, ContentChildren, ElementRef, NgModule, TemplateRef } from '@angular/core';
import { SomeDirective } from './some.directive';
import * as i0 from "@angular/core";
export class ContentQueryComponent {
}
ContentQueryComponent.ɵfac = function ContentQueryComponent_Factory(t) { return new (t || ContentQueryComponent)(); };
ContentQueryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: ContentQueryComponent, selector: "content-query-component", queries: [{ propertyName: "myRef", first: true, predicate: ["myRef"], descendants: true, read: TemplateRef }, { propertyName: "someDir", first: true, predicate: SomeDirective, descendants: true, read: ElementRef }, { propertyName: "myRefs", predicate: ["myRef1, myRef2, myRef3"], read: ElementRef }, { propertyName: "someDirs", predicate: SomeDirective, read: TemplateRef }], ngImport: i0, template: { source: `
<div someDir></div>
<div #myRef></div>
<div #myRef1></div>
`, isInline: true } });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ContentQueryComponent, [{
type: Component,
args: [{
selector: 'content-query-component',
template: `
<div someDir></div>
<div #myRef></div>
<div #myRef1></div>
`
}]
}], null, { myRef: [{
type: ContentChild,
args: ['myRef', { read: TemplateRef }]
}], myRefs: [{
type: ContentChildren,
args: ['myRef1, myRef2, myRef3', { read: ElementRef }]
}], someDir: [{
type: ContentChild,
args: [SomeDirective, { read: ElementRef }]
}], someDirs: [{
type: ContentChildren,
args: [SomeDirective, { read: TemplateRef }]
}] }); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [ContentQueryComponent] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [ContentQueryComponent] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: content_query_read_token.d.ts
****************************************************************************************************/
import { ElementRef, QueryList, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
export declare class ContentQueryComponent {
myRef: TemplateRef<unknown>;
myRefs: QueryList<ElementRef>;
someDir: ElementRef;
someDirs: QueryList<TemplateRef<unknown>>;
static ɵfac: i0.ɵɵFactoryDef<ContentQueryComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<ContentQueryComponent, "content-query-component", never, {}, {}, ["myRef", "someDir", "myRefs", "someDirs"], never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof ContentQueryComponent], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}

View File

@ -0,0 +1,123 @@
{
"$schema": "../../../test_case_schema.json",
"cases": [
{
"description": "should support view queries with directives",
"inputFiles": [
"some.directive.ts",
"view_query_for_directive.ts"
],
"expectations": [
{
"failureMessage": "Invalid ViewQuery declaration",
"files": [
"view_query_for_directive.js"
]
}
]
},
{
"description": "should support view queries with local refs",
"inputFiles": [
"view_query_for_local_ref.ts"
],
"expectations": [
{
"failureMessage": "Invalid ViewQuery declaration",
"files": [
"view_query_for_local_ref.js"
]
}
]
},
{
"description": "should support static view queries",
"inputFiles": [
"some.directive.ts",
"static_view_query.ts"
],
"expectations": [
{
"failureMessage": "Invalid ViewQuery declaration",
"files": [
"static_view_query.js"
]
}
]
},
{
"description": "should support view queries with read tokens specified",
"inputFiles": [
"some.directive.ts",
"view_query_read_token.ts"
],
"expectations": [
{
"failureMessage": "Invalid ViewQuery declaration",
"files": [
"view_query_read_token.js"
]
}
]
},
{
"description": "should support content queries with directives",
"inputFiles": [
"some.directive.ts",
"content_query_for_directive.ts"
],
"expectations": [
{
"failureMessage": "Invalid ContentQuery declaration",
"files": [
"content_query_for_directive.js"
]
}
]
},
{
"description": "should support content queries with local refs",
"inputFiles": [
"content_query_for_local_ref.ts"
],
"expectations": [
{
"failureMessage": "Invalid ContentQuery declaration",
"files": [
"content_query_for_local_ref.js"
]
}
]
},
{
"description": "should support static content queries",
"inputFiles": [
"some.directive.ts",
"static_content_query.ts"
],
"expectations": [
{
"failureMessage": "Invalid ContentQuery declaration",
"files": [
"static_content_query.js"
]
}
]
},
{
"description": "should support content queries with read tokens specified",
"inputFiles": [
"some.directive.ts",
"content_query_read_token.ts"
],
"expectations": [
{
"failureMessage": "Invalid ContentQuery declaration",
"files": [
"content_query_read_token.js"
]
}
]
}
]
}

View File

@ -0,0 +1,27 @@
ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ContentQueryComponent,
selectors: [["content-query-component"]],
contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
if (rf & 1) {
$r3$.ɵɵcontentQuery(dirIndex, SomeDirective, true);
$r3$.ɵɵcontentQuery(dirIndex, SomeDirective, false);
}
if (rf & 2) {
let $tmp$;
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirList = $tmp$);
}
},
ngContentSelectors: _c0,
decls: 2,
vars: 0,
template: function ContentQueryComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵprojectionDef();
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵprojection(1);
$r3$.ɵɵelementEnd();
}
},
encapsulation: 2
});

View File

@ -0,0 +1,28 @@
import {Component, ContentChild, ContentChildren, NgModule, QueryList} from '@angular/core';
import {SomeDirective} from './some.directive';
@Component({
selector: 'content-query-component',
template: `
<div><ng-content></ng-content></div>
`
})
export class ContentQueryComponent {
@ContentChild(SomeDirective) someDir!: SomeDirective;
@ContentChildren(SomeDirective) someDirList!: QueryList<SomeDirective>;
}
@Component({
selector: 'my-app',
template: `
<content-query-component>
<div someDir></div>
</content-query-component>
`
})
export class MyApp {
}
@NgModule({declarations: [SomeDirective, ContentQueryComponent, MyApp]})
export class MyModule {
}

View File

@ -0,0 +1,18 @@
const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
// ...
ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
// ...
contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
if (rf & 1) {
$r3$.ɵɵcontentQuery(dirIndex, $e0_attrs$, true);
$r3$.ɵɵcontentQuery(dirIndex, $e1_attrs$, false);
}
if (rf & 2) {
let $tmp$;
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$);
}
},
// ...
});

View File

@ -0,0 +1,16 @@
import {Component, ContentChild, ContentChildren, NgModule, QueryList} from '@angular/core';
@Component({
selector: 'content-query-component',
template: `
<div #myRef></div>
<div #myRef1></div>
`
})
export class ContentQueryComponent {
@ContentChild('myRef') myRef: any;
@ContentChildren('myRef1, myRef2, myRef3') myRefs!: QueryList<any>;
}
@NgModule({declarations: [ContentQueryComponent]})
export class MyModule {
}

View File

@ -0,0 +1,22 @@
const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
// ...
ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
// ...
contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
if (rf & 1) {
$r3$.ɵɵcontentQuery(dirIndex, $e0_attrs$, true, TemplateRef);
$r3$.ɵɵcontentQuery(dirIndex, SomeDirective, true, ElementRef);
$r3$.ɵɵcontentQuery(dirIndex, $e1_attrs$, false, ElementRef);
$r3$.ɵɵcontentQuery(dirIndex, SomeDirective, false, TemplateRef);
}
if (rf & 2) {
let $tmp$;
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirs = $tmp$);
}
},
// ...
});

View File

@ -0,0 +1,21 @@
import {Component, ContentChild, ContentChildren, ElementRef, NgModule, QueryList, TemplateRef} from '@angular/core';
import {SomeDirective} from './some.directive';
@Component({
selector: 'content-query-component',
template: `
<div someDir></div>
<div #myRef></div>
<div #myRef1></div>
`
})
export class ContentQueryComponent {
@ContentChild('myRef', {read: TemplateRef}) myRef!: TemplateRef<unknown>;
@ContentChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs!: QueryList<ElementRef>;
@ContentChild(SomeDirective, {read: ElementRef}) someDir!: ElementRef;
@ContentChildren(SomeDirective, {read: TemplateRef}) someDirs!: QueryList<TemplateRef<unknown>>;
}
@NgModule({declarations: [ContentQueryComponent]})
export class MyModule {
}

View File

@ -0,0 +1,7 @@
import {Directive} from '@angular/core';
@Directive({
selector: '[someDir]',
})
export class SomeDirective {
}

View File

@ -0,0 +1,27 @@
ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ContentQueryComponent,
selectors: [["content-query-component"]],
contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
if (rf & 1) {
$r3$.ɵɵstaticContentQuery(dirIndex, SomeDirective, true);
$r3$.ɵɵcontentQuery(dirIndex, $ref0$, true);
}
if (rf & 2) {
let $tmp$;
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.foo = $tmp$.first);
}
},
ngContentSelectors: $_c1$,
decls: 2,
vars: 0,
template: function ContentQueryComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵprojectionDef();
$r3$.ɵɵelementStart(0, "div");
$r3$.ɵɵprojection(1);
$r3$.ɵɵelementEnd();
}
},
encapsulation: 2
});

View File

@ -0,0 +1,29 @@
import {Component, ContentChild, ElementRef, NgModule} from '@angular/core';
import {SomeDirective} from './some.directive';
@Component({
selector: 'content-query-component',
template: `
<div><ng-content></ng-content></div>
`
})
export class ContentQueryComponent {
@ContentChild(SomeDirective, {static: true}) someDir!: SomeDirective;
@ContentChild('foo') foo!: ElementRef;
}
@Component({
selector: 'my-app',
template: `
<content-query-component>
<div someDir></div>
</content-query-component>
`
})
export class MyApp {
}
@NgModule({declarations: [SomeDirective, ContentQueryComponent, MyApp]})
export class MyModule {
}

View File

@ -0,0 +1,27 @@
const $refs$ = ["foo"];
// ...
ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ViewQueryComponent,
selectors: [["view-query-component"]],
viewQuery: function ViewQueryComponent_Query(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵstaticViewQuery(SomeDirective, true);
$r3$.ɵɵviewQuery($refs$, true);
}
if (rf & 2) {
let $tmp$;
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.foo = $tmp$.first);
}
},
decls: 1,
vars: 0,
consts: [["someDir",""]],
template: function ViewQueryComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "div", 0);
}
},
directives: function () { return [SomeDirective]; },
encapsulation: 2
});

View File

@ -0,0 +1,18 @@
import {Component, ElementRef, NgModule, ViewChild} from '@angular/core';
import {SomeDirective} from './some.directive';
@Component({
selector: 'view-query-component',
template: `
<div someDir></div>
`
})
export class ViewQueryComponent {
@ViewChild(SomeDirective, {static: true}) someDir!: SomeDirective;
@ViewChild('foo') foo!: ElementRef;
}
@NgModule({declarations: [SomeDirective, ViewQueryComponent]})
export class MyModule {
}

View File

@ -0,0 +1,25 @@
ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ViewQueryComponent,
selectors: [["view-query-component"]],
viewQuery: function ViewQueryComponent_Query(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵviewQuery(SomeDirective, true);
$r3$.ɵɵviewQuery(SomeDirective, true);
}
if (rf & 2) {
let $tmp$;
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirs = $tmp$);
}
},
decls: 1,
vars: 0,
consts: [["someDir",""]],
template: function ViewQueryComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "div", 0);
}
},
directives: function () { return [SomeDirective]; },
encapsulation: 2
});

View File

@ -0,0 +1,18 @@
import {Component, NgModule, QueryList, ViewChild, ViewChildren} from '@angular/core';
import {SomeDirective} from './some.directive';
@Component({
selector: 'view-query-component',
template: `
<div someDir></div>
`
})
export class ViewQueryComponent {
@ViewChild(SomeDirective) someDir!: SomeDirective;
@ViewChildren(SomeDirective) someDirs!: QueryList<SomeDirective>;
}
@NgModule({declarations: [SomeDirective, ViewQueryComponent]})
export class MyModule {
}

View File

@ -0,0 +1,18 @@
const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
// ...
ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
// ...
viewQuery: function ViewQueryComponent_Query(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵviewQuery($e0_attrs$, true);
$r3$.ɵɵviewQuery($e1_attrs$, true);
}
if (rf & 2) {
let $tmp$;
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$);
}
},
// ...
});

View File

@ -0,0 +1,17 @@
import {Component, NgModule, QueryList, ViewChild, ViewChildren} from '@angular/core';
@Component({
selector: 'view-query-component',
template: `
<div #myRef></div>
<div #myRef1></div>
`
})
export class ViewQueryComponent {
@ViewChild('myRef') myRef: any;
@ViewChildren('myRef1, myRef2, myRef3') myRefs!: QueryList<any>;
}
@NgModule({declarations: [ViewQueryComponent]})
export class MyModule {
}

View File

@ -0,0 +1,22 @@
const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
// ...
ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
// ...
viewQuery: function ViewQueryComponent_Query(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵviewQuery($e0_attrs$, true, TemplateRef);
$r3$.ɵɵviewQuery(SomeDirective, true, ElementRef);
$r3$.ɵɵviewQuery($e1_attrs$, true, ElementRef);
$r3$.ɵɵviewQuery(SomeDirective, true, TemplateRef);
}
if (rf & 2) {
let $tmp$;
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRef = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.myRefs = $tmp$);
$r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirs = $tmp$);
}
},
// ...
});

View File

@ -0,0 +1,22 @@
import {Component, ElementRef, NgModule, QueryList, TemplateRef, ViewChild, ViewChildren} from '@angular/core';
import {SomeDirective} from './some.directive';
@Component({
selector: 'view-query-component',
template: `
<div someDir></div>
<div #myRef></div>
<div #myRef1></div>
`
})
export class ViewQueryComponent {
@ViewChild('myRef', {read: TemplateRef}) myRef!: TemplateRef<unknown>;
@ViewChildren('myRef1, myRef2, myRef3', {read: ElementRef}) myRefs!: QueryList<ElementRef>;
@ViewChild(SomeDirective, {read: ElementRef}) someDir!: ElementRef;
@ViewChildren(SomeDirective, {read: TemplateRef}) someDirs!: QueryList<TemplateRef<unknown>>;
}
@NgModule({declarations: [ViewQueryComponent]})
export class MyModule {
}

View File

@ -0,0 +1,339 @@
/****************************************************************************************************
* PARTIAL FILE: for_of.js
****************************************************************************************************/
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
export class ForOfDirective {
constructor(view, template) {
this.view = view;
this.template = template;
}
ngOnChanges(simpleChanges) { }
}
ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); };
ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{
type: Directive,
args: [{ selector: '[forOf]' }]
}], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{
type: Input
}] }); })();
/****************************************************************************************************
* PARTIAL FILE: for_of.d.ts
****************************************************************************************************/
import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
export interface ForOfContext {
$implicit: any;
index: number;
even: boolean;
odd: boolean;
}
export declare class ForOfDirective {
private view;
private template;
private previous;
constructor(view: ViewContainerRef, template: TemplateRef<any>);
forOf: any[];
ngOnChanges(simpleChanges: SimpleChanges): void;
static ɵfac: i0.ɵɵFactoryDef<ForOfDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<ForOfDirective, "[forOf]", never, { "forOf": "forOf"; }, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: svg_embedded_view.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import { ForOfDirective } from './for_of';
import * as i0 from "@angular/core";
export class MyComponent {
constructor() {
this.items = [{ data: 42 }, { data: 42 }];
}
}
MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<svg><g *for="let item of items"><circle></circle></g></svg>`, isInline: true }, directives: [{ type: function () { return ForOfDirective; }, selector: "[forOf]", inputs: ["forOf"] }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
type: Component,
args: [{
selector: 'my-component',
template: `<svg><g *for="let item of items"><circle></circle></g></svg>`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, ForOfDirective] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyComponent, ForOfDirective] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: svg_embedded_view.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
import * as i1 from "./for_of";
export declare class MyComponent {
items: {
data: number;
}[];
static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof i1.ForOfDirective], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: for_of.js
****************************************************************************************************/
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
export class ForOfDirective {
constructor(view, template) {
this.view = view;
this.template = template;
}
ngOnChanges(simpleChanges) { }
}
ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); };
ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{
type: Directive,
args: [{ selector: '[forOf]' }]
}], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{
type: Input
}] }); })();
/****************************************************************************************************
* PARTIAL FILE: for_of.d.ts
****************************************************************************************************/
import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
export interface ForOfContext {
$implicit: any;
index: number;
even: boolean;
odd: boolean;
}
export declare class ForOfDirective {
private view;
private template;
private previous;
constructor(view: ViewContainerRef, template: TemplateRef<any>);
forOf: any[];
ngOnChanges(simpleChanges: SimpleChanges): void;
static ɵfac: i0.ɵɵFactoryDef<ForOfDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<ForOfDirective, "[forOf]", never, { "forOf": "forOf"; }, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: let_variable_and_reference.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import { ForOfDirective } from './for_of';
import * as i0 from "@angular/core";
export class MyComponent {
constructor() {
this.items = [{ name: 'one' }, { name: 'two' }];
}
}
MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<ul><li *for="let item of items">{{item.name}}</li></ul>`, isInline: true }, directives: [{ type: function () { return ForOfDirective; }, selector: "[forOf]", inputs: ["forOf"] }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
type: Component,
args: [{
selector: 'my-component',
template: `<ul><li *for="let item of items">{{item.name}}</li></ul>`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, ForOfDirective] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyComponent, ForOfDirective] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: let_variable_and_reference.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
import * as i1 from "./for_of";
export declare class MyComponent {
items: {
name: string;
}[];
static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof i1.ForOfDirective], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: for_of.js
****************************************************************************************************/
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
export class ForOfDirective {
constructor(view, template) {
this.view = view;
this.template = template;
}
ngOnChanges(simpleChanges) { }
}
ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); };
ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{
type: Directive,
args: [{ selector: '[forOf]' }]
}], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{
type: Input
}] }); })();
/****************************************************************************************************
* PARTIAL FILE: for_of.d.ts
****************************************************************************************************/
import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
export interface ForOfContext {
$implicit: any;
index: number;
even: boolean;
odd: boolean;
}
export declare class ForOfDirective {
private view;
private template;
private previous;
constructor(view: ViewContainerRef, template: TemplateRef<any>);
forOf: any[];
ngOnChanges(simpleChanges: SimpleChanges): void;
static ɵfac: i0.ɵɵFactoryDef<ForOfDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<ForOfDirective, "[forOf]", never, { "forOf": "forOf"; }, {}, never>;
}
/****************************************************************************************************
* PARTIAL FILE: parent_template_variable.js
****************************************************************************************************/
import { Component, NgModule } from '@angular/core';
import { ForOfDirective } from './for_of';
import * as i0 from "@angular/core";
export class MyComponent {
constructor() {
this.items = [
{ name: 'one', infos: [{ description: '11' }, { description: '12' }] },
{ name: 'two', infos: [{ description: '21' }, { description: '22' }] }
];
}
}
MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
<ul>
<li *for="let item of items">
<div>{{item.name}}</div>
<ul>
<li *for="let info of item.infos">
{{item.name}}: {{info.description}}
</li>
</ul>
</li>
</ul>`, isInline: true }, directives: [{ type: function () { return ForOfDirective; }, selector: "[forOf]", inputs: ["forOf"] }] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
type: Component,
args: [{
selector: 'my-component',
template: `
<ul>
<li *for="let item of items">
<div>{{item.name}}</div>
<ul>
<li *for="let info of item.infos">
{{item.name}}: {{info.description}}
</li>
</ul>
</li>
</ul>`
}]
}], null, null); })();
export class MyModule {
}
MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent, ForOfDirective] }); })();
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
type: NgModule,
args: [{ declarations: [MyComponent, ForOfDirective] }]
}], null, null); })();
/****************************************************************************************************
* PARTIAL FILE: parent_template_variable.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
import * as i1 from "./for_of";
export declare class MyComponent {
items: {
name: string;
infos: {
description: string;
}[];
}[];
static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
}
export declare class MyModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent, typeof i1.ForOfDirective], never, never>;
static ɵinj: i0.ɵɵInjectorDef<MyModule>;
}
/****************************************************************************************************
* PARTIAL FILE: for_of.js
****************************************************************************************************/
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
export class ForOfDirective {
constructor(view, template) {
this.view = view;
this.template = template;
}
ngOnChanges(simpleChanges) { }
}
ForOfDirective.ɵfac = function ForOfDirective_Factory(t) { return new (t || ForOfDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.TemplateRef)); };
ForOfDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: ForOfDirective, selector: "[forOf]", inputs: { forOf: "forOf" }, usesOnChanges: true, ngImport: i0 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(ForOfDirective, [{
type: Directive,
args: [{ selector: '[forOf]' }]
}], function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, { forOf: [{
type: Input
}] }); })();
/****************************************************************************************************
* PARTIAL FILE: for_of.d.ts
****************************************************************************************************/
import { SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
export interface ForOfContext {
$implicit: any;
index: number;
even: boolean;
odd: boolean;
}
export declare class ForOfDirective {
private view;
private template;
private previous;
constructor(view: ViewContainerRef, template: TemplateRef<any>);
forOf: any[];
ngOnChanges(simpleChanges: SimpleChanges): void;
static ɵfac: i0.ɵɵFactoryDef<ForOfDirective, never>;
static ɵdir: i0.ɵɵDirectiveDefWithMeta<ForOfDirective, "[forOf]", never, { "forOf": "forOf"; }, {}, never>;
}

View File

@ -0,0 +1,76 @@
{
"$schema": "../../../test_case_schema.json",
"cases": [
{
"description": "should support embedded views in the SVG namespace",
"inputFiles": [
"for_of.ts",
"svg_embedded_view.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"svg_embedded_view.js"
]
}
]
},
{
"description": "should support a let variable and reference",
"inputFiles": [
"for_of.ts",
"let_variable_and_reference.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"let_variable_and_reference.js"
]
}
]
},
{
"description": "should support accessing parent template variables",
"inputFiles": [
"for_of.ts",
"parent_template_variable.ts"
],
"expectations": [
{
"failureMessage": "Invalid component definition",
"files": [
"parent_template_variable.js"
]
}
]
},
{
"description": "should generate correct code for for_of directive",
"inputFiles": [
"for_of.ts"
],
"expectations": [
{
"failureMessage": "Invalid directive definition",
"files": [
{
"generated": "for_of.js",
"expected": "for_of_def.js"
}
]
},
{
"failureMessage": "Invalid directive factory",
"files": [
{
"generated": "for_of.js",
"expected": "for_of_fac.js"
}
]
}
]
}
]
}

View File

@ -0,0 +1,19 @@
import {Directive, Input, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';
export interface ForOfContext {
$implicit: any;
index: number;
even: boolean;
odd: boolean;
}
@Directive({selector: '[forOf]'})
export class ForOfDirective {
private previous!: any[];
constructor(private view: ViewContainerRef, private template: TemplateRef<any>) {}
@Input() forOf!: any[];
ngOnChanges(simpleChanges: SimpleChanges) {}
}

View File

@ -0,0 +1,3 @@
ForOfDirective.ɵfac = function ForOfDirective_Factory(t) {
return new (t || ForOfDirective)($r3$.ɵɵdirectiveInject($r3$.ViewContainerRef), $r3$.ɵɵdirectiveInject($r3$.TemplateRef));
};

View File

@ -0,0 +1,6 @@
ForOfDirective.ɵdir = $r3$.ɵɵdefineDirective({
type: ForOfDirective,
selectors: [["", "forOf", ""]],
inputs: {forOf: "forOf"},
features: [$r3$.ɵɵNgOnChangesFeature]
});

View File

@ -0,0 +1,33 @@
function MyComponent_li_1_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "li");
$r3$.ɵɵtext(1);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
const $item$ = ctx.$implicit;
$r3$.ɵɵadvance(1);
$r3$.ɵɵtextInterpolate($item$.name);
}
}
// ...
MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent,
selectors: [["my-component"]],
decls: 2,
vars: 1,
consts: [[__AttributeMarker.Template__, "for", "forOf"]],
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "ul");
$r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 2, 1, "li", 0);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵadvance(1);
$r3$.ɵɵproperty("forOf", ctx.items);
}
},
directives: function() { return [ForOfDirective]; },
encapsulation: 2
});

View File

@ -0,0 +1,14 @@
import {Component, NgModule} from '@angular/core';
import {ForOfDirective} from './for_of';
@Component({
selector: 'my-component',
template: `<ul><li *for="let item of items">{{item.name}}</li></ul>`
})
export class MyComponent {
items = [{name: 'one'}, {name: 'two'}];
}
@NgModule({declarations: [MyComponent, ForOfDirective]})
export class MyModule {
}

View File

@ -0,0 +1,55 @@
function MyComponent_li_1_li_4_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "li");
$r3$.ɵɵtext(1);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
const $info$ = ctx.$implicit;
const $item$ = $r3$.ɵɵnextContext().$implicit;
$r3$.ɵɵadvance(1);
$r3$.ɵɵtextInterpolate2(" ", $item$.name, ": ", $info$.description, " ");
}
}
function MyComponent_li_1_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "li");
$r3$.ɵɵelementStart(1, "div");
$r3$.ɵɵtext(2);
$r3$.ɵɵelementEnd();
$r3$.ɵɵelementStart(3, "ul");
$r3$.ɵɵtemplate(4, MyComponent_li_1_li_4_Template, 2, 2, "li", 0);
$r3$.ɵɵelementEnd();
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
const $item$ = ctx.$implicit;
$r3$.ɵɵadvance(2);
$r3$.ɵɵtextInterpolate(IDENT.name);
$r3$.ɵɵadvance(2);
$r3$.ɵɵproperty("forOf", IDENT.infos);
}
}
// ...
MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent,
selectors: [["my-component"]],
decls: 2,
vars: 1,
consts: [[__AttributeMarker.Template__, "for", "forOf"]],
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelementStart(0, "ul");
$r3$.ɵɵtemplate(1, MyComponent_li_1_Template, 5, 2, "li", 0);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵadvance(1);
$r3$.ɵɵproperty("forOf", ctx.items);
}
},
directives: function () { return [ForOfDirective]; },
encapsulation: 2
});

View File

@ -0,0 +1,27 @@
import {Component, NgModule} from '@angular/core';
import {ForOfDirective} from './for_of';
@Component({
selector: 'my-component',
template: `
<ul>
<li *for="let item of items">
<div>{{item.name}}</div>
<ul>
<li *for="let info of item.infos">
{{item.name}}: {{info.description}}
</li>
</ul>
</li>
</ul>`
})
export class MyComponent {
items = [
{name: 'one', infos: [{description: '11'}, {description: '12'}]},
{name: 'two', infos: [{description: '21'}, {description: '22'}]}
];
}
@NgModule({declarations: [MyComponent, ForOfDirective]})
export class MyModule {
}

View File

@ -0,0 +1,30 @@
function MyComponent__svg_g_1_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵnamespaceSVG();
$r3$.ɵɵelementStart(0,"g");
$r3$.ɵɵelement(1,"circle");
$r3$.ɵɵelementEnd();
}
}
// ...
MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent,
selectors: [["my-component"]],
decls: 2,
vars: 1,
consts: [[__AttributeMarker.Template__, "for", "forOf"]],
template: function MyComponent_Template(rf, ctx){
if (rf & 1) {
$r3$.ɵɵnamespaceSVG();
$r3$.ɵɵelementStart(0,"svg");
$r3$.ɵɵtemplate(1, MyComponent__svg_g_1_Template, 2, 0, "g", 0);
$r3$.ɵɵelementEnd();
}
if (rf & 2) {
$r3$.ɵɵadvance(1);
$r3$.ɵɵproperty("forOf", ctx.items);
}
},
directives: function() { return [ForOfDirective]; },
encapsulation: 2
});

View File

@ -0,0 +1,14 @@
import {Component, NgModule} from '@angular/core';
import {ForOfDirective} from './for_of';
@Component({
selector: 'my-component',
template: `<svg><g *for="let item of items"><circle></circle></g></svg>`
})
export class MyComponent {
items = [{data: 42}, {data: 42}];
}
@NgModule({declarations: [MyComponent, ForOfDirective]})
export class MyModule {
}

Some files were not shown because too many files have changed in this diff Show More