cargdev/angular
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

build(aio): change examples to CLI (#19248)

Browse Source 
PR Close #19248
This commit is contained in:
Jesus Rodriguez
2017-08-22 21:31:15 +02:00
committed by Igor Minar
parent 344a5ca545
commit 9bbf009dff
377 changed files with 2339 additions and 1748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
aio/content/examples/structural-directives/src/app/app.component.html
View File

@ -150,10 +150,10 @@
<!-- #docregion built-in , ngswitch -->
<div [ngSwitch]="hero?.emotion">
<happy-hero *ngSwitchCase="'happy'" [hero]="hero"></happy-hero>
<sad-hero *ngSwitchCase="'sad'" [hero]="hero"></sad-hero>
<confused-hero *ngSwitchCase="'confused'" [hero]="hero"></confused-hero>
<unknown-hero *ngSwitchDefault [hero]="hero"></unknown-hero>
<app-happy-hero *ngSwitchCase="'happy'" [hero]="hero"></app-happy-hero>
<app-sad-hero *ngSwitchCase="'sad'" [hero]="hero"></app-sad-hero>
<app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero>
<app-unknown-hero *ngSwitchDefault [hero]="hero"></app-unknown-hero>
</div>
<!-- #enddocregion built-in, ngswitch -->
@ -161,16 +161,16 @@
<!-- #docregion ngswitch-template -->
<div [ngSwitch]="hero?.emotion">
<ng-template [ngSwitchCase]="'happy'">
<happy-hero [hero]="hero"></happy-hero>
<app-happy-hero [hero]="hero"></app-happy-hero>
</ng-template>
<ng-template [ngSwitchCase]="'sad'">
<sad-hero [hero]="hero"></sad-hero>
<app-sad-hero [hero]="hero"></app-sad-hero>
</ng-template>
<ng-template [ngSwitchCase]="'confused'">
<confused-hero [hero]="hero"></confused-hero>
<app-confused-hero [hero]="hero"></app-confused-hero>
</ng-template >
<ng-template ngSwitchDefault>
<unknown-hero [hero]="hero"></unknown-hero>
<app-unknown-hero [hero]="hero"></app-unknown-hero>
</ng-template>
</div>
<!-- #enddocregion ngswitch-template -->
@ -199,11 +199,11 @@
</button>
</p>
<!-- #docregion myUnless-->
<p *myUnless="condition" class="unless a">
<p *appUnless="condition" class="unless a">
(A) This paragraph is displayed because the condition is false.
</p>
<p *myUnless="!condition" class="unless b">
<p *appUnless="!condition" class="unless b">
(B) Although the condition is true,
this paragraph is displayed because myUnless is set to false.
</p>
@ -213,14 +213,14 @@
<h4>UnlessDirective with template</h4>
<!-- #docregion myUnless-1 -->
<p *myUnless="condition">Show this sentence unless the condition is true.</p>
<p *appUnless="condition">Show this sentence unless the condition is true.</p>
<!-- #enddocregion myUnless-1 -->
<p *myUnless="condition" class="code unless">
<p *appUnless="condition" class="code unless">
(A) &lt;p *myUnless="condition" class="code unless"&gt;
</p>
<ng-template [myUnless]="condition">
<ng-template [appUnless]="condition">
<p class="code unless">
(A) &lt;ng-template [myUnless]="condition"&gt;
</p>

2
aio/content/examples/structural-directives/src/app/app.component.ts
View File

@ -4,7 +4,7 @@ import { Component } from '@angular/core';
import { Hero, heroes } from './hero';
@Component({
selector: 'my-app',
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})

8
aio/content/examples/structural-directives/src/app/hero-switch.components.ts
View File

@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'happy-hero',
selector: 'app-happy-hero',
template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
})
export class HappyHeroComponent {
@ -11,7 +11,7 @@ export class HappyHeroComponent {
}
@Component({
selector: 'sad-hero',
selector: 'app-sad-hero',
template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
})
export class SadHeroComponent {
@ -19,7 +19,7 @@ export class SadHeroComponent {
}
@Component({
selector: 'confused-hero',
selector: 'app-confused-hero',
template: `Are you as confused as {{hero.name}}?`
})
export class ConfusedHeroComponent {
@ -27,7 +27,7 @@ export class ConfusedHeroComponent {
}
@Component({
selector: 'unknown-hero',
selector: 'app-unknown-hero',
template: `{{message}}`
})
export class UnknownHeroComponent {

4
aio/content/examples/structural-directives/src/app/unless.directive.ts
View File

@ -24,7 +24,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
// #docregion no-docs
*/
// #docregion skeleton
@Directive({ selector: '[myUnless]'})
@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
// #enddocregion skeleton
private hasView = false;
@ -36,7 +36,7 @@ export class UnlessDirective {
// #enddocregion ctor
// #docregion set
@Input() set myUnless(condition: boolean) {
@Input() set appUnless(condition: boolean) {
if (!condition && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;