refactor: move angular source to /packages rather than modules/@angular
This commit is contained in:
72
packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts
Normal file
72
packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts
Normal file
@ -0,0 +1,72 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {$, ExpectedConditions, browser, by, element} from 'protractor';
|
||||
import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
|
||||
|
||||
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 = 'common/ngIf/ts/';
|
||||
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('hide Switch 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('hide Switch 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('show Switch Primary show = false\nAlternate text while primary text is hidden');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ng-if-let', () => {
|
||||
let comp = 'ng-if-let';
|
||||
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!');
|
||||
});
|
||||
});
|
||||
});
|
128
packages/examples/common/ngIf/ts/module.ts
Normal file
128
packages/examples/common/ngIf/ts/module.ts
Normal file
@ -0,0 +1,128 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, NgModule, OnInit, TemplateRef, ViewChild} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {Subject} from 'rxjs/Subject';
|
||||
|
||||
|
||||
// #docregion NgIfSimple
|
||||
@Component({
|
||||
selector: 'ng-if-simple',
|
||||
template: `
|
||||
<button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
|
||||
show = {{show}}
|
||||
<br>
|
||||
<div *ngIf="show">Text to show</div>
|
||||
`
|
||||
})
|
||||
class NgIfSimple {
|
||||
show: boolean = true;
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
// #docregion NgIfElse
|
||||
@Component({
|
||||
selector: 'ng-if-else',
|
||||
template: `
|
||||
<button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
|
||||
show = {{show}}
|
||||
<br>
|
||||
<div *ngIf="show; else elseBlock">Text to show</div>
|
||||
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
|
||||
`
|
||||
})
|
||||
class NgIfElse {
|
||||
show: boolean = true;
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
// #docregion NgIfThenElse
|
||||
@Component({
|
||||
selector: 'ng-if-then-else',
|
||||
template: `
|
||||
<button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
|
||||
<button (click)="switchPrimary()">Switch Primary</button>
|
||||
show = {{show}}
|
||||
<br>
|
||||
<div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
|
||||
<ng-template #primaryBlock>Primary text to show</ng-template>
|
||||
<ng-template #secondaryBlock>Secondary text to show</ng-template>
|
||||
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
|
||||
`
|
||||
})
|
||||
class NgIfThenElse implements OnInit {
|
||||
thenBlock: TemplateRef<any> = null;
|
||||
show: boolean = true;
|
||||
|
||||
@ViewChild('primaryBlock')
|
||||
primaryBlock: TemplateRef<any> = null;
|
||||
@ViewChild('secondaryBlock')
|
||||
secondaryBlock: TemplateRef<any> = null;
|
||||
|
||||
switchPrimary() {
|
||||
this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;
|
||||
}
|
||||
|
||||
ngOnInit() { this.thenBlock = this.primaryBlock; }
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
// #docregion NgIfLet
|
||||
@Component({
|
||||
selector: 'ng-if-let',
|
||||
template: `
|
||||
<button (click)="nextUser()">Next User</button>
|
||||
<br>
|
||||
<div *ngIf="userObservable | async; else loading; let user">
|
||||
Hello {{user.last}}, {{user.first}}!
|
||||
</div>
|
||||
<ng-template #loading let-user>Waiting... (user is {{user|json}})</ng-template>
|
||||
`
|
||||
})
|
||||
class NgIfLet {
|
||||
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: `
|
||||
<ng-if-simple></ng-if-simple>
|
||||
<hr>
|
||||
<ng-if-else></ng-if-else>
|
||||
<hr>
|
||||
<ng-if-then-else></ng-if-then-else>
|
||||
<hr>
|
||||
<ng-if-let></ng-if-let>
|
||||
<hr>
|
||||
`
|
||||
})
|
||||
class ExampleApp {
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [ExampleApp, NgIfSimple, NgIfElse, NgIfThenElse, NgIfLet],
|
||||
bootstrap: [ExampleApp]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
Reference in New Issue
Block a user