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

docs: refactored ng-container code (#22742)

Browse Source 
PR Close #22742
This commit is contained in:
Daniel 2018-03-13 18:06:13 +01:00 committed by Miško Hevery
parent d571a51739
commit f936b8cbd2
6 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
aio/content/examples/ngcontainer/src/app/app.component.css
View File

@ -4,7 +4,8 @@ button {
font-size: 100%; font-size: 100%;
} }
code, .code { code,
.code {
background-color: #eee; background-color: #eee;
color: black; color: black;
font-family: Courier, sans-serif; font-family: Courier, sans-serif;
@ -21,14 +22,18 @@ div.code {
} }
hr { hr {
margin: 40px 0 margin: 40px 0;
} }
td, th { td,
th {
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
} }
/* #docregion p-span */ /* #docregion p-span */
p span { color: red; font-size: 70%; } p span {
color: red;
font-size: 70%;
}
/* #enddocregion p-span */ /* #enddocregion p-span */

4
aio/content/examples/ngcontainer/src/app/app.component.html
View File

@ -132,7 +132,7 @@
<!-- #docregion select-span --> <!-- #docregion select-span -->
<select [(ngModel)]="hero"> <select [(ngModel)]="hero">
<span *ngFor="let h of heroes"> <span *ngFor="let h of heroes">
<span *ngIf="showSad || h?.emotion != 'sad'"> <span *ngIf="showSad || h?.emotion !== 'sad'">
<option [ngValue]="h">{{h.name}} ({{h?.emotion}})</option> <option [ngValue]="h">{{h.name}} ({{h?.emotion}})</option>
</span> </span>
</span> </span>
@ -147,7 +147,7 @@
<!-- #docregion select-ngcontainer --> <!-- #docregion select-ngcontainer -->
<select [(ngModel)]="hero"> <select [(ngModel)]="hero">
<ng-container *ngFor="let h of heroes"> <ng-container *ngFor="let h of heroes">
<ng-container *ngIf="showSad || h?.emotion != 'sad'"> <ng-container *ngIf="showSad || h?.emotion !== 'sad'">
<option [ngValue]="h">{{h.name}} ({{h?.emotion}})</option> <option [ngValue]="h">{{h.name}} ({{h?.emotion}})</option>
</ng-container> </ng-container>
</ng-container> </ng-container>

5
aio/content/examples/ngcontainer/src/app/app.component.ts
View File

@ -6,14 +6,15 @@ import { heroes } from './hero';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ] styleUrls: ['./app.component.css']
}) })
export class AppComponent { export class AppComponent {
heroes = heroes; heroes = heroes;
hero = this.heroes[0]; hero = this.heroes[0];
heroTraits = [ 'honest', 'brave', 'considerate' ]; heroTraits = ['honest', 'brave', 'considerate'];
// flags for the table // flags for the table
attrDirs = true; attrDirs = true;
strucDirs = true; strucDirs = true;
divNgIf = false; divNgIf = false;

6
aio/content/examples/ngcontainer/src/app/app.module.ts
View File

@ -1,9 +1,9 @@
// #docregion // #docregion
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { ContentComponent } from './content.component'; import { ContentComponent } from './content.component';
import { heroComponents } from './hero.components'; import { heroComponents } from './hero.components';

15
aio/content/examples/ngcontainer/src/app/hero.components.ts
View File

@ -1,5 +1,6 @@
// #docregion // #docregion
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { Hero } from './hero'; import { Hero } from './hero';
@Component({ @Component({
@ -33,11 +34,15 @@ export class ConfusedHeroComponent {
export class UnknownHeroComponent { export class UnknownHeroComponent {
@Input() hero: Hero; @Input() hero: Hero;
get message() { get message() {
return this.hero && this.hero.name ? return this.hero && this.hero.name
`${this.hero.name} is strange and mysterious.` : ? `${this.hero.name} is strange and mysterious.`
'Are you feeling indecisive?'; : 'Are you feeling indecisive?';
} }
} }
export const heroComponents = export const heroComponents = [
[ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ]; HappyHeroComponent,
SadHeroComponent,
ConfusedHeroComponent,
UnknownHeroComponent
];

6
aio/content/examples/ngcontainer/src/app/hero.ts
View File

@ -6,8 +6,8 @@ export class Hero {
} }
export const heroes: Hero[] = [ export const heroes: Hero[] = [
{ id: 1, name: 'Mr. Nice', emotion: 'happy'}, { id: 1, name: 'Mr. Nice', emotion: 'happy' },
{ id: 2, name: 'Narco', emotion: 'sad' }, { id: 2, name: 'Narco', emotion: 'sad' },
{ id: 3, name: 'Windstorm', emotion: 'confused' }, { id: 3, name: 'Windstorm', emotion: 'confused' },
{ id: 4, name: 'Magneta'} { id: 4, name: 'Magneta' }
]; ];