diff --git a/adev/src/content/api-examples/common/location/ts/e2e_test/location_component_spec.ts b/adev/src/content/api-examples/common/location/ts/e2e_test/location_component_spec.ts deleted file mode 100644 index 61831d2f453e69..00000000000000 --- a/adev/src/content/api-examples/common/location/ts/e2e_test/location_component_spec.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {$, browser, by, element, protractor} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -function waitForElement(selector: string) { - const EC = (protractor).ExpectedConditions; - // Waits for the element with id 'abc' to be present on the dom. - browser.wait(EC.presenceOf($(selector)), 20000); -} - -describe('Location', () => { - afterEach(verifyNoBrowserErrors); - - it('should verify paths', () => { - browser.get('/location/#/bar/baz'); - waitForElement('hash-location'); - expect(element.all(by.css('path-location code')).get(0).getText()).toEqual('/location'); - expect(element.all(by.css('hash-location code')).get(0).getText()).toEqual('/bar/baz'); - }); -}); diff --git a/adev/src/content/api-examples/common/location/ts/hash_location_component.ts b/adev/src/content/api-examples/common/location/ts/hash_location_component.ts deleted file mode 100644 index 22fd8b2f6dcba8..00000000000000 --- a/adev/src/content/api-examples/common/location/ts/hash_location_component.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion LocationComponent -import {HashLocationStrategy, Location, LocationStrategy} from '@angular/common'; -import {Component} from '@angular/core'; - -@Component({ - selector: 'hash-location', - providers: [Location, {provide: LocationStrategy, useClass: HashLocationStrategy}], - template: ` -

HashLocationStrategy

- Current URL is: - {{ location.path() }} -
- Normalize: - /foo/bar/ - is: - {{ location.normalize('foo/bar') }} -
- `, - standalone: false, -}) -export class HashLocationComponent { - location: Location; - constructor(location: Location) { - this.location = location; - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/common/location/ts/module.ts b/adev/src/content/api-examples/common/location/ts/module.ts deleted file mode 100644 index 002450d39addae..00000000000000 --- a/adev/src/content/api-examples/common/location/ts/module.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {APP_BASE_HREF} from '@angular/common'; -import {Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; - -import {HashLocationComponent} from './hash_location_component'; -import {PathLocationComponent} from './path_location_component'; - -@Component({ - selector: 'example-app', - template: ` - - - `, - standalone: false, -}) -export class AppComponent {} - -@NgModule({ - declarations: [AppComponent, PathLocationComponent, HashLocationComponent], - providers: [{provide: APP_BASE_HREF, useValue: '/'}], - imports: [BrowserModule], -}) -export class AppModule {} diff --git a/adev/src/content/api-examples/common/location/ts/path_location_component.ts b/adev/src/content/api-examples/common/location/ts/path_location_component.ts deleted file mode 100644 index 98d1a72d81e925..00000000000000 --- a/adev/src/content/api-examples/common/location/ts/path_location_component.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion LocationComponent -import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; -import {Component} from '@angular/core'; - -@Component({ - selector: 'path-location', - providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}], - template: ` -

PathLocationStrategy

- Current URL is: - {{ location.path() }} -
- Normalize: - /foo/bar/ - is: - {{ location.normalize('foo/bar') }} -
- `, - standalone: false, -}) -export class PathLocationComponent { - location: Location; - constructor(location: Location) { - this.location = location; - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/common/main.ts b/adev/src/content/api-examples/common/main.ts deleted file mode 100644 index 0c83c8112df02d..00000000000000 --- a/adev/src/content/api-examples/common/main.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import 'zone.js/lib/browser/rollup-main'; - -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -import {TestsAppModule} from './test_module'; - -platformBrowserDynamic().bootstrapModule(TestsAppModule); diff --git a/adev/src/content/api-examples/common/ngComponentOutlet/ts/e2e_test/ngComponentOutlet_spec.ts b/adev/src/content/api-examples/common/ngComponentOutlet/ts/e2e_test/ngComponentOutlet_spec.ts deleted file mode 100644 index b6ca7a0d84c15a..00000000000000 --- a/adev/src/content/api-examples/common/ngComponentOutlet/ts/e2e_test/ngComponentOutlet_spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {$, browser, by, element, ExpectedConditions} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -function waitForElement(selector: string) { - const EC = ExpectedConditions; - // Waits for the element with id 'abc' to be present on the dom. - browser.wait(EC.presenceOf($(selector)), 20000); -} - -describe('ngComponentOutlet', () => { - const URL = '/ngComponentOutlet'; - afterEach(verifyNoBrowserErrors); - - describe('ng-component-outlet-example', () => { - it('should render simple', () => { - browser.get(URL); - waitForElement('ng-component-outlet-simple-example'); - expect(element.all(by.css('hello-world')).getText()).toEqual(['Hello World!']); - }); - }); -}); diff --git a/adev/src/content/api-examples/common/ngComponentOutlet/ts/module.ts b/adev/src/content/api-examples/common/ngComponentOutlet/ts/module.ts deleted file mode 100644 index c9f6ab3b94b95f..00000000000000 --- a/adev/src/content/api-examples/common/ngComponentOutlet/ts/module.ts +++ /dev/null @@ -1,133 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import { - Component, - Injectable, - Injector, - Input, - NgModule, - OnInit, - TemplateRef, - ViewChild, - ViewContainerRef, -} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; - -// #docregion SimpleExample -@Component({ - selector: 'hello-world', - template: 'Hello World!', - standalone: false, -}) -export class HelloWorld {} - -@Component({ - selector: 'ng-component-outlet-simple-example', - template: ` - - `, - standalone: false, -}) -export class NgComponentOutletSimpleExample { - // This field is necessary to expose HelloWorld to the template. - HelloWorld = HelloWorld; -} -// #enddocregion - -// #docregion CompleteExample -@Injectable() -export class Greeter { - suffix = '!'; -} - -@Component({ - selector: 'complete-component', - template: ` - {{ label }}: - - - {{ greeter.suffix }} - `, - standalone: false, -}) -export class CompleteComponent { - @Input() label!: string; - - constructor(public greeter: Greeter) {} -} - -@Component({ - selector: 'ng-component-outlet-complete-example', - template: ` - Ahoj - Svet - - `, - standalone: false, -}) -export class NgComponentOutletCompleteExample implements OnInit { - // This field is necessary to expose CompleteComponent to the template. - CompleteComponent = CompleteComponent; - - myInputs = {'label': 'Complete'}; - - myInjector: Injector; - @ViewChild('ahoj', {static: true}) ahojTemplateRef!: TemplateRef; - @ViewChild('svet', {static: true}) svetTemplateRef!: TemplateRef; - myContent?: any[][]; - - constructor( - injector: Injector, - private vcr: ViewContainerRef, - ) { - this.myInjector = Injector.create({ - providers: [{provide: Greeter, deps: []}], - parent: injector, - }); - } - - ngOnInit() { - // Create the projectable content from the templates - this.myContent = [ - this.vcr.createEmbeddedView(this.ahojTemplateRef).rootNodes, - this.vcr.createEmbeddedView(this.svetTemplateRef).rootNodes, - ]; - } -} -// #enddocregion - -@Component({ - selector: 'example-app', - template: ` - -
- - `, - standalone: false, -}) -export class AppComponent {} - -@NgModule({ - imports: [BrowserModule], - declarations: [ - AppComponent, - NgComponentOutletSimpleExample, - NgComponentOutletCompleteExample, - HelloWorld, - CompleteComponent, - ], -}) -export class AppModule {} diff --git a/adev/src/content/api-examples/common/ngIf/ts/e2e_test/ngIf_spec.ts b/adev/src/content/api-examples/common/ngIf/ts/e2e_test/ngIf_spec.ts deleted file mode 100644 index 5df495d07fc176..00000000000000 --- a/adev/src/content/api-examples/common/ngIf/ts/e2e_test/ngIf_spec.ts +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {$, browser, by, element, ExpectedConditions} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -function waitForElement(selector: string) { - const EC = ExpectedConditions; - // Waits for the element with id 'abc' to be present on the dom. - browser.wait(EC.presenceOf($(selector)), 20000); -} - -describe('ngIf', () => { - const URL = '/ngIf'; - afterEach(verifyNoBrowserErrors); - - describe('ng-if-simple', () => { - let comp = 'ng-if-simple'; - it('should hide/show content', () => { - browser.get(URL); - waitForElement(comp); - expect(element.all(by.css(comp)).get(0).getText()).toEqual('hide show = true\nText to show'); - element(by.css(comp + ' button')).click(); - expect(element.all(by.css(comp)).get(0).getText()).toEqual('show show = false'); - }); - }); - - describe('ng-if-else', () => { - let comp = 'ng-if-else'; - it('should hide/show content', () => { - browser.get(URL); - waitForElement(comp); - expect(element.all(by.css(comp)).get(0).getText()).toEqual('hide show = true\nText to show'); - element(by.css(comp + ' button')).click(); - expect(element.all(by.css(comp)).get(0).getText()).toEqual( - 'show show = false\nAlternate text while primary text is hidden', - ); - }); - }); - - describe('ng-if-then-else', () => { - let comp = 'ng-if-then-else'; - - it('should hide/show content', () => { - browser.get(URL); - waitForElement(comp); - expect(element.all(by.css(comp)).get(0).getText()).toEqual( - 'hideSwitch Primary show = true\nPrimary text to show', - ); - element - .all(by.css(comp + ' button')) - .get(1) - .click(); - expect(element.all(by.css(comp)).get(0).getText()).toEqual( - 'hideSwitch Primary show = true\nSecondary text to show', - ); - element - .all(by.css(comp + ' button')) - .get(0) - .click(); - expect(element.all(by.css(comp)).get(0).getText()).toEqual( - 'showSwitch Primary show = false\nAlternate text while primary text is hidden', - ); - }); - }); - - describe('ng-if-as', () => { - let comp = 'ng-if-as'; - it('should hide/show content', () => { - browser.get(URL); - waitForElement(comp); - expect(element.all(by.css(comp)).get(0).getText()).toEqual( - 'Next User\nWaiting... (user is null)', - ); - element(by.css(comp + ' button')).click(); - expect(element.all(by.css(comp)).get(0).getText()).toEqual('Next User\nHello Smith, John!'); - }); - }); -}); diff --git a/adev/src/content/api-examples/common/ngIf/ts/module.ts b/adev/src/content/api-examples/common/ngIf/ts/module.ts deleted file mode 100644 index c0a6fe9028ee7e..00000000000000 --- a/adev/src/content/api-examples/common/ngIf/ts/module.ts +++ /dev/null @@ -1,128 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, NgModule, OnInit, TemplateRef, ViewChild} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {Subject} from 'rxjs'; - -// #docregion NgIfSimple -@Component({ - selector: 'ng-if-simple', - template: ` - - show = {{ show }} -
-
Text to show
- `, - standalone: false, -}) -export class NgIfSimple { - show = true; -} -// #enddocregion - -// #docregion NgIfElse -@Component({ - selector: 'ng-if-else', - template: ` - - show = {{ show }} -
-
Text to show
- Alternate text while primary text is hidden - `, - standalone: false, -}) -export class NgIfElse { - show = true; -} -// #enddocregion - -// #docregion NgIfThenElse -@Component({ - selector: 'ng-if-then-else', - template: ` - - - show = {{ show }} -
-
this is ignored
- Primary text to show - Secondary text to show - Alternate text while primary text is hidden - `, - standalone: false, -}) -export class NgIfThenElse implements OnInit { - thenBlock: TemplateRef | null = null; - show = true; - - @ViewChild('primaryBlock', {static: true}) primaryBlock: TemplateRef | null = null; - @ViewChild('secondaryBlock', {static: true}) secondaryBlock: TemplateRef | null = null; - - switchPrimary() { - this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock; - } - - ngOnInit() { - this.thenBlock = this.primaryBlock; - } -} -// #enddocregion - -// #docregion NgIfAs -@Component({ - selector: 'ng-if-as', - template: ` - -
-
- Hello {{ user.last }}, {{ user.first }}! -
- Waiting... (user is {{ user | json }}) - `, - standalone: false, -}) -export class NgIfAs { - userObservable = new Subject<{first: string; last: string}>(); - first = ['John', 'Mike', 'Mary', 'Bob']; - firstIndex = 0; - last = ['Smith', 'Novotny', 'Angular']; - lastIndex = 0; - - nextUser() { - let first = this.first[this.firstIndex++]; - if (this.firstIndex >= this.first.length) this.firstIndex = 0; - let last = this.last[this.lastIndex++]; - if (this.lastIndex >= this.last.length) this.lastIndex = 0; - this.userObservable.next({first, last}); - } -} -// #enddocregion - -@Component({ - selector: 'example-app', - template: ` - -
- -
- -
- -
- `, - standalone: false, -}) -export class AppComponent {} - -@NgModule({ - imports: [BrowserModule], - declarations: [AppComponent, NgIfSimple, NgIfElse, NgIfThenElse, NgIfAs], -}) -export class AppModule {} diff --git a/adev/src/content/api-examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts b/adev/src/content/api-examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts deleted file mode 100644 index f1c55ef1f9fc8d..00000000000000 --- a/adev/src/content/api-examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {$, browser, by, element, ExpectedConditions} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -function waitForElement(selector: string) { - const EC = ExpectedConditions; - // Waits for the element with id 'abc' to be present on the dom. - browser.wait(EC.presenceOf($(selector)), 20000); -} - -describe('ngTemplateOutlet', () => { - const URL = '/ngTemplateOutlet'; - afterEach(verifyNoBrowserErrors); - - describe('ng-template-outlet-example', () => { - it('should render', () => { - browser.get(URL); - waitForElement('ng-template-outlet-example'); - expect(element.all(by.css('ng-template-outlet-example span')).getText()).toEqual([ - 'Hello', - 'Hello World!', - 'Ahoj Svet!', - ]); - }); - }); -}); diff --git a/adev/src/content/api-examples/common/ngTemplateOutlet/ts/module.ts b/adev/src/content/api-examples/common/ngTemplateOutlet/ts/module.ts deleted file mode 100644 index 019184e8bb3bc2..00000000000000 --- a/adev/src/content/api-examples/common/ngTemplateOutlet/ts/module.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; - -// #docregion NgTemplateOutlet -@Component({ - selector: 'ng-template-outlet-example', - template: ` - -
- -
- -
- - Hello - - Hello {{ name }}! - - - Ahoj {{ person }}! - - `, - standalone: false, -}) -export class NgTemplateOutletExample { - myContext = {$implicit: 'World', localSk: 'Svet'}; -} -// #enddocregion - -@Component({ - selector: 'example-app', - template: ` - - `, - standalone: false, -}) -export class AppComponent {} - -@NgModule({ - imports: [BrowserModule], - declarations: [AppComponent, NgTemplateOutletExample], -}) -export class AppModule {} diff --git a/adev/src/content/api-examples/common/pipes/ts/async_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/async_pipe.ts deleted file mode 100644 index f4fb5bcf404262..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/async_pipe.ts +++ /dev/null @@ -1,80 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component} from '@angular/core'; -import {Observable, Observer} from 'rxjs'; - -// #docregion AsyncPipePromise -@Component({ - selector: 'async-promise-pipe', - template: ` -
- promise|async - : - - Wait for it... {{ greeting | async }} -
- `, - standalone: false, -}) -export class AsyncPromisePipeComponent { - greeting: Promise | null = null; - arrived: boolean = false; - - private resolve: Function | null = null; - - constructor() { - this.reset(); - } - - reset() { - this.arrived = false; - this.greeting = new Promise((resolve, reject) => { - this.resolve = resolve; - }); - } - - clicked() { - if (this.arrived) { - this.reset(); - } else { - this.resolve!('hi there!'); - this.arrived = true; - } - } -} -// #enddocregion - -// #docregion AsyncPipeObservable -@Component({ - selector: 'async-observable-pipe', - template: '
observable|async: Time: {{ time | async }}
', - standalone: false, -}) -export class AsyncObservablePipeComponent { - time = new Observable((observer: Observer) => { - setInterval(() => observer.next(new Date().toString()), 1000); - }); -} -// #enddocregion - -// For some reason protractor hangs on setInterval. So we will run outside of angular zone so that -// protractor will not see us. Also we want to have this outside the docregion so as not to confuse -// the reader. -function setInterval(fn: Function, delay: number) { - const zone = (window as any)['Zone'].current; - let rootZone = zone; - while (rootZone.parent) { - rootZone = rootZone.parent; - } - rootZone.run(() => { - window.setInterval(function (this: unknown) { - zone.run(fn, this, arguments as any); - }, delay); - }); -} diff --git a/adev/src/content/api-examples/common/pipes/ts/currency_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/currency_pipe.ts deleted file mode 100644 index 4f899627c7cd6f..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/currency_pipe.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {registerLocaleData} from '@angular/common'; -import {Component} from '@angular/core'; -// we need to import data for the french locale -import localeFr from './locale-fr'; - -// registering french data -registerLocaleData(localeFr); - -// #docregion CurrencyPipe -@Component({ - selector: 'currency-pipe', - template: ` -
- -

A: {{ a | currency }}

- - -

A: {{ a | currency : 'CAD' }}

- - -

A: {{ a | currency : 'CAD' : 'code' }}

- - -

B: {{ b | currency : 'CAD' : 'symbol' : '4.2-2' }}

- - -

B: {{ b | currency : 'CAD' : 'symbol-narrow' : '4.2-2' }}

- - -

B: {{ b | currency : 'CAD' : 'symbol' : '4.2-2' : 'fr' }}

- - -

B: {{ b | currency : 'CLP' }}

-
- `, - standalone: false, -}) -export class CurrencyPipeComponent { - a: number = 0.259; - b: number = 1.3495; -} -// #enddocregion diff --git a/adev/src/content/api-examples/common/pipes/ts/date_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/date_pipe.ts deleted file mode 100644 index 21774bcc42740a..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/date_pipe.ts +++ /dev/null @@ -1,73 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {registerLocaleData} from '@angular/common'; -import {Component} from '@angular/core'; -// we need to import data for the french locale -import localeFr from './locale-fr'; - -// registering french data -registerLocaleData(localeFr); - -@Component({ - selector: 'date-pipe', - template: ` -
- -

Today is {{ today | date }}

- - -

Or if you prefer, {{ today | date : 'fullDate' }}

- - -

The time is {{ today | date : 'shortTime' }}

- - -

The full date/time is {{ today | date : 'full' }}

- - -

The full date/time in french is: {{ today | date : 'full' : '' : 'fr' }}

- - -

The custom date is {{ today | date : 'yyyy-MM-dd HH:mm a z' : '+0900' }}

- - -

- The custom date with fixed timezone is - {{ fixedTimezone | date : 'yyyy-MM-dd HH:mm a z' : '+0900' }} -

-
- `, - standalone: false, -}) -export class DatePipeComponent { - today = Date.now(); - fixedTimezone = '2015-06-15T09:03:01+0900'; -} -@Component({ - selector: 'deprecated-date-pipe', - template: ` -
- -

Today is {{ today | date }}

- - -

Or if you prefer, {{ today | date : 'fullDate' }}

- - -

The time is {{ today | date : 'shortTime' }}

- - -

The custom date is {{ today | date : 'yyyy-MM-dd HH:mm a' }}

-
- `, - standalone: false, -}) -export class DeprecatedDatePipeComponent { - today = Date.now(); -} diff --git a/adev/src/content/api-examples/common/pipes/ts/e2e_test/pipe_spec.ts b/adev/src/content/api-examples/common/pipes/ts/e2e_test/pipe_spec.ts deleted file mode 100644 index d448bf3d2d5e57..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/e2e_test/pipe_spec.ts +++ /dev/null @@ -1,113 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {$, browser, by, element, ExpectedConditions} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -function waitForElement(selector: string) { - const EC = ExpectedConditions; - // Waits for the element with id 'abc' to be present on the dom. - browser.wait(EC.presenceOf($(selector)), 20000); -} - -describe('pipe', () => { - afterEach(verifyNoBrowserErrors); - const URL = '/pipes'; - - describe('async', () => { - it('should resolve and display promise', () => { - browser.get(URL); - waitForElement('async-promise-pipe'); - expect(element.all(by.css('async-promise-pipe span')).get(0).getText()).toEqual( - 'Wait for it...', - ); - element(by.css('async-promise-pipe button')).click(); - expect(element.all(by.css('async-promise-pipe span')).get(0).getText()).toEqual( - 'Wait for it... hi there!', - ); - }); - }); - - describe('lowercase/uppercase', () => { - it('should work properly', () => { - browser.get(URL); - waitForElement('lowerupper-pipe'); - element(by.css('lowerupper-pipe input')).sendKeys('Hello World!'); - expect(element.all(by.css('lowerupper-pipe pre')).get(0).getText()).toEqual("'hello world!'"); - expect(element.all(by.css('lowerupper-pipe pre')).get(1).getText()).toEqual("'HELLO WORLD!'"); - }); - }); - - describe('titlecase', () => { - it('should work properly', () => { - browser.get(URL); - waitForElement('titlecase-pipe'); - expect(element.all(by.css('titlecase-pipe p')).get(0).getText()).toEqual('Some String'); - expect(element.all(by.css('titlecase-pipe p')).get(1).getText()).toEqual( - 'This Is Mixed Case', - ); - expect(element.all(by.css('titlecase-pipe p')).get(2).getText()).toEqual( - "It's Non-trivial Question", - ); - expect(element.all(by.css('titlecase-pipe p')).get(3).getText()).toEqual('One,two,three'); - expect(element.all(by.css('titlecase-pipe p')).get(4).getText()).toEqual('True|false'); - expect(element.all(by.css('titlecase-pipe p')).get(5).getText()).toEqual('Foo-vs-bar'); - }); - }); - - describe('keyvalue', () => { - it('should work properly', () => { - browser.get(URL); - waitForElement('keyvalue-pipe'); - expect(element.all(by.css('keyvalue-pipe div')).get(0).getText()).toEqual('1:bar'); - expect(element.all(by.css('keyvalue-pipe div')).get(1).getText()).toEqual('2:foo'); - expect(element.all(by.css('keyvalue-pipe div')).get(2).getText()).toEqual('1:bar'); - expect(element.all(by.css('keyvalue-pipe div')).get(3).getText()).toEqual('2:foo'); - }); - }); - - describe('number', () => { - it('should work properly', () => { - browser.get(URL); - waitForElement('number-pipe'); - const examples = element.all(by.css('number-pipe p')); - expect(examples.get(0).getText()).toEqual('No specified formatting: 3.142'); - expect(examples.get(1).getText()).toEqual('With digitsInfo parameter specified: 0,003.14159'); - expect(examples.get(2).getText()).toEqual( - 'With digitsInfo and locale parameters specified: 0\u202f003,14159', - ); - }); - }); - - describe('percent', () => { - it('should work properly', () => { - browser.get(URL); - waitForElement('percent-pipe'); - const examples = element.all(by.css('percent-pipe p')); - expect(examples.get(0).getText()).toEqual('A: 26%'); - expect(examples.get(1).getText()).toEqual('B: 0,134.950%'); - expect(examples.get(2).getText()).toEqual('B: 0\u202f134,950 %'); - }); - }); - - describe('currency', () => { - it('should work properly', () => { - browser.get(URL); - waitForElement('currency-pipe'); - const examples = element.all(by.css('currency-pipe p')); - expect(examples.get(0).getText()).toEqual('A: $0.26'); - expect(examples.get(1).getText()).toEqual('A: CA$0.26'); - expect(examples.get(2).getText()).toEqual('A: CAD0.26'); - expect(examples.get(3).getText()).toEqual('B: CA$0,001.35'); - expect(examples.get(4).getText()).toEqual('B: $0,001.35'); - expect(examples.get(5).getText()).toEqual('B: 0\u202f001,35 $CA'); - expect(examples.get(6).getText()).toEqual('B: CLP1'); - }); - }); -}); diff --git a/adev/src/content/api-examples/common/pipes/ts/i18n_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/i18n_pipe.ts deleted file mode 100644 index 847cb9ef507132..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/i18n_pipe.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component} from '@angular/core'; - -// #docregion I18nPluralPipeComponent -@Component({ - selector: 'i18n-plural-pipe', - template: ` -
{{ messages.length | i18nPlural : messageMapping }}
- `, - standalone: false, -}) -export class I18nPluralPipeComponent { - messages: any[] = ['Message 1']; - messageMapping: {[k: string]: string} = { - '=0': 'No messages.', - '=1': 'One message.', - 'other': '# messages.', - }; -} -// #enddocregion - -// #docregion I18nSelectPipeComponent -@Component({ - selector: 'i18n-select-pipe', - template: ` -
{{ gender | i18nSelect : inviteMap }}
- `, - standalone: false, -}) -export class I18nSelectPipeComponent { - gender: string = 'male'; - inviteMap: any = {'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'}; -} -//#enddocregion diff --git a/adev/src/content/api-examples/common/pipes/ts/json_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/json_pipe.ts deleted file mode 100644 index bd21cc5d999fe7..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/json_pipe.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component} from '@angular/core'; - -// #docregion JsonPipe -@Component({ - selector: 'json-pipe', - template: ` -
-

Without JSON pipe:

- 
{{ object }}
-

With JSON pipe:

- 
{{ object | json }}
-
- `, - standalone: false, -}) -export class JsonPipeComponent { - object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}}; -} -// #enddocregion diff --git a/adev/src/content/api-examples/common/pipes/ts/keyvalue_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/keyvalue_pipe.ts deleted file mode 100644 index 05d45f1345fc51..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/keyvalue_pipe.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component} from '@angular/core'; - -// #docregion KeyValuePipe -@Component({ - selector: 'keyvalue-pipe', - template: ` - -

Object

-
{{ item.key }}:{{ item.value }}
-

Map

-
{{ item.key }}:{{ item.value }}
-

Natural order

-
{{ item.key }}:{{ item.value }}
- - `, - standalone: false, -}) -export class KeyValuePipeComponent { - object: {[key: number]: string} = {2: 'foo', 1: 'bar'}; - map = new Map([ - [2, 'foo'], - [1, 'bar'], - ]); -} -// #enddocregion diff --git a/adev/src/content/api-examples/common/pipes/ts/locale-fr.ts b/adev/src/content/api-examples/common/pipes/ts/locale-fr.ts deleted file mode 100644 index 0b9bd67975c4e5..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/locale-fr.ts +++ /dev/null @@ -1,122 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// THIS CODE IS GENERATED - DO NOT MODIFY -// See angular/tools/gulp-tasks/cldr/extract.js - -const u = undefined; - -function plural(n: number): number { - let i = Math.floor(Math.abs(n)); - if (i === 0 || i === 1) return 1; - return 5; -} - -export default [ - 'fr', - [['AM', 'PM'], u, u], - u, - [ - ['D', 'L', 'M', 'M', 'J', 'V', 'S'], - ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'], - ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'], - ['di', 'lu', 'ma', 'me', 'je', 've', 'sa'], - ], - u, - [ - ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'], - [ - 'janv.', - 'févr.', - 'mars', - 'avr.', - 'mai', - 'juin', - 'juil.', - 'août', - 'sept.', - 'oct.', - 'nov.', - 'déc.', - ], - [ - 'janvier', - 'février', - 'mars', - 'avril', - 'mai', - 'juin', - 'juillet', - 'août', - 'septembre', - 'octobre', - 'novembre', - 'décembre', - ], - ], - u, - [['av. J.-C.', 'ap. J.-C.'], u, ['avant Jésus-Christ', 'après Jésus-Christ']], - 1, - [6, 0], - ['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'], - ['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'], - ['{1} {0}', "{1} 'à' {0}", u, u], - [',', '\u202f', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'], - ['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], - 'EUR', - '€', - 'euro', - { - 'ARS': ['$AR', '$'], - 'AUD': ['$AU', '$'], - 'BEF': ['FB'], - 'BMD': ['$BM', '$'], - 'BND': ['$BN', '$'], - 'BZD': ['$BZ', '$'], - 'CAD': ['$CA', '$'], - 'CLP': ['$CL', '$'], - 'CNY': [u, '¥'], - 'COP': ['$CO', '$'], - 'CYP': ['£CY'], - 'EGP': [u, '£E'], - 'FJD': ['$FJ', '$'], - 'FKP': ['£FK', '£'], - 'FRF': ['F'], - 'GBP': ['£GB', '£'], - 'GIP': ['£GI', '£'], - 'HKD': [u, '$'], - 'IEP': ['£IE'], - 'ILP': ['£IL'], - 'ITL': ['₤IT'], - 'JPY': [u, '¥'], - 'KMF': [u, 'FC'], - 'LBP': ['£LB', '£L'], - 'MTP': ['£MT'], - 'MXN': ['$MX', '$'], - 'NAD': ['$NA', '$'], - 'NIO': [u, '$C'], - 'NZD': ['$NZ', '$'], - 'RHD': ['$RH'], - 'RON': [u, 'L'], - 'RWF': [u, 'FR'], - 'SBD': ['$SB', '$'], - 'SGD': ['$SG', '$'], - 'SRD': ['$SR', '$'], - 'TOP': [u, '$T'], - 'TTD': ['$TT', '$'], - 'TWD': [u, 'NT$'], - 'USD': ['$US', '$'], - 'UYU': ['$UY', '$'], - 'WST': ['$WS'], - 'XCD': [u, '$'], - 'XPF': ['FCFP'], - 'ZMW': [u, 'Kw'], - }, - 'ltr', - plural, -]; diff --git a/adev/src/content/api-examples/common/pipes/ts/lowerupper_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/lowerupper_pipe.ts deleted file mode 100644 index 34b5891f23b4fb..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/lowerupper_pipe.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component} from '@angular/core'; - -// #docregion LowerUpperPipe -@Component({ - selector: 'lowerupper-pipe', - template: ` -
- - -

In lowercase:

- 
'{{ value | lowercase }}'
-

In uppercase:

- 
'{{ value | uppercase }}'
-
- `, - standalone: false, -}) -export class LowerUpperPipeComponent { - value: string = ''; - change(value: string) { - this.value = value; - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/common/pipes/ts/module.ts b/adev/src/content/api-examples/common/pipes/ts/module.ts deleted file mode 100644 index 446dd1b49955e4..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/module.ts +++ /dev/null @@ -1,90 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; - -import {AsyncObservablePipeComponent, AsyncPromisePipeComponent} from './async_pipe'; -import {CurrencyPipeComponent} from './currency_pipe'; -import {DatePipeComponent, DeprecatedDatePipeComponent} from './date_pipe'; -import {I18nPluralPipeComponent, I18nSelectPipeComponent} from './i18n_pipe'; -import {JsonPipeComponent} from './json_pipe'; -import {KeyValuePipeComponent} from './keyvalue_pipe'; -import {LowerUpperPipeComponent} from './lowerupper_pipe'; -import {NumberPipeComponent} from './number_pipe'; -import {PercentPipeComponent} from './percent_pipe'; -import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe'; -import {TitleCasePipeComponent} from './titlecase_pipe'; - -@Component({ - selector: 'example-app', - template: ` -

Pipe Example

- -

async

- - - -

date

- - -

json

- - -

- lower - , - upper -

- - -

titlecase

- - -

number

- - - - -

slice

- - - -

i18n

- - - -

keyvalue

- - `, - standalone: false, -}) -export class AppComponent {} - -@NgModule({ - declarations: [ - AsyncPromisePipeComponent, - AsyncObservablePipeComponent, - AppComponent, - JsonPipeComponent, - DatePipeComponent, - DeprecatedDatePipeComponent, - LowerUpperPipeComponent, - TitleCasePipeComponent, - NumberPipeComponent, - PercentPipeComponent, - CurrencyPipeComponent, - SlicePipeStringComponent, - SlicePipeListComponent, - I18nPluralPipeComponent, - I18nSelectPipeComponent, - KeyValuePipeComponent, - ], - imports: [BrowserModule], -}) -export class AppModule {} diff --git a/adev/src/content/api-examples/common/pipes/ts/number_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/number_pipe.ts deleted file mode 100644 index 79b871782d5eb8..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/number_pipe.ts +++ /dev/null @@ -1,45 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {registerLocaleData} from '@angular/common'; -import {Component} from '@angular/core'; -// we need to import data for the french locale -import localeFr from './locale-fr'; - -registerLocaleData(localeFr, 'fr'); - -// #docregion NumberPipe -@Component({ - selector: 'number-pipe', - template: ` -
-

- No specified formatting: - {{ pi | number }} - -

- -

- With digitsInfo parameter specified: - {{ pi | number : '4.1-5' }} - -

- -

- With digitsInfo and locale parameters specified: - {{ pi | number : '4.1-5' : 'fr' }} - -

-
- `, - standalone: false, -}) -export class NumberPipeComponent { - pi: number = 3.14159265359; -} -// #enddocregion diff --git a/adev/src/content/api-examples/common/pipes/ts/percent_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/percent_pipe.ts deleted file mode 100644 index daf978f9adfa92..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/percent_pipe.ts +++ /dev/null @@ -1,38 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {registerLocaleData} from '@angular/common'; -import {Component} from '@angular/core'; -// we need to import data for the french locale -import localeFr from './locale-fr'; - -// registering french data -registerLocaleData(localeFr); - -// #docregion PercentPipe -@Component({ - selector: 'percent-pipe', - template: ` -
- -

A: {{ a | percent }}

- - -

B: {{ b | percent : '4.3-5' }}

- - -

B: {{ b | percent : '4.3-5' : 'fr' }}

-
- `, - standalone: false, -}) -export class PercentPipeComponent { - a: number = 0.259; - b: number = 1.3495; -} -// #enddocregion diff --git a/adev/src/content/api-examples/common/pipes/ts/slice_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/slice_pipe.ts deleted file mode 100644 index 201f97a5ae2252..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/slice_pipe.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component} from '@angular/core'; - -// #docregion SlicePipe_string -@Component({ - selector: 'slice-string-pipe', - template: ` -
-

{{ str }}[0:4]: '{{ str | slice : 0 : 4 }}' - output is expected to be 'abcd'

-

{{ str }}[4:0]: '{{ str | slice : 4 : 0 }}' - output is expected to be ''

-

{{ str }}[-4]: '{{ str | slice : -4 }}' - output is expected to be 'ghij'

-

{{ str }}[-4:-2]: '{{ str | slice : -4 : -2 }}' - output is expected to be 'gh'

-

{{ str }}[-100]: '{{ str | slice : -100 }}' - output is expected to be 'abcdefghij'

-

{{ str }}[100]: '{{ str | slice : 100 }}' - output is expected to be ''

-
- `, - standalone: false, -}) -export class SlicePipeStringComponent { - str: string = 'abcdefghij'; -} -// #enddocregion - -// #docregion SlicePipe_list -@Component({ - selector: 'slice-list-pipe', - template: ` -
    -
  • {{ i }}
    • -
- `, - standalone: false, -}) -export class SlicePipeListComponent { - collection: string[] = ['a', 'b', 'c', 'd']; -} -// #enddocregion diff --git a/adev/src/content/api-examples/common/pipes/ts/titlecase_pipe.ts b/adev/src/content/api-examples/common/pipes/ts/titlecase_pipe.ts deleted file mode 100644 index b2616e284a0fa3..00000000000000 --- a/adev/src/content/api-examples/common/pipes/ts/titlecase_pipe.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component} from '@angular/core'; - -// #docregion TitleCasePipe -@Component({ - selector: 'titlecase-pipe', - template: ` -
-

{{ 'some string' | titlecase }}

- -

{{ 'tHIs is mIXeD CaSe' | titlecase }}

- -

{{ "it's non-trivial question" | titlecase }}

- -

{{ 'one,two,three' | titlecase }}

- -

{{ 'true|false' | titlecase }}

- -

{{ 'foo-vs-bar' | titlecase }}

- -
- `, - standalone: false, -}) -export class TitleCasePipeComponent {} -// #enddocregion diff --git a/adev/src/content/api-examples/common/start-server.js b/adev/src/content/api-examples/common/start-server.js deleted file mode 100644 index 07d52c5eb3fa4d..00000000000000 --- a/adev/src/content/api-examples/common/start-server.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -const protractorUtils = require('@bazel/protractor/protractor-utils'); -const protractor = require('protractor'); - -module.exports = async function (config) { - const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []); - const serverUrl = `http://localhost:${port}`; - - protractor.browser.baseUrl = serverUrl; -}; diff --git a/adev/src/content/api-examples/common/test_module.ts b/adev/src/content/api-examples/common/test_module.ts deleted file mode 100644 index 2ad20032052ac7..00000000000000 --- a/adev/src/content/api-examples/common/test_module.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; - -import * as locationExample from './location/ts/module'; -import * as ngComponentOutletExample from './ngComponentOutlet/ts/module'; -import * as ngIfExample from './ngIf/ts/module'; -import * as ngTemplateOutletExample from './ngTemplateOutlet/ts/module'; -import * as pipesExample from './pipes/ts/module'; - -@Component({ - selector: 'example-app:not(y)', - template: '', - standalone: false, -}) -export class TestsAppComponent {} - -@NgModule({ - imports: [ - locationExample.AppModule, - ngComponentOutletExample.AppModule, - ngIfExample.AppModule, - ngTemplateOutletExample.AppModule, - pipesExample.AppModule, - - // Router configuration so that the individual e2e tests can load their - // app components. - RouterModule.forRoot([ - {path: 'location', component: locationExample.AppComponent}, - {path: 'ngComponentOutlet', component: ngComponentOutletExample.AppComponent}, - {path: 'ngIf', component: ngIfExample.AppComponent}, - {path: 'ngTemplateOutlet', component: ngTemplateOutletExample.AppComponent}, - {path: 'pipes', component: pipesExample.AppComponent}, - ]), - ], - declarations: [TestsAppComponent], - bootstrap: [TestsAppComponent], -}) -export class TestsAppModule {} diff --git a/adev/src/content/api-examples/core/animation/ts/dsl/animation_example.ts b/adev/src/content/api-examples/core/animation/ts/dsl/animation_example.ts deleted file mode 100644 index 3612681158b26b..00000000000000 --- a/adev/src/content/api-examples/core/animation/ts/dsl/animation_example.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {animate, state, style, transition, trigger} from '@angular/animations'; -import {Component, NgModule} from '@angular/core'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; - -@Component({ - selector: 'example-app', - styles: [ - ` - .toggle-container { - background-color: white; - border: 10px solid black; - width: 200px; - text-align: center; - line-height: 100px; - font-size: 50px; - box-sizing: border-box; - overflow: hidden; - } - `, - ], - animations: [ - trigger('openClose', [ - state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})), - state('expanded', style({height: '*', borderColor: 'green', color: 'green'})), - transition('collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)]), - ]), - ], - template: ` - - -
-
Look at this box
- `, - standalone: false, -}) -export class MyExpandoCmp { - // TODO(issue/24571): remove '!'. - stateExpression!: string; - constructor() { - this.collapse(); - } - expand() { - this.stateExpression = 'expanded'; - } - collapse() { - this.stateExpression = 'collapsed'; - } -} - -@NgModule({ - imports: [BrowserAnimationsModule], - declarations: [MyExpandoCmp], - bootstrap: [MyExpandoCmp], -}) -export class AppModule {} diff --git a/adev/src/content/api-examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts b/adev/src/content/api-examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts deleted file mode 100644 index 0ccfaf2d4db50a..00000000000000 --- a/adev/src/content/api-examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {$, browser, by, element, ExpectedConditions} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -function waitForElement(selector: string) { - const EC = ExpectedConditions; - // Waits for the element with id 'abc' to be present on the dom. - browser.wait(EC.presenceOf($(selector)), 20000); -} - -describe('animation example', () => { - afterEach(verifyNoBrowserErrors); - - describe('index view', () => { - const URL = '/animation/dsl/'; - - it('should list out the current collection of items', () => { - browser.get(URL); - waitForElement('.toggle-container'); - expect(element.all(by.css('.toggle-container')).get(0).getText()).toEqual('Look at this box'); - }); - }); -}); diff --git a/adev/src/content/api-examples/core/animation/ts/dsl/module.ts b/adev/src/content/api-examples/core/animation/ts/dsl/module.ts deleted file mode 100644 index 39a299db24de98..00000000000000 --- a/adev/src/content/api-examples/core/animation/ts/dsl/module.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -export {AppModule, MyExpandoCmp as AppComponent} from './animation_example'; diff --git a/adev/src/content/api-examples/core/debug/ts/debug_element/debug_element.ts b/adev/src/content/api-examples/core/debug/ts/debug_element/debug_element.ts deleted file mode 100644 index fa8da0c082ab47..00000000000000 --- a/adev/src/content/api-examples/core/debug/ts/debug_element/debug_element.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {DebugElement} from '@angular/core'; - -let debugElement: DebugElement = undefined!; -let predicate: any; - -debugElement.query(predicate); diff --git a/adev/src/content/api-examples/core/di/ts/contentChild/content_child_example.ts b/adev/src/content/api-examples/core/di/ts/contentChild/content_child_example.ts deleted file mode 100644 index 8284471f4dbc57..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/contentChild/content_child_example.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion Component -import {Component, ContentChild, Directive, Input} from '@angular/core'; - -@Directive({ - selector: 'pane', - standalone: false, -}) -export class Pane { - @Input() id!: string; -} - -@Component({ - selector: 'tab', - template: ` -
pane: {{ pane?.id }}
- `, - standalone: false, -}) -export class Tab { - @ContentChild(Pane) pane!: Pane; -} - -@Component({ - selector: 'example-app', - template: ` - - - - - - - `, - standalone: false, -}) -export class ContentChildComp { - shouldShow = true; - - toggle() { - this.shouldShow = !this.shouldShow; - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/core/di/ts/contentChild/content_child_howto.ts b/adev/src/content/api-examples/core/di/ts/contentChild/content_child_howto.ts deleted file mode 100644 index 4027a8f4eed6a5..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/contentChild/content_child_howto.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion HowTo -import {AfterContentInit, ContentChild, Directive} from '@angular/core'; - -@Directive({ - selector: 'child-directive', - standalone: false, -}) -class ChildDirective {} - -@Directive({ - selector: 'someDir', - standalone: false, -}) -class SomeDir implements AfterContentInit { - @ContentChild(ChildDirective) contentChild!: ChildDirective; - - ngAfterContentInit() { - // contentChild is set - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/core/di/ts/contentChild/e2e_test/content_child_spec.ts b/adev/src/content/api-examples/core/di/ts/contentChild/e2e_test/content_child_spec.ts deleted file mode 100644 index 3a1a4515d4e333..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/contentChild/e2e_test/content_child_spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -describe('contentChild example', () => { - afterEach(verifyNoBrowserErrors); - let button: ElementFinder; - let result: ElementFinder; - - beforeEach(() => { - browser.get('/di/contentChild'); - button = element(by.css('button')); - result = element(by.css('div')); - }); - - it('should query content child', () => { - expect(result.getText()).toEqual('pane: 1'); - - button.click(); - - expect(result.getText()).toEqual('pane: 2'); - }); -}); diff --git a/adev/src/content/api-examples/core/di/ts/contentChild/module.ts b/adev/src/content/api-examples/core/di/ts/contentChild/module.ts deleted file mode 100644 index 6c1ee19db72617..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/contentChild/module.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {ContentChildComp, Pane, Tab} from './content_child_example'; - -@NgModule({ - imports: [BrowserModule], - declarations: [ContentChildComp, Pane, Tab], - bootstrap: [ContentChildComp], -}) -export class AppModule {} - -export {ContentChildComp as AppComponent}; diff --git a/adev/src/content/api-examples/core/di/ts/contentChildren/content_children_example.ts b/adev/src/content/api-examples/core/di/ts/contentChildren/content_children_example.ts deleted file mode 100644 index 65ba6520efd3da..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/contentChildren/content_children_example.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion Component -import {Component, ContentChildren, Directive, Input, QueryList} from '@angular/core'; - -@Directive({ - selector: 'pane', - standalone: false, -}) -export class Pane { - @Input() id!: string; -} - -@Component({ - selector: 'tab', - template: ` -
Top level panes: {{ serializedPanes }}
-
Arbitrary nested panes: {{ serializedNestedPanes }}
- `, - standalone: false, -}) -export class Tab { - @ContentChildren(Pane) topLevelPanes!: QueryList; - @ContentChildren(Pane, {descendants: true}) arbitraryNestedPanes!: QueryList; - - get serializedPanes(): string { - return this.topLevelPanes ? this.topLevelPanes.map((p) => p.id).join(', ') : ''; - } - get serializedNestedPanes(): string { - return this.arbitraryNestedPanes ? this.arbitraryNestedPanes.map((p) => p.id).join(', ') : ''; - } -} - -@Component({ - selector: 'example-app', - template: ` - - - - - - - - - - - - - `, - standalone: false, -}) -export class ContentChildrenComp { - shouldShow = false; - - show() { - this.shouldShow = true; - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/core/di/ts/contentChildren/content_children_howto.ts b/adev/src/content/api-examples/core/di/ts/contentChildren/content_children_howto.ts deleted file mode 100644 index 7d52fcb604787e..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/contentChildren/content_children_howto.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion HowTo -import {AfterContentInit, ContentChildren, Directive, QueryList} from '@angular/core'; - -@Directive({ - selector: 'child-directive', - standalone: false, -}) -class ChildDirective {} - -@Directive({ - selector: 'someDir', - standalone: false, -}) -class SomeDir implements AfterContentInit { - @ContentChildren(ChildDirective) contentChildren!: QueryList; - - ngAfterContentInit() { - // contentChildren is set - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts b/adev/src/content/api-examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts deleted file mode 100644 index 45e68efdf6588b..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -describe('contentChildren example', () => { - afterEach(verifyNoBrowserErrors); - let button: ElementFinder; - let resultTopLevel: ElementFinder; - let resultNested: ElementFinder; - - beforeEach(() => { - browser.get('/di/contentChildren'); - button = element(by.css('button')); - resultTopLevel = element(by.css('.top-level')); - resultNested = element(by.css('.nested')); - }); - - it('should query content children', () => { - expect(resultTopLevel.getText()).toEqual('Top level panes: 1, 2'); - - button.click(); - - expect(resultTopLevel.getText()).toEqual('Top level panes: 1, 2, 3'); - }); - - it('should query nested content children', () => { - expect(resultNested.getText()).toEqual('Arbitrary nested panes: 1, 2'); - - button.click(); - - expect(resultNested.getText()).toEqual('Arbitrary nested panes: 1, 2, 3, 3_1, 3_2'); - }); -}); diff --git a/adev/src/content/api-examples/core/di/ts/contentChildren/module.ts b/adev/src/content/api-examples/core/di/ts/contentChildren/module.ts deleted file mode 100644 index acc805640fb2af..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/contentChildren/module.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {ContentChildrenComp, Pane, Tab} from './content_children_example'; - -@NgModule({ - imports: [BrowserModule], - declarations: [ContentChildrenComp, Pane, Tab], - bootstrap: [ContentChildrenComp], -}) -export class AppModule {} - -export {ContentChildrenComp as AppComponent}; diff --git a/adev/src/content/api-examples/core/di/ts/forward_ref/forward_ref_spec.ts b/adev/src/content/api-examples/core/di/ts/forward_ref/forward_ref_spec.ts deleted file mode 100644 index 20f9d879dbcfd2..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/forward_ref/forward_ref_spec.ts +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {forwardRef, Inject, Injectable, Injector, resolveForwardRef} from '@angular/core'; - -{ - describe('forwardRef examples', () => { - it('ForwardRefFn example works', () => { - // #docregion forward_ref_fn - const ref = forwardRef(() => Lock); - // #enddocregion - expect(ref).not.toBeNull(); - - class Lock {} - }); - - it('can be used to inject a class defined later', () => { - // #docregion forward_ref - @Injectable() - class Door { - lock: Lock; - - // Door attempts to inject Lock, despite it not being defined yet. - // forwardRef makes this possible. - constructor(@Inject(forwardRef(() => Lock)) lock: Lock) { - this.lock = lock; - } - } - - // Only at this point Lock is defined. - class Lock {} - - const injector = Injector.create({ - providers: [ - {provide: Lock, deps: []}, - {provide: Door, deps: [Lock]}, - ], - }); - - expect(injector.get(Door) instanceof Door).toBe(true); - expect(injector.get(Door).lock instanceof Lock).toBe(true); - // #enddocregion - }); - - it('can be unwrapped', () => { - // #docregion resolve_forward_ref - const ref = forwardRef(() => 'refValue'); - expect(resolveForwardRef(ref as any)).toEqual('refValue'); - expect(resolveForwardRef('regularValue')).toEqual('regularValue'); - // #enddocregion - }); - }); -} diff --git a/adev/src/content/api-examples/core/di/ts/injector_spec.ts b/adev/src/content/api-examples/core/di/ts/injector_spec.ts deleted file mode 100644 index 96d548b62c32a8..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/injector_spec.ts +++ /dev/null @@ -1,100 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import { - inject, - InjectFlags, - InjectionToken, - InjectOptions, - Injector, - ProviderToken, - ɵsetCurrentInjector as setCurrentInjector, - ɵsetInjectorProfilerContext, -} from '@angular/core'; - -class MockRootScopeInjector implements Injector { - constructor(readonly parent: Injector) {} - - get( - token: ProviderToken, - defaultValue?: any, - flags: InjectFlags | InjectOptions = InjectFlags.Default, - ): T { - if ((token as any).ɵprov && (token as any).ɵprov.providedIn === 'root') { - const old = setCurrentInjector(this); - const previousInjectorProfilerContext = ɵsetInjectorProfilerContext({ - injector: this, - token: null, - }); - try { - return (token as any).ɵprov.factory(); - } finally { - setCurrentInjector(old); - ɵsetInjectorProfilerContext(previousInjectorProfilerContext); - } - } - return this.parent.get(token, defaultValue, flags); - } -} - -{ - describe('injector metadata examples', () => { - it('works', () => { - // #docregion Injector - const injector: Injector = Injector.create({ - providers: [{provide: 'validToken', useValue: 'Value'}], - }); - expect(injector.get('validToken')).toEqual('Value'); - expect(() => injector.get('invalidToken')).toThrowError(); - expect(injector.get('invalidToken', 'notFound')).toEqual('notFound'); - // #enddocregion - }); - - it('injects injector', () => { - // #docregion injectInjector - const injector = Injector.create({providers: []}); - expect(injector.get(Injector)).toBe(injector); - // #enddocregion - }); - - it('should infer type', () => { - // #docregion InjectionToken - const BASE_URL = new InjectionToken('BaseUrl'); - const injector = Injector.create({ - providers: [{provide: BASE_URL, useValue: 'http://localhost'}], - }); - const url = injector.get(BASE_URL); - // Note: since `BASE_URL` is `InjectionToken` - // `url` is correctly inferred to be `string` - expect(url).toBe('http://localhost'); - // #enddocregion - }); - - it('injects a tree-shakeable InjectionToken', () => { - class MyDep {} - const injector = new MockRootScopeInjector( - Injector.create({providers: [{provide: MyDep, deps: []}]}), - ); - - // #docregion ShakableInjectionToken - class MyService { - constructor(readonly myDep: MyDep) {} - } - - const MY_SERVICE_TOKEN = new InjectionToken('Manually constructed MyService', { - providedIn: 'root', - factory: () => new MyService(inject(MyDep)), - }); - - const instance = injector.get(MY_SERVICE_TOKEN); - expect(instance instanceof MyService).toBeTruthy(); - expect(instance.myDep instanceof MyDep).toBeTruthy(); - // #enddocregion - }); - }); -} diff --git a/adev/src/content/api-examples/core/di/ts/metadata_spec.ts b/adev/src/content/api-examples/core/di/ts/metadata_spec.ts deleted file mode 100644 index 5fe993ee65c521..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/metadata_spec.ts +++ /dev/null @@ -1,190 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import { - Component, - Directive, - Host, - Injectable, - Injector, - Optional, - Self, - SkipSelf, -} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; - -{ - describe('di metadata examples', () => { - describe('Inject', () => { - it('works without decorator', () => { - // #docregion InjectWithoutDecorator - class Engine {} - - @Injectable() - class Car { - constructor(public engine: Engine) {} // same as constructor(@Inject(Engine) engine:Engine) - } - - const injector = Injector.create({ - providers: [ - {provide: Engine, deps: []}, - {provide: Car, deps: [Engine]}, - ], - }); - expect(injector.get(Car).engine instanceof Engine).toBe(true); - // #enddocregion - }); - }); - - describe('Optional', () => { - it('works', () => { - // #docregion Optional - class Engine {} - - @Injectable() - class Car { - constructor(@Optional() public engine: Engine) {} - } - - const injector = Injector.create({ - providers: [{provide: Car, deps: [[new Optional(), Engine]]}], - }); - expect(injector.get(Car).engine).toBeNull(); - // #enddocregion - }); - }); - - describe('Injectable', () => { - it('works', () => { - // #docregion Injectable - @Injectable() - class UsefulService {} - - @Injectable() - class NeedsService { - constructor(public service: UsefulService) {} - } - - const injector = Injector.create({ - providers: [ - {provide: NeedsService, deps: [UsefulService]}, - {provide: UsefulService, deps: []}, - ], - }); - expect(injector.get(NeedsService).service instanceof UsefulService).toBe(true); - // #enddocregion - }); - }); - - describe('Self', () => { - it('works', () => { - // #docregion Self - class Dependency {} - - @Injectable() - class NeedsDependency { - constructor(@Self() public dependency: Dependency) {} - } - - let inj = Injector.create({ - providers: [ - {provide: Dependency, deps: []}, - {provide: NeedsDependency, deps: [[new Self(), Dependency]]}, - ], - }); - const nd = inj.get(NeedsDependency); - - expect(nd.dependency instanceof Dependency).toBe(true); - - const child = Injector.create({ - providers: [{provide: NeedsDependency, deps: [[new Self(), Dependency]]}], - parent: inj, - }); - expect(() => child.get(NeedsDependency)).toThrowError(); - // #enddocregion - }); - }); - - describe('SkipSelf', () => { - it('works', () => { - // #docregion SkipSelf - class Dependency {} - - @Injectable() - class NeedsDependency { - constructor(@SkipSelf() public dependency: Dependency) {} - } - - const parent = Injector.create({providers: [{provide: Dependency, deps: []}]}); - const child = Injector.create({ - providers: [{provide: NeedsDependency, deps: [Dependency]}], - parent, - }); - expect(child.get(NeedsDependency).dependency instanceof Dependency).toBe(true); - - const inj = Injector.create({ - providers: [{provide: NeedsDependency, deps: [[new Self(), Dependency]]}], - }); - expect(() => inj.get(NeedsDependency)).toThrowError(); - // #enddocregion - }); - }); - - describe('Host', () => { - it('works', () => { - // #docregion Host - class OtherService {} - class HostService {} - - @Directive({ - selector: 'child-directive', - standalone: false, - }) - class ChildDirective { - logs: string[] = []; - - constructor(@Optional() @Host() os: OtherService, @Optional() @Host() hs: HostService) { - // os is null: true - this.logs.push(`os is null: ${os === null}`); - // hs is an instance of HostService: true - this.logs.push(`hs is an instance of HostService: ${hs instanceof HostService}`); - } - } - - @Component({ - selector: 'parent-cmp', - viewProviders: [HostService], - template: '', - standalone: false, - }) - class ParentCmp {} - - @Component({ - selector: 'app', - viewProviders: [OtherService], - template: '', - standalone: false, - }) - class App {} - // #enddocregion - - TestBed.configureTestingModule({ - declarations: [App, ParentCmp, ChildDirective], - }); - - let cmp: ComponentFixture = undefined!; - expect(() => (cmp = TestBed.createComponent(App))).not.toThrow(); - - expect(cmp.debugElement.children[0].children[0].injector.get(ChildDirective).logs).toEqual([ - 'os is null: true', - 'hs is an instance of HostService: true', - ]); - }); - }); - }); -} diff --git a/adev/src/content/api-examples/core/di/ts/provider_spec.ts b/adev/src/content/api-examples/core/di/ts/provider_spec.ts deleted file mode 100644 index f377a410dff6e9..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/provider_spec.ts +++ /dev/null @@ -1,226 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Injectable, InjectionToken, Injector, Optional} from '@angular/core'; - -{ - describe('Provider examples', () => { - describe('TypeProvider', () => { - it('works', () => { - // #docregion TypeProvider - @Injectable() - class Greeting { - salutation = 'Hello'; - } - - const injector = Injector.create({providers: [{provide: Greeting, useClass: Greeting}]}); - - expect(injector.get(Greeting).salutation).toBe('Hello'); - // #enddocregion - }); - }); - - describe('ValueProvider', () => { - it('works', () => { - // #docregion ValueProvider - const injector = Injector.create({providers: [{provide: String, useValue: 'Hello'}]}); - - expect(injector.get(String)).toEqual('Hello'); - // #enddocregion - }); - }); - - describe('MultiProviderAspect', () => { - it('works', () => { - // #docregion MultiProviderAspect - const locale = new InjectionToken('locale'); - const injector = Injector.create({ - providers: [ - {provide: locale, multi: true, useValue: 'en'}, - {provide: locale, multi: true, useValue: 'sk'}, - ], - }); - - const locales: string[] = injector.get(locale); - expect(locales).toEqual(['en', 'sk']); - // #enddocregion - }); - }); - - describe('ClassProvider', () => { - it('works', () => { - // #docregion ClassProvider - abstract class Shape { - name!: string; - } - - class Square extends Shape { - override name = 'square'; - } - - const injector = Injector.create({providers: [{provide: Shape, useValue: new Square()}]}); - - const shape: Shape = injector.get(Shape); - expect(shape.name).toEqual('square'); - expect(shape instanceof Square).toBe(true); - // #enddocregion - }); - - it('is different then useExisting', () => { - // #docregion ClassProviderDifference - class Greeting { - salutation = 'Hello'; - } - - class FormalGreeting extends Greeting { - override salutation = 'Greetings'; - } - - const injector = Injector.create({ - providers: [ - {provide: FormalGreeting, useClass: FormalGreeting}, - {provide: Greeting, useClass: FormalGreeting}, - ], - }); - - // The injector returns different instances. - // See: {provide: ?, useExisting: ?} if you want the same instance. - expect(injector.get(FormalGreeting)).not.toBe(injector.get(Greeting)); - // #enddocregion - }); - }); - - describe('StaticClassProvider', () => { - it('works', () => { - // #docregion StaticClassProvider - abstract class Shape { - name!: string; - } - - class Square extends Shape { - override name = 'square'; - } - - const injector = Injector.create({ - providers: [{provide: Shape, useClass: Square, deps: []}], - }); - - const shape: Shape = injector.get(Shape); - expect(shape.name).toEqual('square'); - expect(shape instanceof Square).toBe(true); - // #enddocregion - }); - - it('is different then useExisting', () => { - // #docregion StaticClassProviderDifference - class Greeting { - salutation = 'Hello'; - } - - class FormalGreeting extends Greeting { - override salutation = 'Greetings'; - } - - const injector = Injector.create({ - providers: [ - {provide: FormalGreeting, useClass: FormalGreeting, deps: []}, - {provide: Greeting, useClass: FormalGreeting, deps: []}, - ], - }); - - // The injector returns different instances. - // See: {provide: ?, useExisting: ?} if you want the same instance. - expect(injector.get(FormalGreeting)).not.toBe(injector.get(Greeting)); - // #enddocregion - }); - }); - - describe('ConstructorProvider', () => { - it('works', () => { - // #docregion ConstructorProvider - class Square { - name = 'square'; - } - - const injector = Injector.create({providers: [{provide: Square, deps: []}]}); - - const shape: Square = injector.get(Square); - expect(shape.name).toEqual('square'); - expect(shape instanceof Square).toBe(true); - // #enddocregion - }); - }); - - describe('ExistingProvider', () => { - it('works', () => { - // #docregion ExistingProvider - class Greeting { - salutation = 'Hello'; - } - - class FormalGreeting extends Greeting { - override salutation = 'Greetings'; - } - - const injector = Injector.create({ - providers: [ - {provide: FormalGreeting, deps: []}, - {provide: Greeting, useExisting: FormalGreeting}, - ], - }); - - expect(injector.get(Greeting).salutation).toEqual('Greetings'); - expect(injector.get(FormalGreeting).salutation).toEqual('Greetings'); - expect(injector.get(FormalGreeting)).toBe(injector.get(Greeting)); - // #enddocregion - }); - }); - - describe('FactoryProvider', () => { - it('works', () => { - // #docregion FactoryProvider - const Location = new InjectionToken('location'); - const Hash = new InjectionToken('hash'); - - const injector = Injector.create({ - providers: [ - {provide: Location, useValue: 'https://angular.io/#someLocation'}, - { - provide: Hash, - useFactory: (location: string) => location.split('#')[1], - deps: [Location], - }, - ], - }); - - expect(injector.get(Hash)).toEqual('someLocation'); - // #enddocregion - }); - - it('supports optional dependencies', () => { - // #docregion FactoryProviderOptionalDeps - const Location = new InjectionToken('location'); - const Hash = new InjectionToken('hash'); - - const injector = Injector.create({ - providers: [ - { - provide: Hash, - useFactory: (location: string) => `Hash for: ${location}`, - // use a nested array to define metadata for dependencies. - deps: [[new Optional(), Location]], - }, - ], - }); - - expect(injector.get(Hash)).toEqual('Hash for: null'); - // #enddocregion - }); - }); - }); -} diff --git a/adev/src/content/api-examples/core/di/ts/viewChild/e2e_test/view_child_spec.ts b/adev/src/content/api-examples/core/di/ts/viewChild/e2e_test/view_child_spec.ts deleted file mode 100644 index d87f32534ffb3b..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/viewChild/e2e_test/view_child_spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -describe('viewChild example', () => { - afterEach(verifyNoBrowserErrors); - let button: ElementFinder; - let result: ElementFinder; - - beforeEach(() => { - browser.get('/di/viewChild'); - button = element(by.css('button')); - result = element(by.css('div')); - }); - - it('should query view child', () => { - expect(result.getText()).toEqual('Selected: 1'); - - button.click(); - - expect(result.getText()).toEqual('Selected: 2'); - }); -}); diff --git a/adev/src/content/api-examples/core/di/ts/viewChild/module.ts b/adev/src/content/api-examples/core/di/ts/viewChild/module.ts deleted file mode 100644 index c778282ee17855..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/viewChild/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; - -import {Pane, ViewChildComp} from './view_child_example'; - -@NgModule({ - imports: [BrowserModule], - declarations: [ViewChildComp, Pane], - bootstrap: [ViewChildComp], -}) -export class AppModule {} - -export {ViewChildComp as AppComponent}; diff --git a/adev/src/content/api-examples/core/di/ts/viewChild/view_child_example.ts b/adev/src/content/api-examples/core/di/ts/viewChild/view_child_example.ts deleted file mode 100644 index 4b92e478294093..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/viewChild/view_child_example.ts +++ /dev/null @@ -1,45 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion Component -import {Component, Directive, Input, ViewChild} from '@angular/core'; - -@Directive({ - selector: 'pane', - standalone: false, -}) -export class Pane { - @Input() id!: string; -} - -@Component({ - selector: 'example-app', - template: ` - - - - - -
Selected: {{ selectedPane }}
- `, - standalone: false, -}) -export class ViewChildComp { - @ViewChild(Pane) - set pane(v: Pane) { - setTimeout(() => { - this.selectedPane = v.id; - }, 0); - } - selectedPane: string = ''; - shouldShow = true; - toggle() { - this.shouldShow = !this.shouldShow; - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/core/di/ts/viewChild/view_child_howto.ts b/adev/src/content/api-examples/core/di/ts/viewChild/view_child_howto.ts deleted file mode 100644 index 959fee8d9de4eb..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/viewChild/view_child_howto.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion HowTo -import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core'; - -@Directive({ - selector: 'child-directive', - standalone: false, -}) -class ChildDirective {} - -@Component({ - selector: 'someCmp', - templateUrl: 'someCmp.html', - standalone: false, -}) -class SomeCmp implements AfterViewInit { - @ViewChild(ChildDirective) child!: ChildDirective; - - ngAfterViewInit() { - // child is set - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/core/di/ts/viewChildren/e2e_test/view_children_spec.ts b/adev/src/content/api-examples/core/di/ts/viewChildren/e2e_test/view_children_spec.ts deleted file mode 100644 index de21bc2dab0270..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/viewChildren/e2e_test/view_children_spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -describe('viewChildren example', () => { - afterEach(verifyNoBrowserErrors); - let button: ElementFinder; - let result: ElementFinder; - - beforeEach(() => { - browser.get('/di/viewChildren'); - button = element(by.css('button')); - result = element(by.css('div')); - }); - - it('should query view children', () => { - expect(result.getText()).toEqual('panes: 1, 2'); - - button.click(); - - expect(result.getText()).toEqual('panes: 1, 2, 3'); - }); -}); diff --git a/adev/src/content/api-examples/core/di/ts/viewChildren/module.ts b/adev/src/content/api-examples/core/di/ts/viewChildren/module.ts deleted file mode 100644 index 2956ed99afc26e..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/viewChildren/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; - -import {Pane, ViewChildrenComp} from './view_children_example'; - -@NgModule({ - imports: [BrowserModule], - declarations: [ViewChildrenComp, Pane], - bootstrap: [ViewChildrenComp], -}) -export class AppModule {} - -export {ViewChildrenComp as AppComponent}; diff --git a/adev/src/content/api-examples/core/di/ts/viewChildren/view_children_example.ts b/adev/src/content/api-examples/core/di/ts/viewChildren/view_children_example.ts deleted file mode 100644 index 06456ea1d3e016..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/viewChildren/view_children_example.ts +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion Component -import {AfterViewInit, Component, Directive, Input, QueryList, ViewChildren} from '@angular/core'; - -@Directive({ - selector: 'pane', - standalone: false, -}) -export class Pane { - @Input() id!: string; -} - -@Component({ - selector: 'example-app', - template: ` - - - - - - -
panes: {{ serializedPanes }}
- `, - standalone: false, -}) -export class ViewChildrenComp implements AfterViewInit { - @ViewChildren(Pane) panes!: QueryList; - serializedPanes: string = ''; - - shouldShow = false; - - show() { - this.shouldShow = true; - } - - ngAfterViewInit() { - this.calculateSerializedPanes(); - this.panes.changes.subscribe((r) => { - this.calculateSerializedPanes(); - }); - } - - calculateSerializedPanes() { - setTimeout(() => { - this.serializedPanes = this.panes.map((p) => p.id).join(', '); - }, 0); - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/core/di/ts/viewChildren/view_children_howto.ts b/adev/src/content/api-examples/core/di/ts/viewChildren/view_children_howto.ts deleted file mode 100644 index 0f3b0a6e94ba0e..00000000000000 --- a/adev/src/content/api-examples/core/di/ts/viewChildren/view_children_howto.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion HowTo -import {AfterViewInit, Component, Directive, QueryList, ViewChildren} from '@angular/core'; - -@Directive({ - selector: 'child-directive', - standalone: false, -}) -class ChildDirective {} - -@Component({ - selector: 'someCmp', - templateUrl: 'someCmp.html', - standalone: false, -}) -class SomeCmp implements AfterViewInit { - @ViewChildren(ChildDirective) viewChildren!: QueryList; - - ngAfterViewInit() { - // viewChildren is set - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/core/main.ts b/adev/src/content/api-examples/core/main.ts deleted file mode 100644 index 765eac5625c088..00000000000000 --- a/adev/src/content/api-examples/core/main.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import 'zone.js/lib/browser/rollup-main'; -import 'zone.js/lib/zone-spec/task-tracking'; - -// okd - -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -import {TestsAppModule} from './test_module'; - -platformBrowserDynamic().bootstrapModule(TestsAppModule); diff --git a/adev/src/content/api-examples/core/start-server.js b/adev/src/content/api-examples/core/start-server.js deleted file mode 100644 index 07d52c5eb3fa4d..00000000000000 --- a/adev/src/content/api-examples/core/start-server.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -const protractorUtils = require('@bazel/protractor/protractor-utils'); -const protractor = require('protractor'); - -module.exports = async function (config) { - const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []); - const serverUrl = `http://localhost:${port}`; - - protractor.browser.baseUrl = serverUrl; -}; diff --git a/adev/src/content/api-examples/core/test_module.ts b/adev/src/content/api-examples/core/test_module.ts deleted file mode 100644 index cc0d87f74602a5..00000000000000 --- a/adev/src/content/api-examples/core/test_module.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; - -import * as animationDslExample from './animation/ts/dsl/module'; -import * as diContentChildExample from './di/ts/contentChild/module'; -import * as diContentChildrenExample from './di/ts/contentChildren/module'; -import * as diViewChildExample from './di/ts/viewChild/module'; -import * as diViewChildrenExample from './di/ts/viewChildren/module'; -import * as testabilityWhenStableExample from './testability/ts/whenStable/module'; - -@Component({ - selector: 'example-app', - template: '', - standalone: false, -}) -export class TestsAppComponent {} - -@NgModule({ - imports: [ - animationDslExample.AppModule, - diContentChildExample.AppModule, - diContentChildrenExample.AppModule, - diViewChildExample.AppModule, - diViewChildrenExample.AppModule, - testabilityWhenStableExample.AppModule, - - // Router configuration so that the individual e2e tests can load their - // app components. - RouterModule.forRoot([ - {path: 'animation/dsl', component: animationDslExample.AppComponent}, - {path: 'di/contentChild', component: diContentChildExample.AppComponent}, - {path: 'di/contentChildren', component: diContentChildrenExample.AppComponent}, - {path: 'di/viewChild', component: diViewChildExample.AppComponent}, - {path: 'di/viewChildren', component: diViewChildrenExample.AppComponent}, - {path: 'testability/whenStable', component: testabilityWhenStableExample.AppComponent}, - ]), - ], - declarations: [TestsAppComponent], - bootstrap: [TestsAppComponent], -}) -export class TestsAppModule {} diff --git a/adev/src/content/api-examples/core/testability/ts/whenStable/e2e_test/testability_example_spec.ts b/adev/src/content/api-examples/core/testability/ts/whenStable/e2e_test/testability_example_spec.ts deleted file mode 100644 index 4bb31de89d471e..00000000000000 --- a/adev/src/content/api-examples/core/testability/ts/whenStable/e2e_test/testability_example_spec.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element} from 'protractor'; -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -// Declare the global "window" and "document" constant since we don't want to add the "dom" -// TypeScript lib for the e2e specs that execute code in the browser and reference such -// global constants. -declare const window: any; -declare const document: any; - -describe('testability example', () => { - afterEach(verifyNoBrowserErrors); - - describe('using task tracking', () => { - const URL = '/testability/whenStable/'; - - it('times out with a list of tasks', (done) => { - browser.get(URL); - browser.ignoreSynchronization = true; - - // Script that runs in the browser and calls whenStable with a timeout. - let waitWithResultScript = function (done: any) { - let rootEl = document.querySelector('example-app'); - let testability = window.getAngularTestability(rootEl); - testability.whenStable(() => { - done(); - }, 1000); - }; - - element(by.css('.start-button')).click(); - - browser.driver.executeAsyncScript(waitWithResultScript).then(() => { - expect(element(by.css('.status')).getText()).not.toContain('done'); - done(); - }); - }); - - afterAll(() => { - browser.ignoreSynchronization = false; - }); - }); -}); diff --git a/adev/src/content/api-examples/core/testability/ts/whenStable/module.ts b/adev/src/content/api-examples/core/testability/ts/whenStable/module.ts deleted file mode 100644 index 35894ea5ccf279..00000000000000 --- a/adev/src/content/api-examples/core/testability/ts/whenStable/module.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -export {AppModule, StableTestCmp as AppComponent} from './testability_example'; diff --git a/adev/src/content/api-examples/core/testability/ts/whenStable/testability_example.ts b/adev/src/content/api-examples/core/testability/ts/whenStable/testability_example.ts deleted file mode 100644 index 188de28984fa52..00000000000000 --- a/adev/src/content/api-examples/core/testability/ts/whenStable/testability_example.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; - -@Component({ - selector: 'example-app', - template: ` - -
Status: {{ status }}
- `, - standalone: false, -}) -export class StableTestCmp { - status = 'none'; - start() { - this.status = 'running'; - setTimeout(() => { - this.status = 'done'; - }, 5000); - } -} - -@NgModule({imports: [BrowserModule], declarations: [StableTestCmp], bootstrap: [StableTestCmp]}) -export class AppModule {} diff --git a/adev/src/content/api-examples/core/testing/ts/example_spec.ts b/adev/src/content/api-examples/core/testing/ts/example_spec.ts deleted file mode 100644 index 5151e20f499e4b..00000000000000 --- a/adev/src/content/api-examples/core/testing/ts/example_spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// Import the "fake_async" example that registers tests which are shown as examples. These need -// to be valid tests, so we run them here. Note that we need to add this layer of abstraction here -// because the "jasmine_node_test" rule only picks up test files with the "_spec.ts" file suffix. -import './fake_async'; diff --git a/adev/src/content/api-examples/core/testing/ts/fake_async.ts b/adev/src/content/api-examples/core/testing/ts/fake_async.ts deleted file mode 100644 index 7c853bab709d43..00000000000000 --- a/adev/src/content/api-examples/core/testing/ts/fake_async.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {discardPeriodicTasks, fakeAsync, tick} from '@angular/core/testing'; - -// #docregion basic -describe('this test', () => { - it( - 'looks async but is synchronous', - fakeAsync((): void => { - let flag = false; - setTimeout(() => { - flag = true; - }, 100); - expect(flag).toBe(false); - tick(50); - expect(flag).toBe(false); - tick(50); - expect(flag).toBe(true); - }), - ); -}); -// #enddocregion - -describe('this test', () => { - it( - 'aborts a periodic timer', - fakeAsync((): void => { - // This timer is scheduled but doesn't need to complete for the - // test to pass (maybe it's a timeout for some operation). - // Leaving it will cause the test to fail... - setInterval(() => {}, 100); - - // Unless we clean it up first. - discardPeriodicTasks(); - }), - ); -}); diff --git a/adev/src/content/api-examples/core/ts/.gitkeep b/adev/src/content/api-examples/core/ts/.gitkeep deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/adev/src/content/api-examples/core/ts/bootstrap/bootstrap.ts b/adev/src/content/api-examples/core/ts/bootstrap/bootstrap.ts deleted file mode 100644 index 2f0a19ee57a28a..00000000000000 --- a/adev/src/content/api-examples/core/ts/bootstrap/bootstrap.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -@Component({ - selector: 'app-root', - template: 'Hello {{ name }}!', - standalone: false, -}) -class MyApp { - name: string = 'World'; -} - -@NgModule({imports: [BrowserModule], bootstrap: [MyApp]}) -class AppModule {} - -export function main() { - platformBrowserDynamic().bootstrapModule(AppModule); -} diff --git a/adev/src/content/api-examples/core/ts/change_detect/change-detection.ts b/adev/src/content/api-examples/core/ts/change_detect/change-detection.ts deleted file mode 100644 index ac7dd5a7a766b5..00000000000000 --- a/adev/src/content/api-examples/core/ts/change_detect/change-detection.ts +++ /dev/null @@ -1,126 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -/* tslint:disable:no-console */ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - Input, - NgModule, -} from '@angular/core'; -import {FormsModule} from '@angular/forms'; - -// #docregion mark-for-check -@Component({ - selector: 'app-root', - template: ` - Number of ticks: {{ numberOfTicks }} - `, - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false, -}) -class AppComponent { - numberOfTicks = 0; - - constructor(private ref: ChangeDetectorRef) { - setInterval(() => { - this.numberOfTicks++; - // require view to be updated - this.ref.markForCheck(); - }, 1000); - } -} -// #enddocregion mark-for-check - -// #docregion detach -class DataListProvider { - // in a real application the returned data will be different every time - get data() { - return [1, 2, 3, 4, 5]; - } -} - -@Component({ - selector: 'giant-list', - template: ` -
  • Data {{ d }}
    • - `, - standalone: false, -}) -class GiantList { - constructor( - private ref: ChangeDetectorRef, - public dataProvider: DataListProvider, - ) { - ref.detach(); - setInterval(() => { - this.ref.detectChanges(); - }, 5000); - } -} - -@Component({ - selector: 'app', - providers: [DataListProvider], - template: ` - - `, - standalone: false, -}) -class App {} -// #enddocregion detach - -// #docregion reattach -class DataProvider { - data = 1; - constructor() { - setInterval(() => { - this.data = 2; - }, 500); - } -} - -@Component({ - selector: 'live-data', - inputs: ['live'], - template: 'Data: {{dataProvider.data}}', - standalone: false, -}) -class LiveData { - constructor( - private ref: ChangeDetectorRef, - public dataProvider: DataProvider, - ) {} - - @Input() - set live(value: boolean) { - if (value) { - this.ref.reattach(); - } else { - this.ref.detach(); - } - } -} - -@Component({ - selector: 'app', - providers: [DataProvider], - template: ` - Live Update: - - - `, - standalone: false, -}) -class App1 { - live = true; -} -// #enddocregion reattach - -@NgModule({declarations: [AppComponent, GiantList, App, LiveData, App1], imports: [FormsModule]}) -class CoreExamplesModule {} diff --git a/adev/src/content/api-examples/core/ts/metadata/directives.ts b/adev/src/content/api-examples/core/ts/metadata/directives.ts deleted file mode 100644 index 6c2b95012737ae..00000000000000 --- a/adev/src/content/api-examples/core/ts/metadata/directives.ts +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -/* tslint:disable:no-console */ -import {Component, Directive, EventEmitter, NgModule} from '@angular/core'; - -// #docregion component-input -@Component({ - selector: 'app-bank-account', - inputs: ['bankName', 'id: account-id'], - template: ` - Bank Name: {{ bankName }} Account Id: {{ id }} - `, - standalone: false, -}) -export class BankAccountComponent { - bankName: string | null = null; - id: string | null = null; - - // this property is not bound, and won't be automatically updated by Angular - normalizedBankName: string | null = null; -} - -@Component({ - selector: 'app-my-input', - template: ` - - `, - standalone: false, -}) -export class MyInputComponent {} -// #enddocregion component-input - -// #docregion component-output-interval -@Directive({ - selector: 'app-interval-dir', - outputs: ['everySecond', 'fiveSecs: everyFiveSeconds'], - standalone: false, -}) -export class IntervalDirComponent { - everySecond = new EventEmitter(); - fiveSecs = new EventEmitter(); - - constructor() { - setInterval(() => this.everySecond.emit('event'), 1000); - setInterval(() => this.fiveSecs.emit('event'), 5000); - } -} - -@Component({ - selector: 'app-my-output', - template: ` - - `, - standalone: false, -}) -export class MyOutputComponent { - onEverySecond() { - console.log('second'); - } - onEveryFiveSeconds() { - console.log('five seconds'); - } -} -// #enddocregion component-output-interval - -@NgModule({ - declarations: [BankAccountComponent, MyInputComponent, IntervalDirComponent, MyOutputComponent], -}) -export class AppModule {} diff --git a/adev/src/content/api-examples/core/ts/metadata/encapsulation.ts b/adev/src/content/api-examples/core/ts/metadata/encapsulation.ts deleted file mode 100644 index 910d3924709e3c..00000000000000 --- a/adev/src/content/api-examples/core/ts/metadata/encapsulation.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, ViewEncapsulation} from '@angular/core'; - -// #docregion longform -@Component({ - selector: 'app-root', - template: ` -

    Hello World!

    - Shadow DOM Rocks! - `, - styles: [ - ` - :host { - display: block; - border: 1px solid black; - } - h1 { - color: blue; - } - .red { - background-color: red; - } - `, - ], - encapsulation: ViewEncapsulation.ShadowDom, - standalone: false, -}) -class MyApp {} -// #enddocregion diff --git a/adev/src/content/api-examples/core/ts/metadata/lifecycle_hooks_spec.ts b/adev/src/content/api-examples/core/ts/metadata/lifecycle_hooks_spec.ts deleted file mode 100644 index ebb2b728cfb667..00000000000000 --- a/adev/src/content/api-examples/core/ts/metadata/lifecycle_hooks_spec.ts +++ /dev/null @@ -1,221 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import { - AfterContentChecked, - AfterContentInit, - AfterViewChecked, - AfterViewInit, - Component, - DoCheck, - Input, - OnChanges, - OnDestroy, - OnInit, - SimpleChanges, - Type, -} from '@angular/core'; -import {TestBed} from '@angular/core/testing'; - -(function () { - describe('lifecycle hooks examples', () => { - it('should work with ngOnInit', () => { - // #docregion OnInit - @Component({ - selector: 'my-cmp', - template: ` - ... - `, - standalone: false, - }) - class MyComponent implements OnInit { - ngOnInit() { - // ... - } - } - // #enddocregion - - expect(createAndLogComponent(MyComponent)).toEqual([['ngOnInit', []]]); - }); - - it('should work with ngDoCheck', () => { - // #docregion DoCheck - @Component({ - selector: 'my-cmp', - template: ` - ... - `, - standalone: false, - }) - class MyComponent implements DoCheck { - ngDoCheck() { - // ... - } - } - // #enddocregion - - expect(createAndLogComponent(MyComponent)).toEqual([['ngDoCheck', []]]); - }); - - it('should work with ngAfterContentChecked', () => { - // #docregion AfterContentChecked - @Component({ - selector: 'my-cmp', - template: ` - ... - `, - standalone: false, - }) - class MyComponent implements AfterContentChecked { - ngAfterContentChecked() { - // ... - } - } - // #enddocregion - - expect(createAndLogComponent(MyComponent)).toEqual([['ngAfterContentChecked', []]]); - }); - - it('should work with ngAfterContentInit', () => { - // #docregion AfterContentInit - @Component({ - selector: 'my-cmp', - template: ` - ... - `, - standalone: false, - }) - class MyComponent implements AfterContentInit { - ngAfterContentInit() { - // ... - } - } - // #enddocregion - - expect(createAndLogComponent(MyComponent)).toEqual([['ngAfterContentInit', []]]); - }); - - it('should work with ngAfterViewChecked', () => { - // #docregion AfterViewChecked - @Component({ - selector: 'my-cmp', - template: ` - ... - `, - standalone: false, - }) - class MyComponent implements AfterViewChecked { - ngAfterViewChecked() { - // ... - } - } - // #enddocregion - - expect(createAndLogComponent(MyComponent)).toEqual([['ngAfterViewChecked', []]]); - }); - - it('should work with ngAfterViewInit', () => { - // #docregion AfterViewInit - @Component({ - selector: 'my-cmp', - template: ` - ... - `, - standalone: false, - }) - class MyComponent implements AfterViewInit { - ngAfterViewInit() { - // ... - } - } - // #enddocregion - - expect(createAndLogComponent(MyComponent)).toEqual([['ngAfterViewInit', []]]); - }); - - it('should work with ngOnDestroy', () => { - // #docregion OnDestroy - @Component({ - selector: 'my-cmp', - template: ` - ... - `, - standalone: false, - }) - class MyComponent implements OnDestroy { - ngOnDestroy() { - // ... - } - } - // #enddocregion - - expect(createAndLogComponent(MyComponent)).toEqual([['ngOnDestroy', []]]); - }); - - it('should work with ngOnChanges', () => { - // #docregion OnChanges - @Component({ - selector: 'my-cmp', - template: ` - ... - `, - standalone: false, - }) - class MyComponent implements OnChanges { - @Input() prop: number = 0; - - ngOnChanges(changes: SimpleChanges) { - // changes.prop contains the old and the new value... - } - } - // #enddocregion - - const log = createAndLogComponent(MyComponent, ['prop']); - expect(log.length).toBe(1); - expect(log[0][0]).toBe('ngOnChanges'); - const changes: SimpleChanges = log[0][1][0]; - expect(changes['prop'].currentValue).toBe(true); - }); - }); - - function createAndLogComponent(clazz: Type, inputs: string[] = []): any[] { - const log: any[] = []; - createLoggingSpiesFromProto(clazz, log); - - const inputBindings = inputs.map((input) => `[${input}] = true`).join(' '); - - @Component({ - template: ` - - `, - standalone: false, - }) - class ParentComponent {} - - const fixture = TestBed.configureTestingModule({ - declarations: [ParentComponent, clazz], - }).createComponent(ParentComponent); - fixture.detectChanges(); - fixture.destroy(); - return log; - } - - function createLoggingSpiesFromProto(clazz: Type, log: any[]) { - const proto = clazz.prototype; - // For ES2015+ classes, members are not enumerable in the prototype. - Object.getOwnPropertyNames(proto).forEach((method) => { - if (method === 'constructor') { - return; - } - - proto[method] = (...args: any[]) => { - log.push([method, args]); - }; - }); - } -})(); diff --git a/adev/src/content/api-examples/core/ts/metadata/metadata.ts b/adev/src/content/api-examples/core/ts/metadata/metadata.ts deleted file mode 100644 index 102cf9d71da2eb..00000000000000 --- a/adev/src/content/api-examples/core/ts/metadata/metadata.ts +++ /dev/null @@ -1,66 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Attribute, Component, Directive, Pipe} from '@angular/core'; - -class CustomDirective {} - -@Component({ - selector: 'greet', - template: 'Hello {{name}}!', - standalone: false, -}) -class Greet { - name: string = 'World'; -} - -// #docregion attributeFactory -@Component({ - selector: 'page', - template: 'Title: {{title}}', - standalone: false, -}) -class Page { - title: string; - constructor(@Attribute('title') title: string) { - this.title = title; - } -} -// #enddocregion - -// #docregion attributeMetadata -@Directive({ - selector: 'input', - standalone: false, -}) -class InputAttrDirective { - constructor(@Attribute('type') type: string) { - // type would be 'text' in this example - } -} -// #enddocregion - -@Directive({ - selector: 'input', - standalone: false, -}) -class InputDirective { - constructor() { - // Add some logic. - } -} - -@Pipe({ - name: 'lowercase', - standalone: false, -}) -class Lowercase { - transform(v: string, args: any[]) { - return v.toLowerCase(); - } -} diff --git a/adev/src/content/api-examples/core/ts/pipes/pipeTransFormEx_module.ts b/adev/src/content/api-examples/core/ts/pipes/pipeTransFormEx_module.ts deleted file mode 100644 index 6bef0d0a9a1c22..00000000000000 --- a/adev/src/content/api-examples/core/ts/pipes/pipeTransFormEx_module.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {TruncatePipe as SimpleTruncatePipe} from './simple_truncate'; -import {TruncatePipe} from './truncate'; - -@NgModule({declarations: [SimpleTruncatePipe, TruncatePipe]}) -export class TruncateModule {} diff --git a/adev/src/content/api-examples/core/ts/pipes/simple_truncate.ts b/adev/src/content/api-examples/core/ts/pipes/simple_truncate.ts deleted file mode 100644 index 52665e9d83f2c4..00000000000000 --- a/adev/src/content/api-examples/core/ts/pipes/simple_truncate.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -// #docregion -import {Pipe, PipeTransform} from '@angular/core'; - -@Pipe({ - name: 'truncate', - standalone: false, -}) -export class TruncatePipe implements PipeTransform { - transform(value: string) { - return value.split(' ').slice(0, 2).join(' ') + '...'; - } -} diff --git a/adev/src/content/api-examples/core/ts/pipes/truncate.ts b/adev/src/content/api-examples/core/ts/pipes/truncate.ts deleted file mode 100644 index 10bd278d188643..00000000000000 --- a/adev/src/content/api-examples/core/ts/pipes/truncate.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -// #docregion -import {Pipe, PipeTransform} from '@angular/core'; - -@Pipe({ - name: 'truncate', - standalone: false, -}) -export class TruncatePipe implements PipeTransform { - transform(value: string, length: number, symbol: string) { - return value.split(' ').slice(0, length).join(' ') + symbol; - } -} diff --git a/adev/src/content/api-examples/core/ts/platform/platform.ts b/adev/src/content/api-examples/core/ts/platform/platform.ts deleted file mode 100644 index 2d3916a41e6309..00000000000000 --- a/adev/src/content/api-examples/core/ts/platform/platform.ts +++ /dev/null @@ -1,88 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {ApplicationRef, Component, DoBootstrap, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; - -@Component({ - selector: 'app-root', - template: ` -

    Component One

    - `, - standalone: false, -}) -export class ComponentOne {} - -@Component({ - selector: 'app-root', - template: ` -

    Component Two

    - `, - standalone: false, -}) -export class ComponentTwo {} - -@Component({ - selector: 'app-root', - template: ` -

    Component Three

    - `, - standalone: false, -}) -export class ComponentThree {} - -@Component({ - selector: 'app-root', - template: ` -

    Component Four

    - `, - standalone: false, -}) -export class ComponentFour {} - -@NgModule({imports: [BrowserModule], declarations: [ComponentOne, ComponentTwo]}) -export class AppModule implements DoBootstrap { - // #docregion componentSelector - ngDoBootstrap(appRef: ApplicationRef) { - this.fetchDataFromApi().then((componentName: string) => { - if (componentName === 'ComponentOne') { - appRef.bootstrap(ComponentOne); - } else { - appRef.bootstrap(ComponentTwo); - } - }); - } - // #enddocregion - - fetchDataFromApi(): Promise { - return new Promise((resolve) => { - setTimeout(() => { - resolve('ComponentTwo'); - }, 2000); - }); - } -} - -@NgModule({imports: [BrowserModule], declarations: [ComponentThree]}) -export class AppModuleTwo implements DoBootstrap { - // #docregion cssSelector - ngDoBootstrap(appRef: ApplicationRef) { - appRef.bootstrap(ComponentThree, '#root-element'); - } - // #enddocregion cssSelector -} - -@NgModule({imports: [BrowserModule], declarations: [ComponentFour]}) -export class AppModuleThree implements DoBootstrap { - // #docregion domNode - ngDoBootstrap(appRef: ApplicationRef) { - const element = document.querySelector('#root-element'); - appRef.bootstrap(ComponentFour, element); - } - // #enddocregion domNode -} diff --git a/adev/src/content/api-examples/core/ts/prod_mode/my_component.ts b/adev/src/content/api-examples/core/ts/prod_mode/my_component.ts deleted file mode 100644 index 948e8d25e2beec..00000000000000 --- a/adev/src/content/api-examples/core/ts/prod_mode/my_component.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component} from '@angular/core'; - -@Component({ - selector: 'my-component', - template: '

    My Component

    ', - standalone: false, -}) -export class MyComponent {} diff --git a/adev/src/content/api-examples/core/ts/prod_mode/prod_mode_example.ts b/adev/src/content/api-examples/core/ts/prod_mode/prod_mode_example.ts deleted file mode 100644 index a062b71f45bffb..00000000000000 --- a/adev/src/content/api-examples/core/ts/prod_mode/prod_mode_example.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {enableProdMode, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -import {MyComponent} from './my_component'; - -enableProdMode(); - -@NgModule({imports: [BrowserModule], declarations: [MyComponent], bootstrap: [MyComponent]}) -export class AppModule {} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/api-examples/forms/BUILD.bazel b/adev/src/content/api-examples/forms/BUILD.bazel deleted file mode 100644 index e560852662236d..00000000000000 --- a/adev/src/content/api-examples/forms/BUILD.bazel +++ /dev/null @@ -1,63 +0,0 @@ -load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library") - -package(default_visibility = ["//visibility:public"]) - -ng_module( - name = "forms_examples", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*_spec.ts"], - ), - deps = [ - "//packages/core", - "//packages/forms", - "//packages/platform-browser", - "//packages/platform-browser-dynamic", - "//packages/router", - "//packages/zone.js/lib", - "@npm//rxjs", - ], -) - -ts_library( - name = "forms_e2e_tests_lib", - testonly = True, - srcs = glob(["**/e2e_test/*_spec.ts"]), - tsconfig = "//packages/examples:tsconfig-e2e.json", - deps = [ - "//packages/examples/test-utils", - "//packages/private/testing", - "@npm//@types/jasminewd2", - "@npm//protractor", - ], -) - -esbuild( - name = "app_bundle", - entry_point = ":main.ts", - deps = [":forms_examples"], -) - -http_server( - name = "devserver", - srcs = ["//packages/examples:index.html"], - additional_root_paths = ["angular/packages/examples"], - deps = [":app_bundle"], -) - -protractor_web_test_suite( - name = "protractor_tests", - on_prepare = ":start-server.js", - server = ":devserver", - deps = [ - ":forms_e2e_tests_lib", - "@npm//selenium-webdriver", - ], -) - -filegroup( - name = "files_for_docgen", - srcs = glob([ - "**/*.ts", - ]), -) diff --git a/adev/src/content/api-examples/forms/main.ts b/adev/src/content/api-examples/forms/main.ts deleted file mode 100644 index 0c83c8112df02d..00000000000000 --- a/adev/src/content/api-examples/forms/main.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import 'zone.js/lib/browser/rollup-main'; - -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -import {TestsAppModule} from './test_module'; - -platformBrowserDynamic().bootstrapModule(TestsAppModule); diff --git a/adev/src/content/api-examples/forms/start-server.js b/adev/src/content/api-examples/forms/start-server.js deleted file mode 100644 index 07d52c5eb3fa4d..00000000000000 --- a/adev/src/content/api-examples/forms/start-server.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -const protractorUtils = require('@bazel/protractor/protractor-utils'); -const protractor = require('protractor'); - -module.exports = async function (config) { - const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []); - const serverUrl = `http://localhost:${port}`; - - protractor.browser.baseUrl = serverUrl; -}; diff --git a/adev/src/content/api-examples/forms/test_module.ts b/adev/src/content/api-examples/forms/test_module.ts deleted file mode 100644 index 5b992ce0230024..00000000000000 --- a/adev/src/content/api-examples/forms/test_module.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; - -import * as formBuilderExample from './ts/formBuilder/module'; -import * as nestedFormArrayExample from './ts/nestedFormArray/module'; -import * as nestedFormGroupExample from './ts/nestedFormGroup/module'; -import * as ngModelGroupExample from './ts/ngModelGroup/module'; -import * as radioButtonsExample from './ts/radioButtons/module'; -import * as reactiveRadioButtonsExample from './ts/reactiveRadioButtons/module'; -import * as reactiveSelectControlExample from './ts/reactiveSelectControl/module'; -import * as selectControlExample from './ts/selectControl/module'; -import * as simpleFormExample from './ts/simpleForm/module'; -import * as simpleFormControlExample from './ts/simpleFormControl/module'; -import * as simpleFormGroupExample from './ts/simpleFormGroup/module'; -import * as simpleNgModelExample from './ts/simpleNgModel/module'; - -@Component({ - selector: 'example-app', - template: '', - standalone: false, -}) -export class TestsAppComponent {} - -@NgModule({ - imports: [ - formBuilderExample.AppModule, - nestedFormArrayExample.AppModule, - nestedFormGroupExample.AppModule, - ngModelGroupExample.AppModule, - radioButtonsExample.AppModule, - reactiveRadioButtonsExample.AppModule, - reactiveSelectControlExample.AppModule, - selectControlExample.AppModule, - simpleFormExample.AppModule, - simpleFormControlExample.AppModule, - simpleFormGroupExample.AppModule, - simpleNgModelExample.AppModule, - - // Router configuration so that the individual e2e tests can load their - // app components. - RouterModule.forRoot([ - {path: 'formBuilder', component: formBuilderExample.AppComponent}, - {path: 'nestedFormArray', component: nestedFormArrayExample.AppComponent}, - {path: 'nestedFormGroup', component: nestedFormGroupExample.AppComponent}, - {path: 'ngModelGroup', component: ngModelGroupExample.AppComponent}, - {path: 'radioButtons', component: radioButtonsExample.AppComponent}, - {path: 'reactiveRadioButtons', component: reactiveRadioButtonsExample.AppComponent}, - {path: 'reactiveSelectControl', component: reactiveSelectControlExample.AppComponent}, - {path: 'selectControl', component: selectControlExample.AppComponent}, - {path: 'simpleForm', component: simpleFormExample.AppComponent}, - {path: 'simpleFormControl', component: simpleFormControlExample.AppComponent}, - {path: 'simpleFormGroup', component: simpleFormGroupExample.AppComponent}, - {path: 'simpleNgModel', component: simpleNgModelExample.AppComponent}, - ]), - ], - declarations: [TestsAppComponent], - bootstrap: [TestsAppComponent], -}) -export class TestsAppModule {} diff --git a/adev/src/content/api-examples/forms/ts/formBuilder/e2e_test/form_builder_spec.ts b/adev/src/content/api-examples/forms/ts/formBuilder/e2e_test/form_builder_spec.ts deleted file mode 100644 index 6a837d1705a72f..00000000000000 --- a/adev/src/content/api-examples/forms/ts/formBuilder/e2e_test/form_builder_spec.ts +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('formBuilder example', () => { - afterEach(verifyNoBrowserErrors); - let inputs: ElementArrayFinder; - let paragraphs: ElementArrayFinder; - - beforeEach(() => { - browser.get('/formBuilder'); - inputs = element.all(by.css('input')); - paragraphs = element.all(by.css('p')); - }); - - it('should populate the UI with initial values', () => { - expect(inputs.get(0).getAttribute('value')).toEqual('Nancy'); - expect(inputs.get(1).getAttribute('value')).toEqual('Drew'); - }); - - it('should update the validation status', () => { - expect(paragraphs.get(1).getText()).toEqual('Validation status: VALID'); - - inputs.get(0).click(); - inputs.get(0).clear(); - inputs.get(0).sendKeys('a'); - expect(paragraphs.get(1).getText()).toEqual('Validation status: INVALID'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/formBuilder/form_builder_example.ts b/adev/src/content/api-examples/forms/ts/formBuilder/form_builder_example.ts deleted file mode 100644 index c60a9f720c64dc..00000000000000 --- a/adev/src/content/api-examples/forms/ts/formBuilder/form_builder_example.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion disabled-control -import {Component, Inject} from '@angular/core'; -import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'; -// #enddocregion disabled-control - -@Component({ - selector: 'example-app', - template: ` -
    -
    - - -
    - - -
    - -

    Value: {{ form.value | json }}

    -

    Validation status: {{ form.status }}

    - `, - standalone: false, -}) -export class FormBuilderComp { - form: FormGroup; - - constructor(@Inject(FormBuilder) formBuilder: FormBuilder) { - this.form = formBuilder.group( - { - name: formBuilder.group({ - first: ['Nancy', Validators.minLength(2)], - last: 'Drew', - }), - email: '', - }, - {updateOn: 'change'}, - ); - } -} - -// #docregion disabled-control -@Component({ - selector: 'app-disabled-form-control', - template: ` - - `, - standalone: false, -}) -export class DisabledFormControlComponent { - control: FormControl; - - constructor(private formBuilder: FormBuilder) { - this.control = formBuilder.control({value: 'my val', disabled: true}); - } -} -// #enddocregion disabled-control diff --git a/adev/src/content/api-examples/forms/ts/formBuilder/module.ts b/adev/src/content/api-examples/forms/ts/formBuilder/module.ts deleted file mode 100644 index 6330713e9a5718..00000000000000 --- a/adev/src/content/api-examples/forms/ts/formBuilder/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {DisabledFormControlComponent, FormBuilderComp} from './form_builder_example'; - -@NgModule({ - imports: [BrowserModule, ReactiveFormsModule], - declarations: [FormBuilderComp, DisabledFormControlComponent], - bootstrap: [FormBuilderComp], -}) -export class AppModule {} - -export {FormBuilderComp as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/nestedFormArray/e2e_test/nested_form_array_spec.ts b/adev/src/content/api-examples/forms/ts/nestedFormArray/e2e_test/nested_form_array_spec.ts deleted file mode 100644 index 304081add69c35..00000000000000 --- a/adev/src/content/api-examples/forms/ts/nestedFormArray/e2e_test/nested_form_array_spec.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('nestedFormArray example', () => { - afterEach(verifyNoBrowserErrors); - let inputs: ElementArrayFinder; - let buttons: ElementArrayFinder; - - beforeEach(() => { - browser.get('/nestedFormArray'); - inputs = element.all(by.css('input')); - buttons = element.all(by.css('button')); - }); - - it('should populate the UI with initial values', () => { - expect(inputs.get(0).getAttribute('value')).toEqual('SF'); - expect(inputs.get(1).getAttribute('value')).toEqual('NY'); - }); - - it('should add inputs programmatically', () => { - expect(inputs.count()).toBe(2); - - buttons.get(1).click(); - inputs = element.all(by.css('input')); - - expect(inputs.count()).toBe(3); - }); - - it('should set the value programmatically', () => { - buttons.get(2).click(); - expect(inputs.get(0).getAttribute('value')).toEqual('LA'); - expect(inputs.get(1).getAttribute('value')).toEqual('MTV'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/nestedFormArray/module.ts b/adev/src/content/api-examples/forms/ts/nestedFormArray/module.ts deleted file mode 100644 index 166d2f90c8aac6..00000000000000 --- a/adev/src/content/api-examples/forms/ts/nestedFormArray/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {NestedFormArray} from './nested_form_array_example'; - -@NgModule({ - imports: [BrowserModule, ReactiveFormsModule], - declarations: [NestedFormArray], - bootstrap: [NestedFormArray], -}) -export class AppModule {} - -export {NestedFormArray as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/nestedFormArray/nested_form_array_example.ts b/adev/src/content/api-examples/forms/ts/nestedFormArray/nested_form_array_example.ts deleted file mode 100644 index 9b5459db2ae8a0..00000000000000 --- a/adev/src/content/api-examples/forms/ts/nestedFormArray/nested_form_array_example.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -/* tslint:disable:no-console */ -// #docregion Component -import {Component} from '@angular/core'; -import {FormArray, FormControl, FormGroup} from '@angular/forms'; - -@Component({ - selector: 'example-app', - template: ` -
    -
    -
    - -
    -
    - -
    - - - - `, - standalone: false, -}) -export class NestedFormArray { - form = new FormGroup({ - cities: new FormArray([new FormControl('SF'), new FormControl('NY')]), - }); - - get cities(): FormArray { - return this.form.get('cities') as FormArray; - } - - addCity() { - this.cities.push(new FormControl()); - } - - onSubmit() { - console.log(this.cities.value); // ['SF', 'NY'] - console.log(this.form.value); // { cities: ['SF', 'NY'] } - } - - setPreset() { - this.cities.patchValue(['LA', 'MTV']); - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/forms/ts/nestedFormGroup/e2e_test/nested_form_group_spec.ts b/adev/src/content/api-examples/forms/ts/nestedFormGroup/e2e_test/nested_form_group_spec.ts deleted file mode 100644 index 037106c194b6db..00000000000000 --- a/adev/src/content/api-examples/forms/ts/nestedFormGroup/e2e_test/nested_form_group_spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('nestedFormGroup example', () => { - afterEach(verifyNoBrowserErrors); - let firstInput: ElementFinder; - let lastInput: ElementFinder; - let button: ElementFinder; - - beforeEach(() => { - browser.get('/nestedFormGroup'); - firstInput = element(by.css('[formControlName="first"]')); - lastInput = element(by.css('[formControlName="last"]')); - button = element(by.css('button:not([type="submit"])')); - }); - - it('should populate the UI with initial values', () => { - expect(firstInput.getAttribute('value')).toEqual('Nancy'); - expect(lastInput.getAttribute('value')).toEqual('Drew'); - }); - - it('should show the error when name is invalid', () => { - firstInput.click(); - firstInput.clear(); - firstInput.sendKeys('a'); - - expect(element(by.css('p')).getText()).toEqual('Name is invalid.'); - }); - - it('should set the value programmatically', () => { - button.click(); - expect(firstInput.getAttribute('value')).toEqual('Bess'); - expect(lastInput.getAttribute('value')).toEqual('Marvin'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/nestedFormGroup/module.ts b/adev/src/content/api-examples/forms/ts/nestedFormGroup/module.ts deleted file mode 100644 index 4e6c4e9d47e2bd..00000000000000 --- a/adev/src/content/api-examples/forms/ts/nestedFormGroup/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {NestedFormGroupComp} from './nested_form_group_example'; - -@NgModule({ - imports: [BrowserModule, ReactiveFormsModule], - declarations: [NestedFormGroupComp], - bootstrap: [NestedFormGroupComp], -}) -export class AppModule {} - -export {NestedFormGroupComp as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/nestedFormGroup/nested_form_group_example.ts b/adev/src/content/api-examples/forms/ts/nestedFormGroup/nested_form_group_example.ts deleted file mode 100644 index dec365ea760db7..00000000000000 --- a/adev/src/content/api-examples/forms/ts/nestedFormGroup/nested_form_group_example.ts +++ /dev/null @@ -1,60 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -/* tslint:disable:no-console */ -// #docregion Component -import {Component} from '@angular/core'; -import {FormControl, FormGroup, Validators} from '@angular/forms'; - -@Component({ - selector: 'example-app', - template: ` -
    -

    Name is invalid.

    - -
    - - -
    - - -
    - - - `, - standalone: false, -}) -export class NestedFormGroupComp { - form = new FormGroup({ - name: new FormGroup({ - first: new FormControl('Nancy', Validators.minLength(2)), - last: new FormControl('Drew', Validators.required), - }), - email: new FormControl(), - }); - - get first(): any { - return this.form.get('name.first'); - } - - get name(): any { - return this.form.get('name'); - } - - onSubmit() { - console.log(this.first.value); // 'Nancy' - console.log(this.name.value); // {first: 'Nancy', last: 'Drew'} - console.log(this.form.value); // {name: {first: 'Nancy', last: 'Drew'}, email: ''} - console.log(this.form.status); // VALID - } - - setPreset() { - this.name.setValue({first: 'Bess', last: 'Marvin'}); - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/forms/ts/ngModelGroup/e2e_test/ng_model_group_spec.ts b/adev/src/content/api-examples/forms/ts/ngModelGroup/e2e_test/ng_model_group_spec.ts deleted file mode 100644 index 2dddce99af7082..00000000000000 --- a/adev/src/content/api-examples/forms/ts/ngModelGroup/e2e_test/ng_model_group_spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('ngModelGroup example', () => { - afterEach(verifyNoBrowserErrors); - let inputs: ElementArrayFinder; - let buttons: ElementArrayFinder; - - beforeEach(() => { - browser.get('/ngModelGroup'); - inputs = element.all(by.css('input')); - buttons = element.all(by.css('button')); - }); - - it('should populate the UI with initial values', () => { - expect(inputs.get(0).getAttribute('value')).toEqual('Nancy'); - expect(inputs.get(1).getAttribute('value')).toEqual('J'); - expect(inputs.get(2).getAttribute('value')).toEqual('Drew'); - }); - - it('should show the error when name is invalid', () => { - inputs.get(0).click(); - inputs.get(0).clear(); - inputs.get(0).sendKeys('a'); - - expect(element(by.css('p')).getText()).toEqual('Name is invalid.'); - }); - - it('should set the value when changing the domain model', () => { - buttons.get(1).click(); - expect(inputs.get(0).getAttribute('value')).toEqual('Bess'); - expect(inputs.get(1).getAttribute('value')).toEqual('S'); - expect(inputs.get(2).getAttribute('value')).toEqual('Marvin'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/ngModelGroup/module.ts b/adev/src/content/api-examples/forms/ts/ngModelGroup/module.ts deleted file mode 100644 index 2e538c902f1f3a..00000000000000 --- a/adev/src/content/api-examples/forms/ts/ngModelGroup/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {NgModelGroupComp} from './ng_model_group_example'; - -@NgModule({ - imports: [BrowserModule, FormsModule], - declarations: [NgModelGroupComp], - bootstrap: [NgModelGroupComp], -}) -export class AppModule {} - -export {NgModelGroupComp as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/ngModelGroup/ng_model_group_example.ts b/adev/src/content/api-examples/forms/ts/ngModelGroup/ng_model_group_example.ts deleted file mode 100644 index 9e272d574e2df4..00000000000000 --- a/adev/src/content/api-examples/forms/ts/ngModelGroup/ng_model_group_example.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -/* tslint:disable:no-console */ -// #docregion Component -import {Component} from '@angular/core'; -import {NgForm} from '@angular/forms'; - -@Component({ - selector: 'example-app', - template: ` -
    -

    Name is invalid.

    - -
    - - - -
    - - - -
    - - - `, - standalone: false, -}) -export class NgModelGroupComp { - name = {first: 'Nancy', middle: 'J', last: 'Drew'}; - - onSubmit(f: NgForm) { - console.log(f.value); // {name: {first: 'Nancy', middle: 'J', last: 'Drew'}, email: ''} - console.log(f.valid); // true - } - - setValue() { - this.name = {first: 'Bess', middle: 'S', last: 'Marvin'}; - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/forms/ts/radioButtons/e2e_test/radio_button_spec.ts b/adev/src/content/api-examples/forms/ts/radioButtons/e2e_test/radio_button_spec.ts deleted file mode 100644 index 427f80d297b58b..00000000000000 --- a/adev/src/content/api-examples/forms/ts/radioButtons/e2e_test/radio_button_spec.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('radioButtons example', () => { - afterEach(verifyNoBrowserErrors); - let inputs: ElementArrayFinder; - let paragraphs: ElementArrayFinder; - - beforeEach(() => { - browser.get('/radioButtons'); - inputs = element.all(by.css('input')); - paragraphs = element.all(by.css('p')); - }); - - it('should populate the UI with initial values', () => { - expect(inputs.get(0).getAttribute('checked')).toEqual(null); - expect(inputs.get(1).getAttribute('checked')).toEqual('true'); - expect(inputs.get(2).getAttribute('checked')).toEqual(null); - - expect(paragraphs.get(0).getText()).toEqual('Form value: { "food": "lamb" }'); - expect(paragraphs.get(1).getText()).toEqual('myFood value: lamb'); - }); - - it('update model and other buttons as the UI value changes', () => { - inputs.get(0).click(); - - expect(inputs.get(0).getAttribute('checked')).toEqual('true'); - expect(inputs.get(1).getAttribute('checked')).toEqual(null); - expect(inputs.get(2).getAttribute('checked')).toEqual(null); - - expect(paragraphs.get(0).getText()).toEqual('Form value: { "food": "beef" }'); - expect(paragraphs.get(1).getText()).toEqual('myFood value: beef'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/radioButtons/module.ts b/adev/src/content/api-examples/forms/ts/radioButtons/module.ts deleted file mode 100644 index 212184b089c30b..00000000000000 --- a/adev/src/content/api-examples/forms/ts/radioButtons/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {RadioButtonComp} from './radio_button_example'; - -@NgModule({ - imports: [BrowserModule, FormsModule], - declarations: [RadioButtonComp], - bootstrap: [RadioButtonComp], -}) -export class AppModule {} - -export {RadioButtonComp as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/radioButtons/radio_button_example.ts b/adev/src/content/api-examples/forms/ts/radioButtons/radio_button_example.ts deleted file mode 100644 index a5470e6ece2726..00000000000000 --- a/adev/src/content/api-examples/forms/ts/radioButtons/radio_button_example.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -import {Component} from '@angular/core'; - -@Component({ - selector: 'example-app', - template: ` -
    - - Beef - - Lamb - - Fish -
    - -

    Form value: {{ f.value | json }}

    - -

    myFood value: {{ myFood }}

    - - `, - standalone: false, -}) -export class RadioButtonComp { - myFood = 'lamb'; -} diff --git a/adev/src/content/api-examples/forms/ts/reactiveRadioButtons/e2e_test/reactive_radio_button_spec.ts b/adev/src/content/api-examples/forms/ts/reactiveRadioButtons/e2e_test/reactive_radio_button_spec.ts deleted file mode 100644 index 18296723f5bb01..00000000000000 --- a/adev/src/content/api-examples/forms/ts/reactiveRadioButtons/e2e_test/reactive_radio_button_spec.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('radioButtons example', () => { - afterEach(verifyNoBrowserErrors); - let inputs: ElementArrayFinder; - - beforeEach(() => { - browser.get('/reactiveRadioButtons'); - inputs = element.all(by.css('input')); - }); - - it('should populate the UI with initial values', () => { - expect(inputs.get(0).getAttribute('checked')).toEqual(null); - expect(inputs.get(1).getAttribute('checked')).toEqual('true'); - expect(inputs.get(2).getAttribute('checked')).toEqual(null); - - expect(element(by.css('p')).getText()).toEqual('Form value: { "food": "lamb" }'); - }); - - it('update model and other buttons as the UI value changes', () => { - inputs.get(0).click(); - - expect(inputs.get(0).getAttribute('checked')).toEqual('true'); - expect(inputs.get(1).getAttribute('checked')).toEqual(null); - expect(inputs.get(2).getAttribute('checked')).toEqual(null); - - expect(element(by.css('p')).getText()).toEqual('Form value: { "food": "beef" }'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/reactiveRadioButtons/module.ts b/adev/src/content/api-examples/forms/ts/reactiveRadioButtons/module.ts deleted file mode 100644 index 84402087f63f66..00000000000000 --- a/adev/src/content/api-examples/forms/ts/reactiveRadioButtons/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {ReactiveRadioButtonComp} from './reactive_radio_button_example'; - -@NgModule({ - imports: [BrowserModule, ReactiveFormsModule], - declarations: [ReactiveRadioButtonComp], - bootstrap: [ReactiveRadioButtonComp], -}) -export class AppModule {} - -export {ReactiveRadioButtonComp as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts b/adev/src/content/api-examples/forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts deleted file mode 100644 index 973759ee79ef72..00000000000000 --- a/adev/src/content/api-examples/forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion Reactive -import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; - -@Component({ - selector: 'example-app', - template: ` -
    - - Beef - - Lamb - - Fish -
    - -

    Form value: {{ form.value | json }}

    - - `, - standalone: false, -}) -export class ReactiveRadioButtonComp { - form = new FormGroup({ - food: new FormControl('lamb'), - }); -} -// #enddocregion diff --git a/adev/src/content/api-examples/forms/ts/reactiveSelectControl/e2e_test/reactive_select_control_spec.ts b/adev/src/content/api-examples/forms/ts/reactiveSelectControl/e2e_test/reactive_select_control_spec.ts deleted file mode 100644 index d66bc0de0a80d0..00000000000000 --- a/adev/src/content/api-examples/forms/ts/reactiveSelectControl/e2e_test/reactive_select_control_spec.ts +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('reactiveSelectControl example', () => { - afterEach(verifyNoBrowserErrors); - let select: ElementFinder; - let options: ElementArrayFinder; - let p: ElementFinder; - - beforeEach(() => { - browser.get('/reactiveSelectControl'); - select = element(by.css('select')); - options = element.all(by.css('option')); - p = element(by.css('p')); - }); - - it('should populate the initial selection', () => { - expect(select.getAttribute('value')).toEqual('3: Object'); - expect(options.get(3).getAttribute('selected')).toBe('true'); - }); - - it('should update the model when the value changes in the UI', () => { - select.click(); - options.get(0).click(); - - expect(p.getText()).toEqual('Form value: { "state": { "name": "Arizona", "abbrev": "AZ" } }'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/reactiveSelectControl/module.ts b/adev/src/content/api-examples/forms/ts/reactiveSelectControl/module.ts deleted file mode 100644 index c260cb7ba1ba05..00000000000000 --- a/adev/src/content/api-examples/forms/ts/reactiveSelectControl/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {ReactiveSelectComp} from './reactive_select_control_example'; - -@NgModule({ - imports: [BrowserModule, ReactiveFormsModule], - declarations: [ReactiveSelectComp], - bootstrap: [ReactiveSelectComp], -}) -export class AppModule {} - -export {ReactiveSelectComp as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/reactiveSelectControl/reactive_select_control_example.ts b/adev/src/content/api-examples/forms/ts/reactiveSelectControl/reactive_select_control_example.ts deleted file mode 100644 index 83b2281ba73fa4..00000000000000 --- a/adev/src/content/api-examples/forms/ts/reactiveSelectControl/reactive_select_control_example.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion Component -import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; - -@Component({ - selector: 'example-app', - template: ` -
    - -
    - -

    Form value: {{ form.value | json }}

    - - `, - standalone: false, -}) -export class ReactiveSelectComp { - states = [ - {name: 'Arizona', abbrev: 'AZ'}, - {name: 'California', abbrev: 'CA'}, - {name: 'Colorado', abbrev: 'CO'}, - {name: 'New York', abbrev: 'NY'}, - {name: 'Pennsylvania', abbrev: 'PA'}, - ]; - - form = new FormGroup({ - state: new FormControl(this.states[3]), - }); -} -// #enddocregion diff --git a/adev/src/content/api-examples/forms/ts/selectControl/e2e_test/select_control_spec.ts b/adev/src/content/api-examples/forms/ts/selectControl/e2e_test/select_control_spec.ts deleted file mode 100644 index 193c24cef3582a..00000000000000 --- a/adev/src/content/api-examples/forms/ts/selectControl/e2e_test/select_control_spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('selectControl example', () => { - afterEach(verifyNoBrowserErrors); - let select: ElementFinder; - let options: ElementArrayFinder; - let p: ElementFinder; - - beforeEach(() => { - browser.get('/selectControl'); - select = element(by.css('select')); - options = element.all(by.css('option')); - p = element(by.css('p')); - }); - - it('should initially select the placeholder option', () => { - expect(options.get(0).getAttribute('selected')).toBe('true'); - }); - - it('should update the model when the value changes in the UI', () => { - select.click(); - options.get(1).click(); - - expect(p.getText()).toEqual('Form value: { "state": { "name": "Arizona", "abbrev": "AZ" } }'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/selectControl/module.ts b/adev/src/content/api-examples/forms/ts/selectControl/module.ts deleted file mode 100644 index 18367160cc7c0a..00000000000000 --- a/adev/src/content/api-examples/forms/ts/selectControl/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {SelectControlComp} from './select_control_example'; - -@NgModule({ - imports: [BrowserModule, FormsModule], - declarations: [SelectControlComp], - bootstrap: [SelectControlComp], -}) -export class AppModule {} - -export {SelectControlComp as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/selectControl/select_control_example.ts b/adev/src/content/api-examples/forms/ts/selectControl/select_control_example.ts deleted file mode 100644 index 09c412a2677573..00000000000000 --- a/adev/src/content/api-examples/forms/ts/selectControl/select_control_example.ts +++ /dev/null @@ -1,38 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion Component -import {Component} from '@angular/core'; - -@Component({ - selector: 'example-app', - template: ` -
    - -
    - -

    Form value: {{ f.value | json }}

    - - `, - standalone: false, -}) -export class SelectControlComp { - states = [ - {name: 'Arizona', abbrev: 'AZ'}, - {name: 'California', abbrev: 'CA'}, - {name: 'Colorado', abbrev: 'CO'}, - {name: 'New York', abbrev: 'NY'}, - {name: 'Pennsylvania', abbrev: 'PA'}, - ]; -} -// #enddocregion diff --git a/adev/src/content/api-examples/forms/ts/simpleForm/e2e_test/simple_form_spec.ts b/adev/src/content/api-examples/forms/ts/simpleForm/e2e_test/simple_form_spec.ts deleted file mode 100644 index 21857d5137d8ac..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleForm/e2e_test/simple_form_spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('simpleForm example', () => { - afterEach(verifyNoBrowserErrors); - let inputs: ElementArrayFinder; - let paragraphs: ElementArrayFinder; - - beforeEach(() => { - browser.get('/simpleForm'); - inputs = element.all(by.css('input')); - paragraphs = element.all(by.css('p')); - }); - - it('should update the domain model as you type', () => { - inputs.get(0).click(); - inputs.get(0).sendKeys('Nancy'); - - inputs.get(1).click(); - inputs.get(1).sendKeys('Drew'); - - expect(paragraphs.get(0).getText()).toEqual('First name value: Nancy'); - expect(paragraphs.get(2).getText()).toEqual('Form value: { "first": "Nancy", "last": "Drew" }'); - }); - - it('should report the validity correctly', () => { - expect(paragraphs.get(1).getText()).toEqual('First name valid: false'); - expect(paragraphs.get(3).getText()).toEqual('Form valid: false'); - inputs.get(0).click(); - inputs.get(0).sendKeys('a'); - - expect(paragraphs.get(1).getText()).toEqual('First name valid: true'); - expect(paragraphs.get(3).getText()).toEqual('Form valid: true'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/simpleForm/module.ts b/adev/src/content/api-examples/forms/ts/simpleForm/module.ts deleted file mode 100644 index b5b9b6473f8c2b..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleForm/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {SimpleFormComp} from './simple_form_example'; - -@NgModule({ - imports: [BrowserModule, FormsModule], - declarations: [SimpleFormComp], - bootstrap: [SimpleFormComp], -}) -export class AppModule {} - -export {SimpleFormComp as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/simpleForm/simple_form_example.ts b/adev/src/content/api-examples/forms/ts/simpleForm/simple_form_example.ts deleted file mode 100644 index 81bfed6312ba94..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleForm/simple_form_example.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -/* tslint:disable:no-console */ -// #docregion Component -import {Component} from '@angular/core'; -import {NgForm} from '@angular/forms'; - -@Component({ - selector: 'example-app', - template: ` -
    - - - -
    - -

    First name value: {{ first.value }}

    -

    First name valid: {{ first.valid }}

    -

    Form value: {{ f.value | json }}

    -

    Form valid: {{ f.valid }}

    - `, - standalone: false, -}) -export class SimpleFormComp { - onSubmit(f: NgForm) { - console.log(f.value); // { first: '', last: '' } - console.log(f.valid); // false - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/forms/ts/simpleFormControl/e2e_test/simple_form_control_spec.ts b/adev/src/content/api-examples/forms/ts/simpleFormControl/e2e_test/simple_form_control_spec.ts deleted file mode 100644 index 879ec120a3dabf..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleFormControl/e2e_test/simple_form_control_spec.ts +++ /dev/null @@ -1,54 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('simpleFormControl example', () => { - afterEach(verifyNoBrowserErrors); - - describe('index view', () => { - let input: ElementFinder; - let valueP: ElementFinder; - let statusP: ElementFinder; - - beforeEach(() => { - browser.get('/simpleFormControl'); - input = element(by.css('input')); - valueP = element(by.css('p:first-of-type')); - statusP = element(by.css('p:last-of-type')); - }); - - it('should populate the form control value in the DOM', () => { - expect(input.getAttribute('value')).toEqual('value'); - expect(valueP.getText()).toEqual('Value: value'); - }); - - it('should update the value as user types', () => { - input.click(); - input.sendKeys('s!'); - - expect(valueP.getText()).toEqual('Value: values!'); - }); - - it('should show the correct validity state', () => { - expect(statusP.getText()).toEqual('Validation status: VALID'); - - input.click(); - input.clear(); - input.sendKeys('a'); - expect(statusP.getText()).toEqual('Validation status: INVALID'); - }); - - it('should set the value programmatically', () => { - element(by.css('button')).click(); - expect(input.getAttribute('value')).toEqual('new value'); - }); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/simpleFormControl/module.ts b/adev/src/content/api-examples/forms/ts/simpleFormControl/module.ts deleted file mode 100644 index 32716278f1873d..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleFormControl/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {SimpleFormControl} from './simple_form_control_example'; - -@NgModule({ - imports: [BrowserModule, ReactiveFormsModule], - declarations: [SimpleFormControl], - bootstrap: [SimpleFormControl], -}) -export class AppModule {} - -export {SimpleFormControl as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/simpleFormControl/simple_form_control_example.ts b/adev/src/content/api-examples/forms/ts/simpleFormControl/simple_form_control_example.ts deleted file mode 100644 index d5a0ebdcd8ad6d..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleFormControl/simple_form_control_example.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion Component -import {Component} from '@angular/core'; -import {FormControl, Validators} from '@angular/forms'; - -@Component({ - selector: 'example-app', - template: ` - - -

    Value: {{ control.value }}

    -

    Validation status: {{ control.status }}

    - - - `, - standalone: false, -}) -export class SimpleFormControl { - control: FormControl = new FormControl('value', Validators.minLength(2)); - - setValue() { - this.control.setValue('new value'); - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/forms/ts/simpleFormGroup/e2e_test/simple_form_group_spec.ts b/adev/src/content/api-examples/forms/ts/simpleFormGroup/e2e_test/simple_form_group_spec.ts deleted file mode 100644 index 05a1c99125d265..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleFormGroup/e2e_test/simple_form_group_spec.ts +++ /dev/null @@ -1,45 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('formControlName example', () => { - afterEach(verifyNoBrowserErrors); - - describe('index view', () => { - let firstInput: ElementFinder; - let lastInput: ElementFinder; - - beforeEach(() => { - browser.get('/simpleFormGroup'); - firstInput = element(by.css('[formControlName="first"]')); - lastInput = element(by.css('[formControlName="last"]')); - }); - - it('should populate the form control values in the DOM', () => { - expect(firstInput.getAttribute('value')).toEqual('Nancy'); - expect(lastInput.getAttribute('value')).toEqual('Drew'); - }); - - it('should show the error when the form is invalid', () => { - firstInput.click(); - firstInput.clear(); - firstInput.sendKeys('a'); - - expect(element(by.css('div')).getText()).toEqual('Name is too short.'); - }); - - it('should set the value programmatically', () => { - element(by.css('button:not([type="submit"])')).click(); - expect(firstInput.getAttribute('value')).toEqual('Carson'); - expect(lastInput.getAttribute('value')).toEqual('Drew'); - }); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/simpleFormGroup/module.ts b/adev/src/content/api-examples/forms/ts/simpleFormGroup/module.ts deleted file mode 100644 index 9745325a5eb631..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleFormGroup/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {SimpleFormGroup} from './simple_form_group_example'; - -@NgModule({ - imports: [BrowserModule, ReactiveFormsModule], - declarations: [SimpleFormGroup], - bootstrap: [SimpleFormGroup], -}) -export class AppModule {} - -export {SimpleFormGroup as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/simpleFormGroup/simple_form_group_example.ts b/adev/src/content/api-examples/forms/ts/simpleFormGroup/simple_form_group_example.ts deleted file mode 100644 index 95f9b43bd1e184..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleFormGroup/simple_form_group_example.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -/* tslint:disable:no-console */ -// #docregion Component -import {Component} from '@angular/core'; -import {FormControl, FormGroup, Validators} from '@angular/forms'; - -@Component({ - selector: 'example-app', - template: ` -
    -
    Name is too short.
    - - - - - -
    - - `, - standalone: false, -}) -export class SimpleFormGroup { - form = new FormGroup({ - first: new FormControl('Nancy', Validators.minLength(2)), - last: new FormControl('Drew'), - }); - - get first(): any { - return this.form.get('first'); - } - - onSubmit(): void { - console.log(this.form.value); // {first: 'Nancy', last: 'Drew'} - } - - setValue() { - this.form.setValue({first: 'Carson', last: 'Drew'}); - } -} - -// #enddocregion diff --git a/adev/src/content/api-examples/forms/ts/simpleNgModel/e2e_test/simple_ng_model_spec.ts b/adev/src/content/api-examples/forms/ts/simpleNgModel/e2e_test/simple_ng_model_spec.ts deleted file mode 100644 index 92f90660e2d8df..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleNgModel/e2e_test/simple_ng_model_spec.ts +++ /dev/null @@ -1,45 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../packages/examples/test-utils/index'; - -describe('simpleNgModel example', () => { - afterEach(verifyNoBrowserErrors); - let input: ElementFinder; - let paragraphs: ElementArrayFinder; - let button: ElementFinder; - - beforeEach(() => { - browser.get('/simpleNgModel'); - input = element(by.css('input')); - paragraphs = element.all(by.css('p')); - button = element(by.css('button')); - }); - - it('should update the domain model as you type', () => { - input.click(); - input.sendKeys('Carson'); - - expect(paragraphs.get(0).getText()).toEqual('Value: Carson'); - }); - - it('should report the validity correctly', () => { - expect(paragraphs.get(1).getText()).toEqual('Valid: false'); - input.click(); - input.sendKeys('a'); - - expect(paragraphs.get(1).getText()).toEqual('Valid: true'); - }); - - it('should set the value by changing the domain model', () => { - button.click(); - expect(input.getAttribute('value')).toEqual('Nancy'); - }); -}); diff --git a/adev/src/content/api-examples/forms/ts/simpleNgModel/module.ts b/adev/src/content/api-examples/forms/ts/simpleNgModel/module.ts deleted file mode 100644 index 6c89425f6fd16c..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleNgModel/module.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {BrowserModule} from '@angular/platform-browser'; -import {SimpleNgModelComp} from './simple_ng_model_example'; - -@NgModule({ - imports: [BrowserModule, FormsModule], - declarations: [SimpleNgModelComp], - bootstrap: [SimpleNgModelComp], -}) -export class AppModule {} - -export {SimpleNgModelComp as AppComponent}; diff --git a/adev/src/content/api-examples/forms/ts/simpleNgModel/simple_ng_model_example.ts b/adev/src/content/api-examples/forms/ts/simpleNgModel/simple_ng_model_example.ts deleted file mode 100644 index 2e17d76b8a0311..00000000000000 --- a/adev/src/content/api-examples/forms/ts/simpleNgModel/simple_ng_model_example.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion Component -import {Component} from '@angular/core'; - -@Component({ - selector: 'example-app', - template: ` - - -

    Value: {{ name }}

    -

    Valid: {{ ctrl.valid }}

    - - - `, - standalone: false, -}) -export class SimpleNgModelComp { - name: string = ''; - - setValue() { - this.name = 'Nancy'; - } -} -// #enddocregion diff --git a/adev/src/content/api-examples/http/ts/.gitkeep b/adev/src/content/api-examples/http/ts/.gitkeep deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/adev/src/content/api-examples/platform-browser/BUILD.bazel b/adev/src/content/api-examples/platform-browser/BUILD.bazel deleted file mode 100644 index f594500164f853..00000000000000 --- a/adev/src/content/api-examples/platform-browser/BUILD.bazel +++ /dev/null @@ -1,21 +0,0 @@ -load("//tools:defaults.bzl", "ng_module") - -package(default_visibility = ["//visibility:public"]) - -ng_module( - name = "platform_browser_examples", - srcs = glob(["**/*.ts"]), - deps = [ - "//packages/compiler", - "//packages/core", - "//packages/platform-browser", - "//packages/platform-browser-dynamic", - ], -) - -filegroup( - name = "files_for_docgen", - srcs = glob([ - "**/*.ts", - ]), -) diff --git a/adev/src/content/api-examples/platform-browser/dom/debug/ts/by/by.ts b/adev/src/content/api-examples/platform-browser/dom/debug/ts/by/by.ts deleted file mode 100644 index f7a62f4e60d83b..00000000000000 --- a/adev/src/content/api-examples/platform-browser/dom/debug/ts/by/by.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {DebugElement} from '@angular/core'; -import {By} from '@angular/platform-browser'; - -let debugElement: DebugElement = undefined!; -class MyDirective {} - -// #docregion by_all -debugElement.query(By.all()); -// #enddocregion - -// #docregion by_css -debugElement.query(By.css('[attribute]')); -// #enddocregion - -// #docregion by_directive -debugElement.query(By.directive(MyDirective)); -// #enddocregion diff --git a/adev/src/content/api-examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts b/adev/src/content/api-examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts deleted file mode 100644 index 831fc5c3076d22..00000000000000 --- a/adev/src/content/api-examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -@Component({ - selector: 'my-component', - template: 'text', - standalone: false, -}) -class MyAppComponent {} -@NgModule({imports: [BrowserModule], bootstrap: [MyAppComponent]}) -class AppModule {} -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/api-examples/router/activated-route/BUILD.bazel b/adev/src/content/api-examples/router/activated-route/BUILD.bazel deleted file mode 100644 index 84c44956acb01d..00000000000000 --- a/adev/src/content/api-examples/router/activated-route/BUILD.bazel +++ /dev/null @@ -1,38 +0,0 @@ -load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module") - -package(default_visibility = ["//visibility:public"]) - -ng_module( - name = "router_activated_route_examples", - srcs = glob( - ["**/*.ts"], - ), - deps = [ - "//packages/core", - "//packages/platform-browser", - "//packages/platform-browser-dynamic", - "//packages/router", - "//packages/zone.js/lib", - "@npm//rxjs", - ], -) - -esbuild( - name = "app_bundle", - entry_point = ":main.ts", - deps = [":router_activated_route_examples"], -) - -http_server( - name = "devserver", - srcs = ["//packages/examples:index.html"], - additional_root_paths = ["angular/packages/examples"], - deps = [":app_bundle"], -) - -filegroup( - name = "files_for_docgen", - srcs = glob([ - "**/*.ts", - ]), -) diff --git a/adev/src/content/api-examples/router/activated-route/main.ts b/adev/src/content/api-examples/router/activated-route/main.ts deleted file mode 100644 index d48b7c36918ca4..00000000000000 --- a/adev/src/content/api-examples/router/activated-route/main.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import 'zone.js/lib/browser/rollup-main'; - -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -import {AppModule} from './module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/api-examples/router/activated-route/module.ts b/adev/src/content/api-examples/router/activated-route/module.ts deleted file mode 100644 index a068768dc008f5..00000000000000 --- a/adev/src/content/api-examples/router/activated-route/module.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -// #docregion activated-route -import {Component, NgModule} from '@angular/core'; -// #enddocregion activated-route -import {BrowserModule} from '@angular/platform-browser'; -// #docregion activated-route -import {ActivatedRoute, RouterModule} from '@angular/router'; -import {Observable} from 'rxjs'; -import {map} from 'rxjs/operators'; -// #enddocregion activated-route - -// #docregion activated-route - -@Component({ - // #enddocregion activated-route - selector: 'example-app', - template: '...', - standalone: false, -}) -export class ActivatedRouteComponent { - constructor(route: ActivatedRoute) { - const id: Observable = route.params.pipe(map((p) => p['id'])); - const url: Observable = route.url.pipe(map((segments) => segments.join(''))); - // route.data includes both `data` and `resolve` - const user = route.data.pipe(map((d) => d['user'])); - } -} -// #enddocregion activated-route - -@NgModule({ - imports: [BrowserModule, RouterModule.forRoot([])], - declarations: [ActivatedRouteComponent], - bootstrap: [ActivatedRouteComponent], -}) -export class AppModule {} diff --git a/adev/src/content/api-examples/router/route_functional_guards.ts b/adev/src/content/api-examples/router/route_functional_guards.ts deleted file mode 100644 index a0b4db62928407..00000000000000 --- a/adev/src/content/api-examples/router/route_functional_guards.ts +++ /dev/null @@ -1,179 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Component, inject, Injectable} from '@angular/core'; -import {bootstrapApplication} from '@angular/platform-browser'; -import { - ActivatedRoute, - ActivatedRouteSnapshot, - CanActivateChildFn, - CanActivateFn, - CanMatchFn, - provideRouter, - ResolveFn, - Route, - RouterStateSnapshot, - UrlSegment, -} from '@angular/router'; - -@Component({ - template: '', - standalone: false, -}) -export class App {} - -@Component({ - template: '', - standalone: false, -}) -export class TeamComponent {} - -// #docregion CanActivateFn -@Injectable() -class UserToken {} - -@Injectable() -class PermissionsService { - canActivate(currentUser: UserToken, userId: string): boolean { - return true; - } - canMatch(currentUser: UserToken): boolean { - return true; - } -} - -const canActivateTeam: CanActivateFn = ( - route: ActivatedRouteSnapshot, - state: RouterStateSnapshot, -) => { - return inject(PermissionsService).canActivate(inject(UserToken), route.params['id']); -}; -// #enddocregion - -// #docregion CanActivateFnInRoute -bootstrapApplication(App, { - providers: [ - provideRouter([ - { - path: 'team/:id', - component: TeamComponent, - canActivate: [canActivateTeam], - }, - ]), - ], -}); -// #enddocregion - -// #docregion CanActivateChildFn -const canActivateChildExample: CanActivateChildFn = ( - route: ActivatedRouteSnapshot, - state: RouterStateSnapshot, -) => { - return inject(PermissionsService).canActivate(inject(UserToken), route.params['id']); -}; - -bootstrapApplication(App, { - providers: [ - provideRouter([ - { - path: 'team/:id', - component: TeamComponent, - canActivateChild: [canActivateChildExample], - children: [], - }, - ]), - ], -}); -// #enddocregion - -// #docregion CanDeactivateFn -@Component({ - template: '', - standalone: false, -}) -export class UserComponent { - hasUnsavedChanges = true; -} - -bootstrapApplication(App, { - providers: [ - provideRouter([ - { - path: 'user/:id', - component: UserComponent, - canDeactivate: [(component: UserComponent) => !component.hasUnsavedChanges], - }, - ]), - ], -}); -// #enddocregion - -// #docregion CanMatchFn -const canMatchTeam: CanMatchFn = (route: Route, segments: UrlSegment[]) => { - return inject(PermissionsService).canMatch(inject(UserToken)); -}; - -bootstrapApplication(App, { - providers: [ - provideRouter([ - { - path: 'team/:id', - component: TeamComponent, - canMatch: [canMatchTeam], - }, - ]), - ], -}); -// #enddocregion - -// #docregion ResolveDataUse -@Component({ - template: '', - standalone: false, -}) -export class HeroDetailComponent { - constructor(private activatedRoute: ActivatedRoute) {} - - ngOnInit() { - this.activatedRoute.data.subscribe(({hero}) => { - // do something with your resolved data ... - }); - } -} -// #enddocregion - -// #docregion ResolveFn -interface Hero { - name: string; -} -@Injectable() -export class HeroService { - getHero(id: string) { - return {name: `Superman-${id}`}; - } -} - -export const heroResolver: ResolveFn = ( - route: ActivatedRouteSnapshot, - state: RouterStateSnapshot, -) => { - return inject(HeroService).getHero(route.paramMap.get('id')!); -}; - -bootstrapApplication(App, { - providers: [ - provideRouter([ - { - path: 'detail/:id', - component: HeroDetailComponent, - resolve: {hero: heroResolver}, - }, - ]), - ], -}); -// #enddocregion diff --git a/adev/src/content/api-examples/router/testing/BUILD.bazel b/adev/src/content/api-examples/router/testing/BUILD.bazel deleted file mode 100644 index bbaf09459fdbe6..00000000000000 --- a/adev/src/content/api-examples/router/testing/BUILD.bazel +++ /dev/null @@ -1,38 +0,0 @@ -load("//tools:defaults.bzl", "jasmine_node_test", "karma_web_test_suite", "ts_library") - -package(default_visibility = ["//visibility:public"]) - -ts_library( - name = "test_lib", - testonly = True, - srcs = glob(["**/*.spec.ts"]), - deps = [ - "//packages/common", - "//packages/core", - "//packages/core/testing", - "//packages/router", - "//packages/router/testing", - ], -) - -jasmine_node_test( - name = "test", - bootstrap = ["//tools/testing:node"], - deps = [ - ":test_lib", - ], -) - -karma_web_test_suite( - name = "test_web", - deps = [ - ":test_lib", - ], -) - -filegroup( - name = "files_for_docgen", - srcs = glob([ - "**/*.ts", - ]), -) diff --git a/adev/src/content/api-examples/router/testing/test/router_testing_harness_examples.spec.ts b/adev/src/content/api-examples/router/testing/test/router_testing_harness_examples.spec.ts deleted file mode 100644 index 39c282bf0ec1a4..00000000000000 --- a/adev/src/content/api-examples/router/testing/test/router_testing_harness_examples.spec.ts +++ /dev/null @@ -1,95 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {AsyncPipe} from '@angular/common'; -import {Component, inject} from '@angular/core'; -import {TestBed} from '@angular/core/testing'; -import {ActivatedRoute, CanActivateFn, provideRouter, Router} from '@angular/router'; -import {RouterTestingHarness} from '@angular/router/testing'; - -describe('navigate for test examples', () => { - // #docregion RoutedComponent - it('navigates to routed component', async () => { - @Component({template: 'hello {{name}}'}) - class TestCmp { - name = 'world'; - } - - TestBed.configureTestingModule({ - providers: [provideRouter([{path: '', component: TestCmp}])], - }); - - const harness = await RouterTestingHarness.create(); - const activatedComponent = await harness.navigateByUrl('/', TestCmp); - expect(activatedComponent).toBeInstanceOf(TestCmp); - expect(harness.routeNativeElement?.innerHTML).toContain('hello world'); - }); - // #enddocregion - - it('testing a guard', async () => { - @Component({template: ''}) - class AdminComponent {} - @Component({template: ''}) - class LoginComponent {} - - // #docregion Guard - let isLoggedIn = false; - const isLoggedInGuard: CanActivateFn = () => { - return isLoggedIn ? true : inject(Router).parseUrl('/login'); - }; - - TestBed.configureTestingModule({ - providers: [ - provideRouter([ - {path: 'admin', canActivate: [isLoggedInGuard], component: AdminComponent}, - {path: 'login', component: LoginComponent}, - ]), - ], - }); - - const harness = await RouterTestingHarness.create('/admin'); - expect(TestBed.inject(Router).url).toEqual('/login'); - isLoggedIn = true; - await harness.navigateByUrl('/admin'); - expect(TestBed.inject(Router).url).toEqual('/admin'); - // #enddocregion - }); - - it('test a ActivatedRoute', async () => { - // #docregion ActivatedRoute - @Component({ - standalone: true, - imports: [AsyncPipe], - template: ` - search: {{ (route.queryParams | async)?.query }} - `, - }) - class SearchCmp { - constructor( - readonly route: ActivatedRoute, - readonly router: Router, - ) {} - - async searchFor(thing: string) { - await this.router.navigate([], {queryParams: {query: thing}}); - } - } - - TestBed.configureTestingModule({ - providers: [provideRouter([{path: 'search', component: SearchCmp}])], - }); - - const harness = await RouterTestingHarness.create(); - const activatedComponent = await harness.navigateByUrl('/search', SearchCmp); - await activatedComponent.searchFor('books'); - harness.detectChanges(); - expect(TestBed.inject(Router).url).toEqual('/search?query=books'); - expect(harness.routeNativeElement?.innerHTML).toContain('books'); - // #enddocregion - }); -}); diff --git a/adev/src/content/api-examples/router/utils/functional_guards.ts b/adev/src/content/api-examples/router/utils/functional_guards.ts deleted file mode 100644 index 5ea493e4b1df61..00000000000000 --- a/adev/src/content/api-examples/router/utils/functional_guards.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {Injectable} from '@angular/core'; -import {mapToCanActivate, mapToResolve, Route} from '@angular/router'; - -// #docregion CanActivate -@Injectable({providedIn: 'root'}) -export class AdminGuard { - canActivate() { - return true; - } -} - -const route: Route = { - path: 'admin', - canActivate: mapToCanActivate([AdminGuard]), -}; -// #enddocregion - -// #docregion Resolve -@Injectable({providedIn: 'root'}) -export class ResolveUser { - resolve() { - return {name: 'Bob'}; - } -} - -const userRoute: Route = { - path: 'user', - resolve: { - user: mapToResolve(ResolveUser), - }, -}; -// #enddocregion diff --git a/adev/src/content/api-examples/service-worker/push/e2e_test/push_spec.ts b/adev/src/content/api-examples/service-worker/push/e2e_test/push_spec.ts deleted file mode 100644 index 04f8e2bbb64931..00000000000000 --- a/adev/src/content/api-examples/service-worker/push/e2e_test/push_spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element} from 'protractor'; -import {verifyNoBrowserErrors} from '../../../../../../../packages/examples/test-utils/index'; - -describe('SW `SwPush` example', () => { - const pageUrl = '/push'; - const appElem = element(by.css('example-app')); - - afterEach(verifyNoBrowserErrors); - - it('should be enabled', () => { - browser.get(pageUrl); - expect(appElem.getText()).toBe('SW enabled: true'); - }); -}); diff --git a/adev/src/content/api-examples/service-worker/push/main.ts b/adev/src/content/api-examples/service-worker/push/main.ts deleted file mode 100644 index d48b7c36918ca4..00000000000000 --- a/adev/src/content/api-examples/service-worker/push/main.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import 'zone.js/lib/browser/rollup-main'; - -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -import {AppModule} from './module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/api-examples/service-worker/push/module.ts b/adev/src/content/api-examples/service-worker/push/module.ts deleted file mode 100644 index 0eb9e59466b3e2..00000000000000 --- a/adev/src/content/api-examples/service-worker/push/module.ts +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -// tslint:disable: no-duplicate-imports -import {Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {ServiceWorkerModule} from '@angular/service-worker'; -// #docregion inject-sw-push -import {SwPush} from '@angular/service-worker'; -// #enddocregion inject-sw-push -// tslint:enable: no-duplicate-imports - -const PUBLIC_VAPID_KEY_OF_SERVER = '...'; - -@Component({ - selector: 'example-app', - template: 'SW enabled: {{ swPush.isEnabled }}', - standalone: false, -}) -// #docregion inject-sw-push -export class AppComponent { - constructor(readonly swPush: SwPush) {} - // #enddocregion inject-sw-push - - // #docregion subscribe-to-push - private async subscribeToPush() { - try { - const sub = await this.swPush.requestSubscription({ - serverPublicKey: PUBLIC_VAPID_KEY_OF_SERVER, - }); - // TODO: Send to server. - } catch (err) { - console.error('Could not subscribe due to:', err); - } - } - // #enddocregion subscribe-to-push - - private subscribeToNotificationClicks() { - // #docregion subscribe-to-notification-clicks - this.swPush.notificationClicks.subscribe(({action, notification}) => { - // TODO: Do something in response to notification click. - }); - // #enddocregion subscribe-to-notification-clicks - } - // #docregion inject-sw-push -} -// #enddocregion inject-sw-push - -@NgModule({ - bootstrap: [AppComponent], - declarations: [AppComponent], - imports: [BrowserModule, ServiceWorkerModule.register('ngsw-worker.js')], -}) -export class AppModule {} diff --git a/adev/src/content/api-examples/service-worker/push/ngsw-worker.js b/adev/src/content/api-examples/service-worker/push/ngsw-worker.js deleted file mode 100644 index b4e14c9506fc80..00000000000000 --- a/adev/src/content/api-examples/service-worker/push/ngsw-worker.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// Mock `ngsw-worker.js` used for testing the examples. -// Immediately takes over and unregisters itself. -self.addEventListener('install', (evt) => evt.waitUntil(self.skipWaiting())); -self.addEventListener('activate', (evt) => - evt.waitUntil(self.clients.claim().then(() => self.registration.unregister())), -); diff --git a/adev/src/content/api-examples/service-worker/push/start-server.js b/adev/src/content/api-examples/service-worker/push/start-server.js deleted file mode 100644 index 07d52c5eb3fa4d..00000000000000 --- a/adev/src/content/api-examples/service-worker/push/start-server.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -const protractorUtils = require('@bazel/protractor/protractor-utils'); -const protractor = require('protractor'); - -module.exports = async function (config) { - const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []); - const serverUrl = `http://localhost:${port}`; - - protractor.browser.baseUrl = serverUrl; -}; diff --git a/adev/src/content/api-examples/service-worker/registration-options/e2e_test/registration-options_spec.ts b/adev/src/content/api-examples/service-worker/registration-options/e2e_test/registration-options_spec.ts deleted file mode 100644 index a1844bd60cfc8e..00000000000000 --- a/adev/src/content/api-examples/service-worker/registration-options/e2e_test/registration-options_spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element} from 'protractor'; -import {verifyNoBrowserErrors} from '../../../../../../../packages/examples/test-utils/index'; - -describe('SW `SwRegistrationOptions` example', () => { - const pageUrl = '/registration-options'; - const appElem = element(by.css('example-app')); - - afterEach(verifyNoBrowserErrors); - - it('not register the SW by default', () => { - browser.get(pageUrl); - expect(appElem.getText()).toBe('SW enabled: false'); - }); - - it('register the SW when navigating to `?sw=true`', () => { - browser.get(`${pageUrl}?sw=true`); - expect(appElem.getText()).toBe('SW enabled: true'); - }); -}); diff --git a/adev/src/content/api-examples/service-worker/registration-options/main.ts b/adev/src/content/api-examples/service-worker/registration-options/main.ts deleted file mode 100644 index d48b7c36918ca4..00000000000000 --- a/adev/src/content/api-examples/service-worker/registration-options/main.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import 'zone.js/lib/browser/rollup-main'; - -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; - -import {AppModule} from './module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/adev/src/content/api-examples/service-worker/registration-options/module.ts b/adev/src/content/api-examples/service-worker/registration-options/module.ts deleted file mode 100644 index 74e252439e4db0..00000000000000 --- a/adev/src/content/api-examples/service-worker/registration-options/module.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -// tslint:disable: no-duplicate-imports -import {Component} from '@angular/core'; -// #docregion registration-options -import {NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {ServiceWorkerModule, SwRegistrationOptions} from '@angular/service-worker'; -// #enddocregion registration-options -import {SwUpdate} from '@angular/service-worker'; -// tslint:enable: no-duplicate-imports - -@Component({ - selector: 'example-app', - template: 'SW enabled: {{ swu.isEnabled }}', - standalone: false, -}) -export class AppComponent { - constructor(readonly swu: SwUpdate) {} -} -// #docregion registration-options - -@NgModule({ - // #enddocregion registration-options - bootstrap: [AppComponent], - declarations: [AppComponent], - // #docregion registration-options - imports: [BrowserModule, ServiceWorkerModule.register('ngsw-worker.js')], - providers: [ - { - provide: SwRegistrationOptions, - useFactory: () => ({enabled: location.search.includes('sw=true')}), - }, - ], -}) -export class AppModule {} -// #enddocregion registration-options diff --git a/adev/src/content/api-examples/service-worker/registration-options/ngsw-worker.js b/adev/src/content/api-examples/service-worker/registration-options/ngsw-worker.js deleted file mode 100644 index b4e14c9506fc80..00000000000000 --- a/adev/src/content/api-examples/service-worker/registration-options/ngsw-worker.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// Mock `ngsw-worker.js` used for testing the examples. -// Immediately takes over and unregisters itself. -self.addEventListener('install', (evt) => evt.waitUntil(self.skipWaiting())); -self.addEventListener('activate', (evt) => - evt.waitUntil(self.clients.claim().then(() => self.registration.unregister())), -); diff --git a/adev/src/content/api-examples/service-worker/registration-options/start-server.js b/adev/src/content/api-examples/service-worker/registration-options/start-server.js deleted file mode 100644 index 07d52c5eb3fa4d..00000000000000 --- a/adev/src/content/api-examples/service-worker/registration-options/start-server.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -const protractorUtils = require('@bazel/protractor/protractor-utils'); -const protractor = require('protractor'); - -module.exports = async function (config) { - const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []); - const serverUrl = `http://localhost:${port}`; - - protractor.browser.baseUrl = serverUrl; -}; diff --git a/adev/src/content/api-examples/test-utils/index.ts b/adev/src/content/api-examples/test-utils/index.ts deleted file mode 100644 index 727375002a4286..00000000000000 --- a/adev/src/content/api-examples/test-utils/index.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -/* tslint:disable:no-console */ -import {logging, WebDriver} from 'selenium-webdriver'; - -declare var browser: WebDriver; -declare var expect: any; - -// TODO (juliemr): remove this method once this becomes a protractor plugin -export async function verifyNoBrowserErrors() { - const browserLog = await browser.manage().logs().get('browser'); - const collectedErrors: any[] = []; - - browserLog.forEach((logEntry) => { - const msg = logEntry.message; - - console.log('>> ' + msg, logEntry); - - if (logEntry.level.value >= logging.Level.INFO.value) { - collectedErrors.push(msg); - } - }); - - expect(collectedErrors).toEqual([]); -} diff --git a/adev/src/content/api-examples/testing/ts/testing.ts b/adev/src/content/api-examples/testing/ts/testing.ts deleted file mode 100644 index da8d2015493b54..00000000000000 --- a/adev/src/content/api-examples/testing/ts/testing.ts +++ /dev/null @@ -1,78 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -let db: any; -class MyService {} -class MyMockService implements MyService {} - -describe('some component', () => { - it('does something', () => { - // This is a test. - }); -}); - -// tslint:disable-next-line:ban -fdescribe('some component', () => { - it('has a test', () => { - // This test will run. - }); -}); -describe('another component', () => { - it('also has a test', () => { - throw 'This test will not run.'; - }); -}); - -xdescribe('some component', () => { - it('has a test', () => { - throw 'This test will not run.'; - }); -}); -describe('another component', () => { - it('also has a test', () => { - // This test will run. - }); -}); - -describe('some component', () => { - // tslint:disable-next-line:ban - fit('has a test', () => { - // This test will run. - }); - it('has another test', () => { - throw 'This test will not run.'; - }); -}); - -describe('some component', () => { - xit('has a test', () => { - throw 'This test will not run.'; - }); - it('has another test', () => { - // This test will run. - }); -}); - -describe('some component', () => { - beforeEach(() => { - db.connect(); - }); - it('uses the db', () => { - // Database is connected. - }); -}); - -describe('some component', () => { - afterEach((done: Function) => { - db.reset().then((_: any) => done()); - }); - it('uses the db', () => { - // This test can leave the database in a dirty state. - // The afterEach will ensure it gets reset. - }); -}); diff --git a/adev/src/content/api-examples/upgrade/index.html b/adev/src/content/api-examples/upgrade/index.html deleted file mode 100644 index 9c9843d9a5b9f5..00000000000000 --- a/adev/src/content/api-examples/upgrade/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - Angular Upgrade Examples - - - - - - - Loading... - - - - - - - diff --git a/adev/src/content/api-examples/upgrade/start-server.js b/adev/src/content/api-examples/upgrade/start-server.js deleted file mode 100644 index 07d52c5eb3fa4d..00000000000000 --- a/adev/src/content/api-examples/upgrade/start-server.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -const protractorUtils = require('@bazel/protractor/protractor-utils'); -const protractor = require('protractor'); - -module.exports = async function (config) { - const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []); - const serverUrl = `http://localhost:${port}`; - - protractor.browser.baseUrl = serverUrl; -}; diff --git a/adev/src/content/api-examples/upgrade/static/ts/full/e2e_test/static_full_spec.ts b/adev/src/content/api-examples/upgrade/static/ts/full/e2e_test/static_full_spec.ts deleted file mode 100644 index 2dfdef04244128..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/full/e2e_test/static_full_spec.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element} from 'protractor'; -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -function loadPage() { - browser.rootEl = 'example-app'; - browser.get('/'); -} - -describe('upgrade/static (full)', () => { - beforeEach(loadPage); - afterEach(verifyNoBrowserErrors); - - it('should render the `ng2-heroes` component', () => { - expect(element(by.css('h1')).getText()).toEqual('Heroes'); - expect(element.all(by.css('p')).get(0).getText()).toEqual('There are 3 heroes.'); - }); - - it('should render 3 ng1-hero components', () => { - const heroComponents = element.all(by.css('ng1-hero')); - expect(heroComponents.count()).toEqual(3); - }); - - it('should add a new hero when the "Add Hero" button is pressed', () => { - const addHeroButton = element.all(by.css('button')).last(); - expect(addHeroButton.getText()).toEqual('Add Hero'); - addHeroButton.click(); - const heroComponents = element.all(by.css('ng1-hero')); - expect(heroComponents.last().element(by.css('h2')).getText()).toEqual('Kamala Khan'); - }); - - it('should remove a hero when the "Remove" button is pressed', () => { - let firstHero = element.all(by.css('ng1-hero')).get(0); - expect(firstHero.element(by.css('h2')).getText()).toEqual('Superman'); - - const removeHeroButton = firstHero.element(by.css('button')); - expect(removeHeroButton.getText()).toEqual('Remove'); - removeHeroButton.click(); - - const heroComponents = element.all(by.css('ng1-hero')); - expect(heroComponents.count()).toEqual(2); - - firstHero = element.all(by.css('ng1-hero')).get(0); - expect(firstHero.element(by.css('h2')).getText()).toEqual('Wonder Woman'); - }); -}); diff --git a/adev/src/content/api-examples/upgrade/static/ts/full/module.spec.ts b/adev/src/content/api-examples/upgrade/static/ts/full/module.spec.ts deleted file mode 100644 index cb4ff8898780bf..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/full/module.spec.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docregion angular-setup -import {TestBed} from '@angular/core/testing'; -import { - createAngularJSTestingModule, - createAngularTestingModule, -} from '@angular/upgrade/static/testing'; - -import {HeroesService, ng1AppModule, Ng2AppModule} from './module'; - -const {module, inject} = (window as any).angular.mock; - -// #enddocregion angular-setup -describe('HeroesService (from Angular)', () => { - // #docregion angular-setup - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [createAngularTestingModule([ng1AppModule.name]), Ng2AppModule], - }); - }); - // #enddocregion angular-setup - - // #docregion angular-spec - it('should have access to the HeroesService', () => { - const heroesService = TestBed.inject(HeroesService); - expect(heroesService).toBeDefined(); - }); - // #enddocregion angular-spec -}); - -describe('HeroesService (from AngularJS)', () => { - // #docregion angularjs-setup - beforeEach(module(createAngularJSTestingModule([Ng2AppModule]))); - beforeEach(module(ng1AppModule.name)); - // #enddocregion angularjs-setup - - // #docregion angularjs-spec - it('should have access to the HeroesService', inject((heroesService: HeroesService) => { - expect(heroesService).toBeDefined(); - })); - // #enddocregion angularjs-spec -}); diff --git a/adev/src/content/api-examples/upgrade/static/ts/full/module.ts b/adev/src/content/api-examples/upgrade/static/ts/full/module.ts deleted file mode 100644 index 13c0b09f184b4f..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/full/module.ts +++ /dev/null @@ -1,202 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ -// #docplaster -import { - Component, - Directive, - ElementRef, - EventEmitter, - Injectable, - Injector, - Input, - NgModule, - Output, -} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { - downgradeComponent, - downgradeInjectable, - UpgradeComponent, - UpgradeModule, -} from '@angular/upgrade/static'; - -declare var angular: ng.IAngularStatic; - -export interface Hero { - name: string; - description: string; -} - -// #docregion ng1-text-formatter-service -export class TextFormatter { - titleCase(value: string) { - return value.replace(/((^|\s)[a-z])/g, (_, c) => c.toUpperCase()); - } -} - -// #enddocregion -// #docregion ng2-heroes -// This Angular component will be "downgraded" to be used in AngularJS -@Component({ - selector: 'ng2-heroes', - // This template uses the upgraded `ng1-hero` component - // Note that because its element is compiled by Angular we must use camelCased attribute names - template: ` -
    - -
    - - Super Hero - -
    - - `, - standalone: false, -}) -export class Ng2HeroesComponent { - @Input() heroes!: Hero[]; - @Output() addHero = new EventEmitter(); - @Output() removeHero = new EventEmitter(); -} -// #enddocregion - -// #docregion ng2-heroes-service -// This Angular service will be "downgraded" to be used in AngularJS -@Injectable() -export class HeroesService { - heroes: Hero[] = [ - {name: 'superman', description: 'The man of steel'}, - {name: 'wonder woman', description: 'Princess of the Amazons'}, - {name: 'thor', description: 'The hammer-wielding god'}, - ]; - - // #docregion use-ng1-upgraded-service - constructor(textFormatter: TextFormatter) { - // Change all the hero names to title case, using the "upgraded" AngularJS service - this.heroes.forEach((hero: Hero) => (hero.name = textFormatter.titleCase(hero.name))); - } - // #enddocregion - - addHero() { - this.heroes = this.heroes.concat([ - {name: 'Kamala Khan', description: 'Epic shape-shifting healer'}, - ]); - } - - removeHero(hero: Hero) { - this.heroes = this.heroes.filter((item: Hero) => item !== hero); - } -} -// #enddocregion - -// #docregion ng1-hero-wrapper -// This Angular directive will act as an interface to the "upgraded" AngularJS component -@Directive({ - selector: 'ng1-hero', - standalone: false, -}) -export class Ng1HeroComponentWrapper extends UpgradeComponent { - // The names of the input and output properties here must match the names of the - // `<` and `&` bindings in the AngularJS component that is being wrapped - @Input() hero!: Hero; - @Output() onRemove: EventEmitter = new EventEmitter(); - - constructor(elementRef: ElementRef, injector: Injector) { - // We must pass the name of the directive as used by AngularJS to the super - super('ng1Hero', elementRef, injector); - } -} -// #enddocregion - -// #docregion ng2-module -// This NgModule represents the Angular pieces of the application -@NgModule({ - declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper], - providers: [ - HeroesService, - // #docregion upgrade-ng1-service - // Register an Angular provider whose value is the "upgraded" AngularJS service - {provide: TextFormatter, useFactory: (i: any) => i.get('textFormatter'), deps: ['$injector']}, - // #enddocregion - ], - // We must import `UpgradeModule` to get access to the AngularJS core services - imports: [BrowserModule, UpgradeModule], -}) -// #docregion bootstrap-ng1 -export class Ng2AppModule { - // #enddocregion ng2-module - constructor(private upgrade: UpgradeModule) {} - - ngDoBootstrap() { - // We bootstrap the AngularJS app. - this.upgrade.bootstrap(document.body, [ng1AppModule.name]); - } - // #docregion ng2-module -} -// #enddocregion bootstrap-ng1 -// #enddocregion ng2-module - -// This Angular 1 module represents the AngularJS pieces of the application -export const ng1AppModule: ng.IModule = angular.module('ng1AppModule', []); - -// #docregion ng1-hero -// This AngularJS component will be "upgraded" to be used in Angular -ng1AppModule.component('ng1Hero', { - bindings: {hero: '<', onRemove: '&'}, - transclude: true, - template: `
    -

    {{ $ctrl.hero.name }}

    -

    {{ $ctrl.hero.description }}

    - `, -}); -// #enddocregion - -// #docregion ng1-text-formatter-service -// This AngularJS service will be "upgraded" to be used in Angular -ng1AppModule.service('textFormatter', [TextFormatter]); -// #enddocregion - -// #docregion downgrade-ng2-heroes-service -// Register an AngularJS service, whose value is the "downgraded" Angular injectable. -ng1AppModule.factory('heroesService', downgradeInjectable(HeroesService) as any); -// #enddocregion - -// #docregion ng2-heroes-wrapper -// This directive will act as the interface to the "downgraded" Angular component -ng1AppModule.directive('ng2Heroes', downgradeComponent({component: Ng2HeroesComponent})); -// #enddocregion - -// #docregion example-app -// This is our top level application component -ng1AppModule.component('exampleApp', { - // We inject the "downgraded" HeroesService into this AngularJS component - // (We don't need the `HeroesService` type for AngularJS DI - it just helps with TypeScript - // compilation) - controller: [ - 'heroesService', - function (heroesService: HeroesService) { - this.heroesService = heroesService; - }, - ], - // This template makes use of the downgraded `ng2-heroes` component - // Note that because its element is compiled by AngularJS we must use kebab-case attributes - // for inputs and outputs - template: ` - -

    Heroes

    -

    There are {{ $ctrl.heroesService.heroes.length }} heroes.

    -     `, -}); -// #enddocregion - -// #docregion bootstrap-ng2 -// We bootstrap the Angular module as we would do in a normal Angular app. -// (We are using the dynamic browser platform as this example has not been compiled AOT.) -platformBrowserDynamic().bootstrapModule(Ng2AppModule); -// #enddocregion diff --git a/adev/src/content/api-examples/upgrade/static/ts/full/styles.css b/adev/src/content/api-examples/upgrade/static/ts/full/styles.css deleted file mode 100644 index f3785c1c229de7..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/full/styles.css +++ /dev/null @@ -1,17 +0,0 @@ -ng2-heroes { - border: solid black 2px; - display: block; - padding: 5px; -} - -ng1-hero { - border: solid green 2px; - margin-top: 5px; - padding: 5px; - display: block; -} - -.title { - background-color: blue; - color: white; -} diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite-multi-shared/BUILD.bazel b/adev/src/content/api-examples/upgrade/static/ts/lite-multi-shared/BUILD.bazel deleted file mode 100644 index 34f8e02979445c..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite-multi-shared/BUILD.bazel +++ /dev/null @@ -1,20 +0,0 @@ -load("//packages/examples/upgrade:upgrade_example.bzl", "create_upgrade_example_targets") - -package(default_visibility = ["//visibility:public"]) - -create_upgrade_example_targets( - name = "lite-multi-shared", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*_spec.ts"], - ), - e2e_srcs = glob(["e2e_test/*_spec.ts"]), - entry_point = ":module.ts", -) - -filegroup( - name = "files_for_docgen", - srcs = glob([ - "**/*.ts", - ]), -) diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite-multi-shared/e2e_test/static_lite_multi_shared_spec.ts b/adev/src/content/api-examples/upgrade/static/ts/lite-multi-shared/e2e_test/static_lite_multi_shared_spec.ts deleted file mode 100644 index 506a141dd3a5d1..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite-multi-shared/e2e_test/static_lite_multi_shared_spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -describe('upgrade/static (lite with multiple downgraded modules and shared root module)', () => { - const compA = element(by.css('ng2-a')); - const compB = element(by.css('ng2-b')); - const compC = element(by.css('ng2-c')); - - beforeEach(() => browser.get('/')); - afterEach(verifyNoBrowserErrors); - - it('should share the same injectable instance across downgraded modules A and B', () => { - expect(compA.getText()).toBe('Component A (Service ID: 2)'); - expect(compB.getText()).toBe('Component B (Service ID: 2)'); - }); - - it('should use a different injectable instance on downgraded module C', () => { - expect(compC.getText()).toBe('Component C (Service ID: 1)'); - }); -}); diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite-multi-shared/module.ts b/adev/src/content/api-examples/upgrade/static/ts/lite-multi-shared/module.ts deleted file mode 100644 index b2e3a8545b89d6..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite-multi-shared/module.ts +++ /dev/null @@ -1,159 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import { - Compiler, - Component, - getPlatform, - Injectable, - Injector, - NgModule, - StaticProvider, -} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import {downgradeComponent, downgradeModule} from '@angular/upgrade/static'; - -declare var angular: ng.IAngularStatic; - -// An Angular service provided in root. Each instance of the service will get a new ID. -@Injectable({providedIn: 'root'}) -export class Ng2Service { - static nextId = 1; - id = Ng2Service.nextId++; -} - -// An Angular module that will act as "root" for all downgraded modules, so that injectables -// provided in root will be available to all. -@NgModule({ - imports: [BrowserModule], -}) -export class Ng2RootModule { - ngDoBootstrap() {} -} - -// An Angular module that declares an Angular component, -// which in turn uses an Angular service from the root module. -@Component({ - selector: 'ng2A', - template: 'Component A (Service ID: {{ service.id }})', - standalone: false, -}) -export class Ng2AComponent { - constructor(public service: Ng2Service) {} -} - -@NgModule({ - declarations: [Ng2AComponent], -}) -export class Ng2AModule { - ngDoBootstrap() {} -} - -// Another Angular module that declares an Angular component, which uses the same service. -@Component({ - selector: 'ng2B', - template: 'Component B (Service ID: {{ service.id }})', - standalone: false, -}) -export class Ng2BComponent { - constructor(public service: Ng2Service) {} -} - -@NgModule({ - declarations: [Ng2BComponent], -}) -export class Ng2BModule { - ngDoBootstrap() {} -} - -// A third Angular module that declares an Angular component, which uses the same service. -@Component({ - selector: 'ng2C', - template: 'Component C (Service ID: {{ service.id }})', - standalone: false, -}) -export class Ng2CComponent { - constructor(public service: Ng2Service) {} -} - -@NgModule({ - imports: [BrowserModule], - declarations: [Ng2CComponent], -}) -export class Ng2CModule { - ngDoBootstrap() {} -} - -// The downgraded Angular modules. Modules A and B share a common root module. Module C does not. -// #docregion shared-root-module -let rootInjectorPromise: Promise | null = null; -const getRootInjector = (extraProviders: StaticProvider[]) => { - if (!rootInjectorPromise) { - rootInjectorPromise = platformBrowserDynamic(extraProviders) - .bootstrapModule(Ng2RootModule) - .then((moduleRef) => moduleRef.injector); - } - return rootInjectorPromise; -}; - -const downgradedNg2AModule = downgradeModule(async (extraProviders: StaticProvider[]) => { - const rootInjector = await getRootInjector(extraProviders); - const moduleAFactory = await rootInjector.get(Compiler).compileModuleAsync(Ng2AModule); - return moduleAFactory.create(rootInjector); -}); -const downgradedNg2BModule = downgradeModule(async (extraProviders: StaticProvider[]) => { - const rootInjector = await getRootInjector(extraProviders); - const moduleBFactory = await rootInjector.get(Compiler).compileModuleAsync(Ng2BModule); - return moduleBFactory.create(rootInjector); -}); -// #enddocregion shared-root-module - -const downgradedNg2CModule = downgradeModule((extraProviders: StaticProvider[]) => - (getPlatform() || platformBrowserDynamic(extraProviders)).bootstrapModule(Ng2CModule), -); - -// The AngularJS app including downgraded modules and components. -// #docregion shared-root-module -const appModule = angular - .module('exampleAppModule', [downgradedNg2AModule, downgradedNg2BModule, downgradedNg2CModule]) - // #enddocregion shared-root-module - .component('exampleApp', {template: ' | | '}) - .directive( - 'ng2A', - downgradeComponent({ - component: Ng2AComponent, - // Since there is more than one downgraded Angular module, - // specify which module this component belongs to. - downgradedModule: downgradedNg2AModule, - propagateDigest: false, - }), - ) - .directive( - 'ng2B', - downgradeComponent({ - component: Ng2BComponent, - // Since there is more than one downgraded Angular module, - // specify which module this component belongs to. - downgradedModule: downgradedNg2BModule, - propagateDigest: false, - }), - ) - .directive( - 'ng2C', - downgradeComponent({ - component: Ng2CComponent, - // Since there is more than one downgraded Angular module, - // specify which module this component belongs to. - downgradedModule: downgradedNg2CModule, - propagateDigest: false, - }), - ); - -// Bootstrap the AngularJS app. -angular.bootstrap(document.body, [appModule.name]); diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite-multi/e2e_test/static_lite_multi_spec.ts b/adev/src/content/api-examples/upgrade/static/ts/lite-multi/e2e_test/static_lite_multi_spec.ts deleted file mode 100644 index 65f0808071d221..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite-multi/e2e_test/static_lite_multi_spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -describe('upgrade/static (lite with multiple downgraded modules)', () => { - const navButtons = element.all(by.css('nav button')); - const mainContent = element(by.css('main')); - - beforeEach(() => browser.get('/')); - afterEach(verifyNoBrowserErrors); - - it('should correctly bootstrap multiple downgraded modules', () => { - navButtons.get(1).click(); - expect(mainContent.getText()).toBe('Component B'); - - navButtons.get(0).click(); - expect(mainContent.getText()).toBe('Component A | ng1(ng2)'); - }); -}); diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite-multi/module.ts b/adev/src/content/api-examples/upgrade/static/ts/lite-multi/module.ts deleted file mode 100644 index aae301f21c8098..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite-multi/module.ts +++ /dev/null @@ -1,144 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docplaster -import { - Component, - Directive, - ElementRef, - getPlatform, - Injectable, - Injector, - NgModule, - StaticProvider, -} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { - downgradeComponent, - downgradeInjectable, - downgradeModule, - UpgradeComponent, -} from '@angular/upgrade/static'; - -declare var angular: ng.IAngularStatic; - -// An Angular module that declares an Angular service and a component, -// which in turn uses an upgraded AngularJS component. -@Component({ - selector: 'ng2A', - template: 'Component A | ', - standalone: false, -}) -export class Ng2AComponent {} - -@Directive({ - selector: 'ng1A', - standalone: false, -}) -export class Ng1AComponentFacade extends UpgradeComponent { - constructor(elementRef: ElementRef, injector: Injector) { - super('ng1A', elementRef, injector); - } -} - -@Injectable() -export class Ng2AService { - getValue() { - return 'ng2'; - } -} - -@NgModule({ - imports: [BrowserModule], - providers: [Ng2AService], - declarations: [Ng1AComponentFacade, Ng2AComponent], -}) -export class Ng2AModule { - ngDoBootstrap() {} -} - -// Another Angular module that declares an Angular component. -@Component({ - selector: 'ng2B', - template: 'Component B', - standalone: false, -}) -export class Ng2BComponent {} - -@NgModule({ - imports: [BrowserModule], - declarations: [Ng2BComponent], -}) -export class Ng2BModule { - ngDoBootstrap() {} -} - -// The downgraded Angular modules. -const downgradedNg2AModule = downgradeModule((extraProviders: StaticProvider[]) => - (getPlatform() || platformBrowserDynamic(extraProviders)).bootstrapModule(Ng2AModule), -); - -const downgradedNg2BModule = downgradeModule((extraProviders: StaticProvider[]) => - (getPlatform() || platformBrowserDynamic(extraProviders)).bootstrapModule(Ng2BModule), -); - -// The AngularJS app including downgraded modules, components and injectables. -const appModule = angular - .module('exampleAppModule', [downgradedNg2AModule, downgradedNg2BModule]) - .component('exampleApp', { - template: ` - -
    -
    - - -
    - `, - controller: class ExampleAppController { - page = 'A'; - }, - }) - .component('ng1A', { - template: 'ng1({{ $ctrl.value }})', - controller: [ - 'ng2AService', - class Ng1AController { - value = this.ng2AService.getValue(); - constructor(private ng2AService: Ng2AService) {} - }, - ], - }) - .directive( - 'ng2A', - downgradeComponent({ - component: Ng2AComponent, - // Since there is more than one downgraded Angular module, - // specify which module this component belongs to. - downgradedModule: downgradedNg2AModule, - propagateDigest: false, - }), - ) - .directive( - 'ng2B', - downgradeComponent({ - component: Ng2BComponent, - // Since there is more than one downgraded Angular module, - // specify which module this component belongs to. - downgradedModule: downgradedNg2BModule, - propagateDigest: false, - }), - ) - .factory('ng2AService', downgradeInjectable(Ng2AService, downgradedNg2AModule)); - -// Bootstrap the AngularJS app. -angular.bootstrap(document.body, [appModule.name]); diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite/BUILD.bazel b/adev/src/content/api-examples/upgrade/static/ts/lite/BUILD.bazel deleted file mode 100644 index 666041cb7ebdbe..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite/BUILD.bazel +++ /dev/null @@ -1,21 +0,0 @@ -load("//packages/examples/upgrade:upgrade_example.bzl", "create_upgrade_example_targets") - -package(default_visibility = ["//visibility:public"]) - -create_upgrade_example_targets( - name = "lite", - srcs = glob( - ["**/*.ts"], - exclude = ["e2e_test/*"], - ), - assets = ["styles.css"], - e2e_srcs = glob(["e2e_test/*.ts"]), - entry_point = ":module.ts", -) - -filegroup( - name = "files_for_docgen", - srcs = glob([ - "**/*.ts", - ]), -) diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite/e2e_test/e2e_util.ts b/adev/src/content/api-examples/upgrade/static/ts/lite/e2e_test/e2e_util.ts deleted file mode 100644 index c3b56d7674e495..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite/e2e_test/e2e_util.ts +++ /dev/null @@ -1,70 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {by, ElementFinder} from 'protractor'; - -declare global { - namespace jasmine { - interface Matchers { - toBeAHero(): Promise; - toHaveName(exectedName: string): Promise; - } - } -} - -const isTitleCased = (text: string) => - text.split(/\s+/).every((word) => word[0] === word[0].toUpperCase()); - -export function addCustomMatchers() { - jasmine.addMatchers({ - toBeAHero: () => ({ - compare(actualNg1Hero: ElementFinder | undefined) { - const getText = (selector: string) => actualNg1Hero!.element(by.css(selector)).getText(); - const result = { - message: 'Expected undefined to be an `ng1Hero` ElementFinder.', - pass: - !!actualNg1Hero && - Promise.all(['.title', 'h2', 'p'].map(getText) as PromiseLike[]).then( - ([actualTitle, actualName, actualDescription]) => { - const pass = - actualTitle === 'Super Hero' && - isTitleCased(actualName) && - actualDescription.length > 0; - - const actualHero = `Hero(${actualTitle}, ${actualName}, ${actualDescription})`; - result.message = `Expected ${actualHero}'${pass ? ' not' : ''} to be a real hero.`; - - return pass; - }, - ), - }; - return result; - }, - }), - toHaveName: () => ({ - compare(actualNg1Hero: ElementFinder | undefined, expectedName: string) { - const result = { - message: 'Expected undefined to be an `ng1Hero` ElementFinder.', - pass: - !!actualNg1Hero && - actualNg1Hero - .element(by.css('h2')) - .getText() - .then((actualName) => { - const pass = actualName === expectedName; - result.message = `Expected Hero(${actualName})${ - pass ? ' not' : '' - } to have name '${expectedName}'.`; - return pass; - }), - }; - return result; - }, - }), - } as any); -} diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite/e2e_test/static_lite_spec.ts b/adev/src/content/api-examples/upgrade/static/ts/lite/e2e_test/static_lite_spec.ts deleted file mode 100644 index 6e71c72d9759a8..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite/e2e_test/static_lite_spec.ts +++ /dev/null @@ -1,90 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -import {browser, by, element, ElementArrayFinder, ElementFinder} from 'protractor'; - -import {verifyNoBrowserErrors} from '../../../../../../../../../packages/examples/test-utils/index'; - -import {addCustomMatchers} from './e2e_util'; - -function loadPage() { - browser.rootEl = 'example-app'; - browser.get('/'); -} - -describe('upgrade/static (lite)', () => { - let showHideBtn: ElementFinder; - let ng2Heroes: ElementFinder; - let ng2HeroesHeader: ElementFinder; - let ng2HeroesExtra: ElementFinder; - let ng2HeroesAddBtn: ElementFinder; - let ng1Heroes: ElementArrayFinder; - - const expectHeroes = (isShown: boolean, ng1HeroCount = 3, statusMessage = 'Ready') => { - // Verify the show/hide button text. - expect(showHideBtn.getText()).toBe(isShown ? 'Hide heroes' : 'Show heroes'); - - // Verify the `` component. - expect(ng2Heroes.isPresent()).toBe(isShown); - if (isShown) { - expect(ng2HeroesHeader.getText()).toBe('Heroes'); - expect(ng2HeroesExtra.getText()).toBe(`Status: ${statusMessage}`); - } - - // Verify the `` components. - expect(ng1Heroes.count()).toBe(isShown ? ng1HeroCount : 0); - if (isShown) { - ng1Heroes.each((ng1Hero) => expect(ng1Hero).toBeAHero()); - } - }; - - beforeEach(() => { - showHideBtn = element(by.binding('toggleBtnText')); - - ng2Heroes = element(by.css('.ng2-heroes')); - ng2HeroesHeader = ng2Heroes.element(by.css('h1')); - ng2HeroesExtra = ng2Heroes.element(by.css('.extra')); - ng2HeroesAddBtn = ng2Heroes.element(by.buttonText('Add Hero')); - - ng1Heroes = element.all(by.css('.ng1-hero')); - }); - beforeEach(addCustomMatchers); - beforeEach(loadPage); - afterEach(verifyNoBrowserErrors); - - it('should initially not render the heroes', () => expectHeroes(false)); - - it('should toggle the heroes when clicking the "show/hide" button', () => { - showHideBtn.click(); - expectHeroes(true); - - showHideBtn.click(); - expectHeroes(false); - }); - - it('should add a new hero when clicking the "add" button', () => { - showHideBtn.click(); - ng2HeroesAddBtn.click(); - - expectHeroes(true, 4, 'Added hero Kamala Khan'); - expect(ng1Heroes.last()).toHaveName('Kamala Khan'); - }); - - it('should remove a hero when clicking its "remove" button', () => { - showHideBtn.click(); - - const firstHero = ng1Heroes.first(); - expect(firstHero).toHaveName('Superman'); - - const removeBtn = firstHero.element(by.buttonText('Remove')); - removeBtn.click(); - - expectHeroes(true, 2, 'Removed hero Superman'); - expect(ng1Heroes.first()).not.toHaveName('Superman'); - }); -}); diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite/module.ts b/adev/src/content/api-examples/upgrade/static/ts/lite/module.ts deleted file mode 100644 index 401ea8528939a9..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite/module.ts +++ /dev/null @@ -1,223 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.dev/license - */ - -// #docplaster -import { - Component, - Directive, - ElementRef, - EventEmitter, - Inject, - Injectable, - Injector, - Input, - NgModule, - Output, - StaticProvider, -} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -// #docregion basic-how-to -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -// #enddocregion -/* tslint:disable: no-duplicate-imports */ -// #docregion basic-how-to -import {downgradeComponent, downgradeModule, UpgradeComponent} from '@angular/upgrade/static'; - -// #enddocregion -/* tslint:enable: no-duplicate-imports */ - -declare var angular: ng.IAngularStatic; - -interface Hero { - name: string; - description: string; -} - -// This Angular service will use an "upgraded" AngularJS service. -@Injectable() -class HeroesService { - heroes: Hero[] = [ - {name: 'superman', description: 'The man of steel'}, - {name: 'wonder woman', description: 'Princess of the Amazons'}, - {name: 'thor', description: 'The hammer-wielding god'}, - ]; - - constructor(@Inject('titleCase') titleCase: (v: string) => string) { - // Change all the hero names to title case, using the "upgraded" AngularJS service. - this.heroes.forEach((hero: Hero) => (hero.name = titleCase(hero.name))); - } - - addHero() { - const newHero: Hero = {name: 'Kamala Khan', description: 'Epic shape-shifting healer'}; - this.heroes = this.heroes.concat([newHero]); - return newHero; - } - - removeHero(hero: Hero) { - this.heroes = this.heroes.filter((item: Hero) => item !== hero); - } -} - -// This Angular component will be "downgraded" to be used in AngularJS. -@Component({ - selector: 'ng2-heroes', - // This template uses the "upgraded" `ng1-hero` component - // (Note that because its element is compiled by Angular we must use camelCased attribute names.) - template: ` -
    -
    - -
    - - Super Hero - -
    - -
    - `, - standalone: false, -}) -class Ng2HeroesComponent { - @Output() private addHero = new EventEmitter(); - @Output() private removeHero = new EventEmitter(); - - constructor( - @Inject('$rootScope') private $rootScope: ng.IRootScopeService, - public heroesService: HeroesService, - ) {} - - onAddHero() { - const newHero = this.heroesService.addHero(); - this.addHero.emit(newHero); - - // When a new instance of an "upgraded" component - such as `ng1Hero` - is created, we want to - // run a `$digest` to initialize its bindings. Here, the component will be created by `ngFor` - // asynchronously, thus we have to schedule the `$digest` to also happen asynchronously. - this.$rootScope.$applyAsync(); - } - - onRemoveHero(hero: Hero) { - this.heroesService.removeHero(hero); - this.removeHero.emit(hero); - } -} - -// This Angular directive will act as an interface to the "upgraded" AngularJS component. -@Directive({ - selector: 'ng1-hero', - standalone: false, -}) -class Ng1HeroComponentWrapper extends UpgradeComponent { - // The names of the input and output properties here must match the names of the - // `<` and `&` bindings in the AngularJS component that is being wrapped. - @Input() hero!: Hero; - @Output() onRemove: EventEmitter = new EventEmitter(); - - constructor(elementRef: ElementRef, injector: Injector) { - // We must pass the name of the directive as used by AngularJS to the super. - super('ng1Hero', elementRef, injector); - } -} - -// This Angular module represents the Angular pieces of the application. -@NgModule({ - imports: [BrowserModule], - declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper], - providers: [ - HeroesService, - // Register an Angular provider whose value is the "upgraded" AngularJS service. - {provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}, - ], - // Note that there are no `bootstrap` components, since the "downgraded" component - // will be instantiated by ngUpgrade. -}) -class MyLazyAngularModule { - // Empty placeholder method to prevent the `Compiler` from complaining. - ngDoBootstrap() {} -} - -// #docregion basic-how-to - -// The function that will bootstrap the Angular module (when/if necessary). -// (This would be omitted if we provided an `NgModuleFactory` directly.) -const ng2BootstrapFn = (extraProviders: StaticProvider[]) => - platformBrowserDynamic(extraProviders).bootstrapModule(MyLazyAngularModule); -// #enddocregion -// (We are using the dynamic browser platform, as this example has not been compiled AOT.) - -// #docregion basic-how-to - -// This AngularJS module represents the AngularJS pieces of the application. -const myMainAngularJsModule = angular.module('myMainAngularJsModule', [ - // We declare a dependency on the "downgraded" Angular module. - downgradeModule(ng2BootstrapFn), - // or - // downgradeModule(MyLazyAngularModuleFactory) -]); -// #enddocregion - -// This AngularJS component will be "upgraded" to be used in Angular. -myMainAngularJsModule.component('ng1Hero', { - bindings: {hero: '<', onRemove: '&'}, - transclude: true, - template: ` -
    -
    -

    {{ $ctrl.hero.name }}

    -

    {{ $ctrl.hero.description }}

    - -
    - `, -}); - -// This AngularJS service will be "upgraded" to be used in Angular. -myMainAngularJsModule.factory( - 'titleCase', - () => (value: string) => value.replace(/(^|\s)[a-z]/g, (m) => m.toUpperCase()), -); - -// This directive will act as the interface to the "downgraded" Angular component. -myMainAngularJsModule.directive( - 'ng2Heroes', - downgradeComponent({ - component: Ng2HeroesComponent, - // Optionally, disable `$digest` propagation to avoid unnecessary change detection. - // (Change detection is still run when the inputs of a "downgraded" component change.) - propagateDigest: false, - }), -); - -// This is our top level application component. -myMainAngularJsModule.component('exampleApp', { - // This template makes use of the "downgraded" `ng2-heroes` component, - // but loads it lazily only when/if the user clicks the button. - // (Note that because its element is compiled by AngularJS, - // we must use kebab-case attributes for inputs and outputs.) - template: ` - - - -

    Heroes

    -

    Status: {{ $ctrl.statusMessage }}

    -     - `, - controller: function () { - this.showHeroes = false; - this.statusMessage = 'Ready'; - - this.setStatusMessage = (msg: string) => (this.statusMessage = msg); - this.toggleHeroes = () => (this.showHeroes = !this.showHeroes); - this.toggleBtnText = () => `${this.showHeroes ? 'Hide' : 'Show'} heroes`; - }, -}); - -// We bootstrap the Angular module as we would do in a normal Angular app. -angular.bootstrap(document.body, [myMainAngularJsModule.name]); diff --git a/adev/src/content/api-examples/upgrade/static/ts/lite/styles.css b/adev/src/content/api-examples/upgrade/static/ts/lite/styles.css deleted file mode 100644 index f3785c1c229de7..00000000000000 --- a/adev/src/content/api-examples/upgrade/static/ts/lite/styles.css +++ /dev/null @@ -1,17 +0,0 @@ -ng2-heroes { - border: solid black 2px; - display: block; - padding: 5px; -} - -ng1-hero { - border: solid green 2px; - margin-top: 5px; - padding: 5px; - display: block; -} - -.title { - background-color: blue; - color: white; -} diff --git a/adev/src/content/api-examples/upgrade/tsconfig-build.json b/adev/src/content/api-examples/upgrade/tsconfig-build.json deleted file mode 100644 index eb79d48482c34f..00000000000000 --- a/adev/src/content/api-examples/upgrade/tsconfig-build.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "compilerOptions": { - "importHelpers": true, - "lib": ["dom", "es2015"], - "types": ["angular"] - } -} diff --git a/adev/src/content/api-examples/upgrade/upgrade_example.bzl b/adev/src/content/api-examples/upgrade/upgrade_example.bzl deleted file mode 100644 index 33934a3ecce77f..00000000000000 --- a/adev/src/content/api-examples/upgrade/upgrade_example.bzl +++ /dev/null @@ -1,66 +0,0 @@ -load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library") - -""" - Macro that can be used to create the Bazel targets for an "upgrade" example. Since the - upgrade examples bootstrap their application manually, and we cannot serve all examples, - we need to define the devserver for each example. This macro reduces code duplication - for defining these targets. -""" - -def create_upgrade_example_targets(name, srcs, e2e_srcs, entry_point, assets = []): - ng_module( - name = "%s_sources" % name, - srcs = srcs, - deps = [ - "@npm//@types/angular", - "@npm//@types/jasmine", - "//packages/core", - "//packages/platform-browser", - "//packages/platform-browser-dynamic", - "//packages/upgrade/static", - "//packages/core/testing", - "//packages/upgrade/static/testing", - ], - tsconfig = "//packages/examples/upgrade:tsconfig-build.json", - ) - - ts_library( - name = "%s_e2e_lib" % name, - srcs = e2e_srcs, - testonly = True, - deps = [ - "@npm//@types/jasminewd2", - "@npm//protractor", - "//packages/examples/test-utils", - "//packages/private/testing", - ], - tsconfig = "//packages/examples:tsconfig-e2e.json", - ) - - esbuild( - name = "app_bundle", - entry_point = entry_point, - deps = [":%s_sources" % name], - ) - - http_server( - name = "devserver", - additional_root_paths = ["angular/packages/examples/upgrade"], - srcs = [ - "//packages/examples/upgrade:index.html", - "//packages/zone.js/bundles:zone.umd.js", - "@npm//:node_modules/angular-1.8/angular.js", - "@npm//:node_modules/reflect-metadata/Reflect.js", - ] + assets, - deps = [":app_bundle"], - ) - - protractor_web_test_suite( - name = "%s_protractor" % name, - on_prepare = "//packages/examples/upgrade:start-server.js", - server = ":devserver", - deps = [ - ":%s_e2e_lib" % name, - "@npm//selenium-webdriver", - ], - ) diff --git a/packages/private/testing/BUILD.bazel b/packages/private/testing/BUILD.bazel index 7638f4038525fc..1fc4db4a7a19b5 100644 --- a/packages/private/testing/BUILD.bazel +++ b/packages/private/testing/BUILD.bazel @@ -1,8 +1,6 @@ load("//tools:defaults.bzl", "ng_module") package(default_visibility = [ - "//adev/src/content/api-examples/forms:__subpackages__", - "//adev/src/content/api-examples/upgrade/static/ts:__subpackages__", "//modules/playground:__subpackages__", "//packages:__subpackages__", ])