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

docs: translate tutorial/toh-pt2.md (#280)

Browse Source
This commit is contained in:
Antonio Cardenas 2021-04-06 17:40:39 -06:00 committed by GitHub
parent a4909d6aa0
commit f6936406ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 591 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

404
aio/content/marketing/presskit.html
View File

@ -1,18 +1,19 @@
<header class="marketing-banner"> <header class="marketing-banner">
<h1 class="banner-headline no-toc no-anchor">Press kit</h1> <h1 class="banner-headline no-toc no-anchor">Carpeta de prensa</h1>
</header> </header>
<article class="presskit-container"> <article class="presskit-container">
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div> <div>
<h2>ANGULAR LOGO</h2> <h2>LOGO DE ANGULAR</h2>
<p> <p>
The logo graphics available for download on this page are provided under Los gráficos del logotipo disponibles para descargar en esta página se proporcionan en
<a class="cc-by-anchor" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. <a class="cc-by-anchor" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
This means that you can pretty much do what you like with it including printing it on shirts, creating your own variations, or getting it tattooed over your navel. Esto significa que puedes hacer lo que quieras con él, incluso imprimirlo en camisetas, crear tu
propias variaciones, o tatuartele sobre el ombligo.
</p> </p>
<p>We do ask that you not use the rest of the site graphics in other contexts to avoid confusion.</p> <p>Te pedimos que no utilices el resto de los gráficos del sitio en otros contextos para evitar confusiones.</p>
</div> </div>
</div> </div>
</div> </div>
@ -23,13 +24,15 @@
<img src="assets/images/logos/angular/angular.svg" alt="Full color logo Angular"> <img src="assets/images/logos/angular/angular.svg" alt="Full color logo Angular">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">FULL COLOR LOGO</h3> <h3 class="l-space-left-3">LOGOTIPO A TODO COLOR</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Angular Logo (png) - <a href="assets/images/logos/angular/angular.png" download>Download</a></span> <span>Logo de Angular (png) - <a href="assets/images/logos/angular/angular.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Angular Logo (svg) - <a href="assets/images/logos/angular/angular.svg" download>Download</a></span> <span>Logo de Angular (svg) - <a href="assets/images/logos/angular/angular.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -44,13 +47,15 @@
</div> </div>
</div> </div>
<div> <div>
<h3 class="l-space-left-3">ONE COLOR LOGO</h3> <h3 class="l-space-left-3">LOGOTIPO DE UN COLOR</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Angular Logo Black (png) - <a href="assets/images/logos/angular/angular_solidBlack.png" download>Download</a></span> <span>Logo Angular en Negro (png) - <a href="assets/images/logos/angular/angular_solidBlack.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Angular Logo Black (svg) - <a href="assets/images/logos/angular/angular_solidBlack.svg" download>Download</a></span> <span>Logo Angular en Negro (svg) - <a href="assets/images/logos/angular/angular_solidBlack.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -61,17 +66,20 @@
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<div> <div>
<img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg" alt="Transparent logo Angular"> <img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg"
alt="Transparent logo Angular">
</div> </div>
</div> </div>
<div> <div>
<h3 class="l-space-left-3">ONE COLOR INVERSE LOGO</h3> <h3 class="l-space-left-3">LOGOTIPO INVERSO DE UN COLOR</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Angular Logo White Semi-Transparent (png) - <a href="assets/images/logos/angular/angular_whiteTransparent.png" download>Download</a></span> <span>Logo Angular White Semi-Transparent (png) - <a
href="assets/images/logos/angular/angular_whiteTransparent.png" download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Angular Logo Semi-Transparent (svg) - <a href="assets/images/logos/angular/angular_whiteTransparent.svg" download>Download</a></span> <span>Logo Angular Semi-Transparente (svg) - <a
href="assets/images/logos/angular/angular_whiteTransparent.svg" download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -81,7 +89,7 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div> <div>
<h2>BRAND ICONS</h2> <h2>ICONOS DE MARCA</h2>
</div> </div>
</div> </div>
</div> </div>
@ -89,16 +97,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/animations.png" alt="Animations Icon"> <img src="generated/images/marketing/concept-icons/animations.png" alt="Icono de Animaciones">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">ANIMATIONS</h3> <h3 class="l-space-left-3">ANIMACIONES</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Animations Icon (png) - <a href="generated/images/marketing/concept-icons/animations.png" download>Download</a></span> <span>Icono de Animaciones (png) - <a href="generated/images/marketing/concept-icons/animations.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Animations Icon (svg) - <a href="generated/images/marketing/concept-icons/animations.svg" download>Download</a></span> <span>Icono de Animaciones (svg) - <a href="generated/images/marketing/concept-icons/animations.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -108,16 +118,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/augury.png" alt="Augury Icon"> <img src="generated/images/marketing/concept-icons/augury.png" alt="Icono de Augury">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">AUGURY</h3> <h3 class="l-space-left-3">AUGURY</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Augury Icon (png) - <a href="generated/images/marketing/concept-icons/augury.png" download>Download</a></span> <span>Icono de Augury (png) - <a href="generated/images/marketing/concept-icons/augury.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Augury Icon (svg) - <a href="generated/images/marketing/concept-icons/augury.svg" download>Download</a></span> <span>Icono de Augury (svg) - <a href="generated/images/marketing/concept-icons/augury.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -127,35 +139,60 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/cdk.png" alt="CDK Icon"> <img src="generated/images/marketing/concept-icons/cdk.png" alt="Icono de CDK">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">COMPONENT DEV KIT (CDK)</h3> <h3 class="l-space-left-3">KIT DE DESARROLLO DE COMPONENTES (CDK)</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>CDK Icon (png) - <a href="generated/images/marketing/concept-icons/cdk.png" download>Download</a></span> <span>Icono de CDK (png) - <a href="generated/images/marketing/concept-icons/cdk.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>CDK Icon (svg) - <a href="generated/images/marketing/concept-icons/cdk.svg" download>Download</a></span> <span>Icono de CDK (svg) - <a href="generated/images/marketing/concept-icons/cdk.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container"></div>
<img src="generated/images/marketing/concept-icons/cli.png" alt="Icono de el CLI">
</div>
<div>
<h3 class="l-space-left-3">CLI</h3>
<ul class="l-space-left-3">
<li>
<span>Icono de el CLI (png) - <a href="generated/images/marketing/concept-icons/cli.png"
download>Descargar</a></span>
</li>
<li>
<span>Icono de el CLI (svg) - <a href="generated/images/marketing/concept-icons/cli.svg"
download>Descargar</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/cli.png" alt="CLI Icon"> <img src="generated/images/marketing/concept-icons/compiler.png" alt="Icono de Compilador">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">CLI</h3> <h3 class="l-space-left-3">COMPILADOR</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>CLI Icon (png) - <a href="generated/images/marketing/concept-icons/cli.png" download>Download</a></span> <span>Icono de Compilador (png) - <a href="generated/images/marketing/concept-icons/compiler.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>CLI Icon (svg) - <a href="generated/images/marketing/concept-icons/cli.svg" download>Download</a></span> <span>Icono de Compilador (svg) - <a href="generated/images/marketing/concept-icons/compiler.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -165,16 +202,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/compiler.png" alt="Compiler Icon"> <img src="generated/images/marketing/concept-icons/components.png" alt="Icono de Componentes Web">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">COMPILER</h3> <h3 class="l-space-left-3">COMPONENTES WEB</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Compiler Icon (png) - <a href="generated/images/marketing/concept-icons/compiler.png" download>Download</a></span> <span>Icono de Componentes Web (png) - <a href="generated/images/marketing/concept-icons/components.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Compiler Icon (svg) - <a href="generated/images/marketing/concept-icons/compiler.svg" download>Download</a></span> <span>Icono de Componentes Web (svg) - <a href="generated/images/marketing/concept-icons/components.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -184,16 +223,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/components.png" alt="Components Icon"> <img src="generated/images/marketing/concept-icons/forms.png" alt="Icono de Formularios">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">WEB COMPONENTS</h3> <h3 class="l-space-left-3">FORMULARIOS</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Web Components Icon (png) - <a href="generated/images/marketing/concept-icons/components.png" download>Download</a></span> <span>Icono de Formularios (png) - <a href="generated/images/marketing/concept-icons/forms.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Web Components Icon (svg) - <a href="generated/images/marketing/concept-icons/components.svg" download>Download</a></span> <span>Icono de Formularios (svg) - <a href="generated/images/marketing/concept-icons/forms.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -203,35 +244,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/forms.png" alt="Forms Icon"> <img src="generated/images/marketing/concept-icons/http.png" alt="Icono de HTTP">
</div>
<div>
<h3 class="l-space-left-3">FORMS</h3>
<ul class="l-space-left-3">
<li>
<span>Forms Icon (png) - <a href="generated/images/marketing/concept-icons/forms.png" download>Download</a></span>
</li>
<li>
<span>Forms Icon (svg) - <a href="generated/images/marketing/concept-icons/forms.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/http.png" alt="HTTP Icon">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">HTTP</h3> <h3 class="l-space-left-3">HTTP</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>HTTP Icon (png) - <a href="generated/images/marketing/concept-icons/http.png" download>Download</a></span> <span>Icono de HTTP (png) - <a href="generated/images/marketing/concept-icons/http.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>HTTP Icon (svg) - <a href="generated/images/marketing/concept-icons/http.svg" download>Download</a></span> <span>Icono de HTTP (svg) - <a href="generated/images/marketing/concept-icons/http.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -241,16 +265,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/i18n.png" alt="i18n Icon"> <img src="generated/images/marketing/concept-icons/i18n.png" alt="Icono de i18n">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">i18n</h3> <h3 class="l-space-left-3">i18n</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>HTTP Icon (png) - <a href="generated/images/marketing/concept-icons/i18n.png" download>Download</a></span> <span>Icono de HTTP (png) - <a href="generated/images/marketing/concept-icons/i18n.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>HTTP Icon (svg) - <a href="generated/images/marketing/concept-icons/i18n.svg" download>Download</a></span> <span>Icono de HTTP (svg) - <a href="generated/images/marketing/concept-icons/i18n.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -260,16 +286,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/karma.png" alt="Karma Icon"> <img src="generated/images/marketing/concept-icons/karma.png" alt="Icono de Karma">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">KARMA</h3> <h3 class="l-space-left-3">KARMA</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Karma Icon (png) - <a href="generated/images/marketing/concept-icons/karma.png" download>Download</a></span> <span>Icono de Karma (png) - <a href="generated/images/marketing/concept-icons/karma.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Karma Icon (svg) - <a href="generated/images/marketing/concept-icons/karma.svg" download>Download</a></span> <span>Icono de Karma (svg) - <a href="generated/images/marketing/concept-icons/karma.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -279,16 +307,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/labs.png" alt="Labs Icon"> <img src="generated/images/marketing/concept-icons/labs.png" alt="Icono de Labs">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">LABS</h3> <h3 class="l-space-left-3">LABS</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Labs Icon (png) - <a href="generated/images/marketing/concept-icons/labs.png" download>Download</a></span> <span>Icono de Labs (png) - <a href="generated/images/marketing/concept-icons/labs.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Labs Icon (svg) - <a href="generated/images/marketing/concept-icons/labs.svg" download>Download</a></span> <span>Icono de Labs (svg) - <a href="generated/images/marketing/concept-icons/labs.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -298,16 +328,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/language-services.png" alt="Language Services Icon"> <img src="generated/images/marketing/concept-icons/language-services.png" alt="Icono de Language Services">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">LANGUAGE SERVICES</h3> <h3 class="l-space-left-3">LANGUAGE SERVICES</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Language Services Icon (png) - <a href="generated/images/marketing/concept-icons/language-services.png" download>Download</a></span> <span>Icono de Language Services (png) - <a
href="generated/images/marketing/concept-icons/language-services.png" download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Language Services Icon (svg) - <a href="generated/images/marketing/concept-icons/language-services.svg" download>Download</a></span> <span>Icono de Language Services (svg) - <a
href="generated/images/marketing/concept-icons/language-services.svg" download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -317,16 +349,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/material.png" alt="Material Icon"> <img src="generated/images/marketing/concept-icons/material.png" alt="Icono de Material">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">MATERIAL</h3> <h3 class="l-space-left-3">MATERIAL</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Material Icon (png) - <a href="generated/images/marketing/concept-icons/material.png" download>Download</a></span> <span>Icono de material (png) - <a href="generated/images/marketing/concept-icons/material.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Material Icon (svg) - <a href="generated/images/marketing/concept-icons/material.svg" download>Download</a></span> <span>Icono de material (svg) - <a href="generated/images/marketing/concept-icons/material.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -336,16 +370,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/protractor.png" alt="Protractor Icon"> <img src="generated/images/marketing/concept-icons/protractor.png" alt="Icono de Protractor">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">PROTRACTOR</h3> <h3 class="l-space-left-3">PROTRACTOR</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Protractor Icon (png) - <a href="generated/images/marketing/concept-icons/protractor.png" download>Download</a></span> <span>Icono de Protractor (png) - <a href="generated/images/marketing/concept-icons/protractor.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Protractor Icon (svg) - <a href="generated/images/marketing/concept-icons/protractor.svg" download>Download</a></span> <span>Icono de Protractor (svg) - <a href="generated/images/marketing/concept-icons/protractor.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -355,16 +391,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/pwa.png" alt="PWA Icon"> <img src="generated/images/marketing/concept-icons/pwa.png" alt="Icono de PWA">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">PWA</h3> <h3 class="l-space-left-3">PWA</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>PWA Icon (png) - <a href="generated/images/marketing/concept-icons/pwa.png" download>Download</a></span> <span>Icono de PWA (png) - <a href="generated/images/marketing/concept-icons/pwa.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>PWA Icon (svg) - <a href="generated/images/marketing/concept-icons/pwa.svg" download>Download</a></span> <span>Icono de PWA (svg) - <a href="generated/images/marketing/concept-icons/pwa.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -374,16 +412,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/router.png" alt="Router Icon"> <img src="generated/images/marketing/concept-icons/router.png" alt="Icono de Router">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">ROUTER</h3> <h3 class="l-space-left-3">ROUTER</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Router Icon (png) - <a href="generated/images/marketing/concept-icons/router.png" download>Download</a></span> <span>Icono de Router (png) - <a href="generated/images/marketing/concept-icons/router.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Router Icon (svg) - <a href="generated/images/marketing/concept-icons/router.svg" download>Download</a></span> <span>Icono de Router (svg) - <a href="generated/images/marketing/concept-icons/router.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -393,16 +433,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/universal.png" alt="Universal Icon"> <img src="generated/images/marketing/concept-icons/universal.png" alt="Icono Universal">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">UNIVERSAL</h3> <h3 class="l-space-left-3">UNIVERSAL</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Universal Icon (png) - <a href="generated/images/marketing/concept-icons/universal.png" download>Download</a></span> <span>Icono Universal (png) - <a href="generated/images/marketing/concept-icons/universal.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Universal Icon (svg) - <a href="generated/images/marketing/concept-icons/universal.svg" download>Download</a></span> <span>Icono Universal (svg) - <a href="generated/images/marketing/concept-icons/universal.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -412,7 +454,7 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div> <div>
<h2>CONCEPT & FEATURE ICONS</h2> <h2>ICONOS DE CONCEPTO Y CARACTERÍSTICAS</h2>
</div> </div>
</div> </div>
</div> </div>
@ -420,16 +462,19 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/dependency-injection.png" alt="Dependency Injection Icon"> <img src="generated/images/marketing/concept-icons/dependency-injection.png"
alt="Icono de inyección de dependencia">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">DEPENDENCY INJECTION</h3> <h3 class="l-space-left-3">INYECCIÓN DE DEPENDENCIA</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Dependency Injection Icon (png) - <a href="generated/images/marketing/concept-icons/dependency-injection.png" download>Download</a></span> <span>Icono de inyección de dependencia (png) - <a
href="generated/images/marketing/concept-icons/dependency-injection.png" download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Dependency Injection Icon (svg) - <a href="generated/images/marketing/concept-icons/dependency-injection.svg" download>Download</a></span> <span>Icono de inyección de dependencia (svg) - <a
href="generated/images/marketing/concept-icons/dependency-injection.svg" download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -439,16 +484,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/lazy-loading.png" alt="Lazy Loading Icon"> <img src="generated/images/marketing/concept-icons/lazy-loading.png" alt="Icono de carga diferida">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">LAZY LOADING</h3> <h3 class="l-space-left-3">LAZY LOADING</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Lazy Loading Icon (png) - <a href="generated/images/marketing/concept-icons/lazy-loading.png" download>Download</a></span> <span>Icono de carga diferida (png) - <a href="generated/images/marketing/concept-icons/lazy-loading.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Lazy Loading Icon (svg) - <a href="generated/images/marketing/concept-icons/lazy-loading.svg" download>Download</a></span> <span>Icono de carga diferida (svg) - <a href="generated/images/marketing/concept-icons/lazy-loading.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -458,16 +505,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/libraries.png" alt="Libraries Icon"> <img src="generated/images/marketing/concept-icons/libraries.png" alt="Icono de bibliotecas">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">LIBRARIES</h3> <h3 class="l-space-left-3">Bibliotecas</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Libraries Icon (png) - <a href="generated/images/marketing/concept-icons/libraries.png" download>Download</a></span> <span>Icono de bibliotecas (png) - <a href="generated/images/marketing/concept-icons/libraries.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Libraries Icon (svg) - <a href="generated/images/marketing/concept-icons/libraries.svg" download>Download</a></span> <span>Icono de bibliotecas (svg) - <a href="generated/images/marketing/concept-icons/libraries.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -477,16 +526,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/performance.png" alt="Performance Icon"> <img src="generated/images/marketing/concept-icons/performance.png" alt="Icono de rendimiento">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">PERFORMANCE</h3> <h3 class="l-space-left-3">RENDIMIENTO</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Performance Icon (png) - <a href="generated/images/marketing/concept-icons/performance.png" download>Download</a></span> <span>Icono de rendimiento (png) - <a href="generated/images/marketing/concept-icons/performance.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Performance Icon (svg) - <a href="generated/images/marketing/concept-icons/performance.svg" download>Download</a></span> <span>Icono de rendimiento (svg) - <a href="generated/images/marketing/concept-icons/performance.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -496,16 +547,18 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="presskit-image-container"> <div class="presskit-image-container">
<img src="generated/images/marketing/concept-icons/templates.png" alt="Templates Icon"> <img src="generated/images/marketing/concept-icons/templates.png" alt="Icono de plantillas">
</div> </div>
<div> <div>
<h3 class="l-space-left-3">TEMPLATES</h3> <h3 class="l-space-left-3">PLANTILLAS</h3>
<ul class="l-space-left-3"> <ul class="l-space-left-3">
<li> <li>
<span>Templates Icon (png) - <a href="generated/images/marketing/concept-icons/templates.png" download>Download</a></span> <span>Icono de plantillas (png) - <a href="generated/images/marketing/concept-icons/templates.png"
download>Descargar</a></span>
</li> </li>
<li> <li>
<span>Templates Icon (svg) - <a href="generated/images/marketing/concept-icons/templates.svg" download>Download</a></span> <span>Icono de plantillas (svg) - <a href="generated/images/marketing/concept-icons/templates.svg"
download>Descargar</a></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -515,98 +568,113 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div> <div>
<h2>PRESS AND MEDIA</h2> <h2>PRENSA Y MEDIOS </h2>
<p>For inquiries regarding press and media please contact us at <p> Para consultas sobre prensa y medios, contáctenos en
<a href="mailto:press@angular.io">press@angular.io</a>.</p> <a href="mailto:press@angular.io">press@angular.io</a>.</p>
</div> </div>
</div> </div>
</div> </div>
<style> <style>
div.bullets ul { div.bullets ul {
list-style-type: disc !important; margin-left: 1em !important; list-style-type: disc !important;
margin-left: 1em !important;
} }
</style> </style>
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="bullets"> <div class="bullets">
<h2>BRAND NAMES</h2> <h2>NOMBRES DE MARCAS</h2>
<h3>Angular</h3> <h3>Angular</h3>
<p>The name <b>Angular</b> represents the work and promises provided to you by the Angular team.</p> <p>El Nombre <b>Angular</b> representa el trabajo y las promesas que le proporcionó el equipo de Angular.</p>
<p>When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular Team.</p> <p> Cuando no se especifica, se supone que Angular se refiere a la última y mejor versión estable del equipo de
Angular. </p>
<h4>Ejemplo</h4>
<p><b> Versión v4.1 ya disponible </b>: Nos complace anunciar que la última versión de Angular ya está
disponible. ¡Mantenerse actualizado es fácil! </p>
<h4>Example</h4> <h4>Ejemplo</h4>
<p><b>Version v4.1 now available</b> - We are pleased to announce that the latest release of Angular is now available. Staying up to date is easy!</p>
<h4>Example</h4> <p><b>Correcto: </b> "Nuevo <code>*ngIf</code> capacidades</b>&mdash;nuevo en la versión 4.0 es la capacidad de
..."</p>
<p><b style="color: red">Incorrecto: </b> "Nuevo <code>*ngIf</code> capacidades en Angular 4</b>&mdash;Angular 4
introduce la capacidad de ..."</p>
<p><b>Correct: </b> "New <code>*ngIf</code> capabilities</b>&mdash;new in version 4.0 is the ability to ..."</p> <p><b>Razonamiento</b></p>
<p><b style="color: red">Incorrect: </b> "New <code>*ngIf</code> capabilities in Angular 4</b>&mdash;Angular 4 introduces the ability to ..."</p>
<p><b>Reasoning</b></p> <p> Al no usar "Angular 4" en el título, el contenido aún se siente aplicable y útil después de que se hayan
lanzado las versiones 5, 6, 7, ya que es poco probable que la sintaxis cambie a corto y mediano plazo. </p>
<p>By not using “Angular 4” in the title, the content still feels applicable and useful after version 5, 6, 7 have been released, as the syntax is unlikely to change in the short and medium term.</p> <h3>AngularJS</h3>
<h3>AngularJS</h3> <p><b> AngularJS </b> es la serie v1.x de trabajo y promesas proporcionadas por el equipo de Angular. </p>
<p><b>AngularJS</b> is the v1.x series of work and promises provided by the Angular team.</p> <h4>Ejemplos</h4>
<ol>
<li> AngularJS es uno de los marcos más utilizados en la web en la actualidad (por número de proyectos). </li>
<li> Millones de desarrolladores están construyendo actualmente con AngularJS. </li>
<li> Los desarrolladores están comenzando a actualizar de AngularJS a Angular. </li>
<li> Estoy actualizando mi aplicación de AngularJS a Angular. </li>
<li> Estoy usando AngularJS Material en este proyecto. </li>
</ol>
<h4>Examples</h4> <p>Los proyectos de AngularJS deben usar el
<ol>
<li>AngularJS is one of the most used framework on the web today (by number of projects).</li>
<li>Millions of developers are currently building with AngularJS.</li>
<li>Developers are beginning to upgrade from AngularJS to Angular.</li>
<li>I’m upgrading my application from AngularJS to Angular.</li>
<li>I'm using AngularJS Material on this project.</li>
</ol>
<p>AngularJS projects should use the
<a href="assets/images/logos/angularjs/AngularJS-Shield.svg" title="AngularJS logo"> <a href="assets/images/logos/angularjs/AngularJS-Shield.svg" title="AngularJS logo">
original AngularJS logo</a> / icon, and not the Angular icon.</p> logo original de AngularJS </a> / icono, y no el icono de Angular.</p>
<img src="assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px;" height="128" width="128"> <img src="assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px;"
height="128" width="128">
<h3>Angular Material</h3> <h3>Angular Material</h3>
<p>This is the work being performed by the Angular team to provide Material Design components for Angular applications.</p> <p>Este es el trabajo que está realizando el equipo de Angular para proporcionar componentes de Material Design
para aplicaciones Angular.</p>
<h3>AngularJS Material</h3> <h3>Material de AngularJS</h3>
<p>This is the work being performed by the Angular team on Material Design components that are compatible with AngularJS.</p> <p>Este es el trabajo que está realizando el equipo de Angular en los componentes de Material Design que son
compatibles con AngularJS.</p>
<h3>3rd Party Projects</h3> <h3>Proyectos de terceros</h3>
<p><b>X for Angular</b></p> <p><b>X para Angular</b></p>
<p>3rd parties should use the terminology “X for Angular” or “ng-X” for software projects. Projects should avoid the use of Angular X (e.g. Angular UI Toolkit), as it could create authorship confusion. This rule does not apply to events or meetup groups.</p> <p>Los terceros deben utilizar la terminología "X para Angular" o "ng-X" para proyectos de software. Los
proyectos deben evitar el uso de Angular X (por ejemplo, Angular UI Toolkit), ya que podría crear confusión en
la autoría. Esta regla no se aplica a eventos o grupos de reuniones.</p>
<p>Developers should avoid using Angular version numbers in project names, as this will artificially limit their projects by tying them to a point in time of Angular, or will require renaming over time.</p> <p>Los desarrolladores deben evitar el uso de números de versión de Angular en los nombres de los proyectos, ya
que esto limitará artificialmente sus proyectos al vincularlos a un punto en el tiempo de Angular, o requerirá
un cambio de nombre con el tiempo.</p>
<p>Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.</p> <p>Cuando se usa un nombre en clave o un nombre abreviado, como en npm o github, algunos son aceptables, otros
no.</p>
<b>Do not use</b> <b>No utilices</b>
<ul> <ul>
<li><code>ng2-</code></li> <li><code>ng2-</code></li>
<li><code>angular2-</code></li> <li><code>angular2-</code></li>
</ul> </ul>
<b>OK to use</b> <b>Bien para usar</b>
<ul> <ul>
<li><code>ng-</code></li> <li><code>ng-</code></li>
<li><code>angular-</code></li> <li><code>angular-</code></li>
</ul> </ul>
<p>As always, component and directive selectors should not begin with “ng-” selectors as this will conflict with components and directives provided by the Angular team.</p> <p>Como siempre, los selectores de componentes y directivas no deben comenzar con selectores "ng-", ya que esto
entrará en conflicto con los componentes y las directivas proporcionadas por el equipo de Angular.</p>
<h4>Examples</h4> <h4>Ejemplos</h4>
<ul> <ul>
<li>The ng-BE team just launched <code>ng-health</code> to help developers track their own health.</li> <li>El equipo ng-BE acaba de lanzar <code>ng-health</code> Para ayudar a los desarrolladores a rastrear su
<li>I’m going to use NativeScript for Angular to take advantage of native UI widgets.</li> propia salud.</li>
<li><code>ReallyCoolTool</code> for Angular.</li> <li>Voy a usar NativeScript para Angular para aprovechar los widgets de IU nativos.</li>
<li><code>ReallyCoolTool</code> for AngularJS.</li> <li><code>ReallyCoolTool</code> para Angular.</li>
</ul> <li><code>ReallyCoolTool</code> para AngularJS.</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -614,10 +682,10 @@
<div class="presskit-row"> <div class="presskit-row">
<div class="presskit-inner"> <div class="presskit-inner">
<div class="bullets"> <div class="bullets">
<h2>TERMS WE USE</h2> <h2>TÉRMINOS QUE UTILIZAMOS</h2>
<p> <p>
We often use terms that are not part of our brand, A menudo utilizamos términos que no forman parte de nuestra marca,
but we want to remain consistent on the styling and use of them to prevent confusion and to appear unified. pero queremos ser consistentes en el estilo y el uso de ellos para evitar confusiones y parecer unificados.
</p> </p>
<ul> <ul>
<li>Ahead of Time compilation (AOT)</li> <li>Ahead of Time compilation (AOT)</li>
@ -626,4 +694,4 @@
</div> </div>
</div> </div>
</div> </div>
</article> </article>

253
aio/content/tutorial/toh-pt2.en.md Normal file
View File

@ -0,0 +1,253 @@
# Display a selection list
In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
allow users to select a hero and display the hero's details.
<div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>.
</div>
## Create mock heroes
You'll need some heroes to display.
Eventually you'll get them from a remote data server.
For now, you'll create some _mock heroes_ and pretend they came from the server.
Create a file called `mock-heroes.ts` in the `src/app/` folder.
Define a `HEROES` constant as an array of ten heroes and export it.
The file should look like this.
<code-example path="toh-pt2/src/app/mock-heroes.ts" header="src/app/mock-heroes.ts"></code-example>
## Displaying heroes
Open the `HeroesComponent` class file and import the mock `HEROES`.
<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" header="src/app/heroes/heroes.component.ts (import HEROES)">
</code-example>
In the same file (`HeroesComponent` class), define a component property called `heroes` to expose the `HEROES` array for binding.
<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="component">
</code-example>
### List heroes with `*ngFor`
Open the `HeroesComponent` template file and make the following changes:
* Add an `<h2>` at the top,
* Below it add an HTML unordered list (`<ul>`)
* Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
Make it look like this:
<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="list" header="heroes.component.html (heroes template)"></code-example>
That shows one hero. To list them all, add an `*ngFor` to the `<li>` to iterate through the list of heroes:
<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
</code-example>
The [`*ngFor`](guide/built-in-directives#ngFor) is Angular's _repeater_ directive.
It repeats the host element for each element in a list.
The syntax in this example is as follows:
* `<li>` is the host element.
* `heroes` holds the mock heroes list from the `HeroesComponent` class, the mock heroes list.
* `hero` holds the current hero object for each iteration through the list.
<div class="alert is-important">
Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax.
</div>
After the browser refreshes, the list of heroes appears.
{@a styles}
### Style the heroes
The heroes list should be attractive and should respond visually when users
hover over and select a hero from the list.
In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`.
That stylesheet didn't include styles for this list of heroes.
You could add more styles to `styles.css` and keep growing that stylesheet as you add components.
You may prefer instead to define private styles for a specific component and keep everything a component needs&mdash; the code, the HTML,
and the CSS &mdash;together in one place.
This approach makes it easier to re-use the component somewhere else
and deliver the component's intended appearance even if the global styles are different.
You define private styles either inline in the `@Component.styles` array or
as stylesheet file(s) identified in the `@Component.styleUrls` array.
When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent`
and pointed to it in `@Component.styleUrls` like this.
<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="metadata"
header="src/app/heroes/heroes.component.ts (@Component)">
</code-example>
Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`.
You'll find them in the [final code review](#final-code-review) at the bottom of this guide.
<div class="alert is-important">
Styles and stylesheets identified in `@Component` metadata are scoped to that specific component.
The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component.
</div>
## Master/Detail
When the user clicks a hero in the **master** list,
the component should display the selected hero's **details** at the bottom of the page.
In this section, you'll listen for the hero item click event
and update the hero detail.
### Add a click event binding
Add a click event binding to the `<li>` like this:
<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" header="heroes.component.html (template excerpt)"></code-example>
This is an example of Angular's [event binding](guide/event-binding) syntax.
The parentheses around `click` tell Angular to listen for the `<li>` element's `click` event.
When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression.
In the next section, define an `onSelect()` method in `HeroesComponent` to
display the hero that was defined in the `*ngFor` expression.
### Add the click event handler
Rename the component's `hero` property to `selectedHero` but don't assign it.
There is no _selected hero_ when the application starts.
Add the following `onSelect()` method, which assigns the clicked hero from the template
to the component's `selectedHero`.
<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="on-select" header="src/app/heroes/heroes.component.ts (onSelect)"></code-example>
### Add a details section
Currently, you have a list in the component template. To click on a hero on the list
and reveal details about that hero, you need a section for the details to render in the
template. Add the following to `heroes.component.html` beneath the list section:
<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)"></code-example>
After the browser refreshes, the application is broken.
Open the browser developer tools and look in the console for an error message like this:
<code-example language="sh" class="code-shell">
HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
</code-example>
#### What happened?
When the app starts, the `selectedHero` is `undefined` _by design_.
Binding expressions in the template that refer to properties of `selectedHero`&mdash;expressions like `{{selectedHero.name}}`&mdash;_must fail_ because there is no selected hero.
#### The fix - hide empty details with _*ngIf_
The component should only display the selected hero details if the `selectedHero` exists.
Wrap the hero detail HTML in a `<div>`.
Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
<div class="alert is-important">
Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax.
</div>
<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="ng-if" header="src/app/heroes/heroes.component.html (*ngIf)"></code-example>
After the browser refreshes, the list of names reappears.
The details area is blank.
Click a hero in the list of heroes and its details appear.
The app seems to be working again.
The heroes appear in a list and details about the clicked hero appear at the bottom of the page.
#### Why it works
When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to consider.
When the user picks a hero, `selectedHero` has a value and
`ngIf` puts the hero detail into the DOM.
### Style the selected hero
It's difficult to identify the _selected hero_ in the list when all `<li>` elements look alike.
If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
<div class="lightbox">
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
</div>
That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles).
You just have to apply the `.selected` class to the `<li>` when the user clicks it.
The Angular [class binding](guide/attribute-binding#class-binding) makes it easy to add and remove a CSS class conditionally.
Just add `[class.some-css-class]="some-condition"` to the element you want to style.
Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template:
<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" header="heroes.component.html (toggle the 'selected' CSS class)"></code-example>
When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class.
The finished `<li>` looks like this:
<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="li" header="heroes.component.html (list item hero)"></code-example>
{@a final-code-review}
## Final code review
Here are the code files discussed on this page, including the `HeroesComponent` styles.
<code-tabs>
<code-pane header="src/app/mock-heroes.ts" path="toh-pt2/src/app/mock-heroes.ts">
</code-pane>
<code-pane header="src/app/heroes/heroes.component.ts" path="toh-pt2/src/app/heroes/heroes.component.ts">
</code-pane>
<code-pane header="src/app/heroes/heroes.component.html" path="toh-pt2/src/app/heroes/heroes.component.html">
</code-pane>
<code-pane header="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css">
</code-pane>
</code-tabs>
## Summary
* The Tour of Heroes app displays a list of heroes in a Master/Detail view.
* The user can select a hero and see that hero's details.
* You used `*ngFor` to display a list.
* You used `*ngIf` to conditionally include or exclude a block of HTML.
* You can toggle a CSS style class with a `class` binding.

220
aio/content/tutorial/toh-pt2.md
View File

@ -1,238 +1,223 @@
# Display a selection list # Mostrar una lista de selección
In this page, you'll expand the Tour of Heroes app to display a list of heroes, and En esta página, ampliaremos la aplicación Tour de Héroes para mostrar una lista de héroes,
allow users to select a hero and display the hero's details. Permite al usuario seleccionar un héroe y ver los detalles del héroe.
<div class="alert is-helpful"> <div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>. Para ver la aplicación de ejemplo que describe esta página, consulta el <live-example></live-example>.
</div> </div>
## Create mock heroes ## Crea un simulacro de héroe
You'll need some heroes to display. Primero, necesitarás algunos héroes para mostrar.
Eventualmente los obtendrá de un servidor de datos remoto. Por ahora, creará algunos _héroes simulados_ y pretenderá que provienen del servidor.
Eventually you'll get them from a remote data server. Crea un archivo llamado `mock-heroes.ts` en la carpeta `src/app/`.
For now, you'll create some _mock heroes_ and pretend they came from the server. Define la constante `HEROES` como un conjunto de 10 héroes y expórtala.
El archivo se verá así:
Create a file called `mock-heroes.ts` in the `src/app/` folder.
Define a `HEROES` constant as an array of ten heroes and export it.
The file should look like this.
<code-example path="toh-pt2/src/app/mock-heroes.ts" header="src/app/mock-heroes.ts"></code-example> <code-example path="toh-pt2/src/app/mock-heroes.ts" header="src/app/mock-heroes.ts"></code-example>
## Displaying heroes ## Mostrar Héroes
Open the `HeroesComponent` class file and import the mock `HEROES`. Abre el archivo de clase `HeroesComponent` e importe el mock `HEROES`.
<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" header="src/app/heroes/heroes.component.ts (import HEROES)"> <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="import-heroes" header="src/app/heroes/heroes.component.ts (import HEROES)">
</code-example> </code-example>
In the same file (`HeroesComponent` class), define a component property called `heroes` to expose the `HEROES` array for binding. En el mismo archivo (clase `HeroesComponent`), define una propiedad de componente llamada `heroes` para exponer el array HEROES para la vinculación.
<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="component"> <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="component">
</code-example> </code-example>
### List heroes with `*ngFor` ### Enumerar héroes con `*ngFor`
Open the `HeroesComponent` template file and make the following changes: Abre las Plantillas `HeroesComponent` y realiza los siguientes cambios:
* Add an `<h2>` at the top, * Agrega `<h2>` al principio
* Below it add an HTML unordered list (`<ul>`) * Agrega una lista HTML desordenada (`<ul>`) debajo de ella
* Insert an `<li>` within the `<ul>` that displays properties of a `hero`. * Inserta `<li>` dentro del `<ul>` que muestra la propiedad `hero`
* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly). * Espolvoreé algunas clases CSS al estilo (agregaremos estilos CSS en breve)
Make it look like this: Se parece a esto:
<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="list" header="heroes.component.html (heroes template)"></code-example> <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="list" header="heroes.component.html (heroes template)"></code-example>
That shows one hero. To list them all, add an `*ngFor` to the `<li>` to iterate through the list of heroes: Esto muestra un héroe. Para enumerarlos a todos, agrega `*ngFor*` a `<li>` para iterar sobre la lista de héroes.
<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li"> <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="li">
</code-example> </code-example>
The [`*ngFor`](guide/built-in-directives#ngFor) is Angular's _repeater_ directive. [`*ngFor`](guide/built-in-directives#ngFor) es la directiva de _repetición_ de Angular.
It repeats the host element for each element in a list.
The syntax in this example is as follows: Esto repite el elemento host para cada elemento de la lista.
* `<li>` is the host element. La sintaxis para este ejemplo es:
* `heroes` holds the mock heroes list from the `HeroesComponent` class, the mock heroes list.
* `hero` holds the current hero object for each iteration through the list. * `<li>` es un elemento host
* `heroes` es una lista de clases `HeroesComponent` que contiene la lista de héroes simulados
* `hero` contiene el objeto héroe actual en una lista para cada ciclo
<div class="alert is-important"> <div class="alert is-important">
Don't forget the asterisk (*) in front of `ngFor`. It's a critical part of the syntax. No olvides el asterisco (*) antes del `ngFor`. Esta es una parte importante de la sintaxis.
</div> </div>
After the browser refreshes, the list of heroes appears. Actualiza tu navegador para ver la lista de héroes.
{@a styles} {@a styles}
### Style the heroes ### Agregar estilo a los héroes
The heroes list should be attractive and should respond visually when users La lista de héroes debe ser atractiva y visualmente prominente cuando el usuario coloca el cursor y selecciona un héroe de la lista.
hover over and select a hero from the list.
In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`. En el [Primer tutorial](tutorial/toh-pt0#app-wide-styles), configuro el estilo básico de toda la aplicación en `styles.css`.
That stylesheet didn't include styles for this list of heroes.
You could add more styles to `styles.css` and keep growing that stylesheet as you add components. No incluí el estilo de la lista de héroes en esta hoja de estilo.
You may prefer instead to define private styles for a specific component and keep everything a component needs&mdash; the code, the HTML, Puedes agregar más estilos a `styles.css` y seguir expandiendo esa hoja de estilo a medida que agrega componentes
and the CSS &mdash;together in one place.
This approach makes it easier to re-use the component somewhere else Es posible que prefieras definir un estilo privado para un componente en particular y mantener todo lo que el componente necesita &mdash;
and deliver the component's intended appearance even if the global styles are different. código, HTML, CSS&mdash; en un solo lugar.
You define private styles either inline in the `@Component.styles` array or Este enfoque facilita la reutilización del componente en otro lugar y aún así proporciona al componente la apariencia deseada, incluso cuando los estilos aplicados globalmente son diferentes.
as stylesheet file(s) identified in the `@Component.styleUrls` array.
When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent` Los estilos privados se definen en línea dentro de la matriz `@Component.styles` o como un archivo de hoja de estilo identificado en una matriz particular `@Component.styleUrls` como un archivo de hoja de estilo.
and pointed to it in `@Component.styleUrls` like this.
Cuando la CLI crea un `HeroesComponent`, se crea un `heroes.component.css` vacío para el `HeroesComponent`.
`@Component.styleUrls` se señala de esta manera.
<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="metadata" <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="metadata"
header="src/app/heroes/heroes.component.ts (@Component)"> header="src/app/heroes/heroes.component.ts (@Component)">
</code-example> </code-example>
Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`. Abre `heroes.component.css` y pega el estilo privado para `HeroesComponent`.
You'll find them in the [final code review](#final-code-review) at the bottom of this guide. Puedes encontrarlos en la [Revisión del código final](#final-code-review) al final de esta guía.
<div class="alert is-important"> <div class="alert is-important">
Styles and stylesheets identified in `@Component` metadata are scoped to that specific component. `@Component` Los estilos y las hojas de estilo identificados en los metadatos se definen en un componente en particular.
The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component. El estilo `heroes.component.css` solo se aplica a `HeroesComponent` y no afecta a otros HTML o HTML dentro de ningún otro componente.
</div> </div>
## Master/Detail ## Maestro/Detalle
When the user clicks a hero in the **master** list, Cuando haces clic en un héroe en la lista **maestro**, el componente debe mostrar los **detalles** del héroe seleccionado en la parte inferior de la página.
the component should display the selected hero's **details** at the bottom of the page.
In this section, you'll listen for the hero item click event En este capítulo, esperemos a que se haga clic en el elemento del héroe y luego actualiza los detalles del héroe.
and update the hero detail.
### Add a click event binding ### Agregar enlace de evento de clic
Add a click event binding to the `<li>` like this: Agrega el enlace de evento click a su `<li>` así:
<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" header="heroes.component.html (template excerpt)"></code-example> <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" header="heroes.component.html (template excerpt)"></code-example>
This is an example of Angular's [event binding](guide/event-binding) syntax. Este es un ejemplo de la sintaxis de Angular [enlace de eventos](guide/event-binding) .
The parentheses around `click` tell Angular to listen for the `<li>` element's `click` event. Los paréntesis alrededor del `clic` le dicen a Angular que es un evento `clic` para el elemento `<li>`.
When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression. Cuando el usuario hace clic en `<li>`, Angular ejecuta la expresión `onSelect(hero)`.
En la siguiente sección, definiremos el método `onSelect()` en el `HeroesComponent` para mostrar los héroes definidos por las expresiones `*ngFor`.
In the next section, define an `onSelect()` method in `HeroesComponent` to ### Agregar un controlador de eventos de clic
display the hero that was defined in the `*ngFor` expression.
Cambia el nombre de la propiedad `hero` del componente a `selectedHero`, pero no la asignes todavía.
No hay _héroe seleccionado_ cuando se inicia la aplicación.
### Add the click event handler Agrega el método `onSelect()` de la siguiente manera y asigne el héroe en el que se hizo clic desde Plantillas al componente 'seleccionadoHero`.
Rename the component's `hero` property to `selectedHero` but don't assign it.
There is no _selected hero_ when the application starts.
Add the following `onSelect()` method, which assigns the clicked hero from the template
to the component's `selectedHero`.
<code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="on-select" header="src/app/heroes/heroes.component.ts (onSelect)"></code-example> <code-example path="toh-pt2/src/app/heroes/heroes.component.ts" region="on-select" header="src/app/heroes/heroes.component.ts (onSelect)"></code-example>
### Add a details section ### Agregar una sección de detalles
Currently, you have a list in the component template. To click on a hero on the list Actualmente, el componente Plantillas tiene una lista.
and reveal details about that hero, you need a section for the details to render in the Para hacer clic en un héroe en la lista para ver los detalles de ese héroe, necesita una sección de detalles para representarlo en Plantillas.
template. Add the following to `heroes.component.html` beneath the list section: Agrega lo siguiente debajo de la sección de la lista de `heroes.component.html`.
<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)"></code-example> <code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="selectedHero-details" header="heroes.component.html (selected hero details)"></code-example>
After the browser refreshes, the application is broken. Cuando actualizo el navegador, la aplicación está rota.
Open the browser developer tools and look in the console for an error message like this: Abre y busca las herramientas de desarrollador de su navegador y busca un mensaje de error como este en la consola:
<code-example language="sh" class="code-shell"> <code-example language="sh" class="code-shell">
HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined HeroesComponent.html:3 ERROR TypeError: no se puede leer la propiedad 'nombre' de undefined
</code-example> </code-example>
#### What happened? ### ¿Que pasó?
When the app starts, the `selectedHero` is `undefined` _by design_. Cuando inicia la aplicación, `selectedHero` es _intencionalmente_ indefinido`.
Binding expressions in the template that refer to properties of `selectedHero`&mdash;expressions like `{{selectedHero.name}}`&mdash;_must fail_ because there is no selected hero. Los enlaces de expresión en Plantillas que se refieren a las propiedades de `selectedHero` - expresiones como` {{{selectedHero.name}} `deben _fallar_ porque el héroe seleccionado no existe, no.
### Reparemos-use _*ngIf_ para ocultar detalles vacíos
#### The fix - hide empty details with _*ngIf_ El componente solo debe mostrar detalles para el héroe seleccionado si `selectedHero` está presente.
The component should only display the selected hero details if the `selectedHero` exists.
Wrap the hero detail HTML in a `<div>`.
Add Angular's `*ngIf` directive to the `<div>` and set it to `selectedHero`.
Adjunta los detalles del héroe en HTML `<div>`.
Agrega la directiva angular `*ngIf` a su `<div>` y configúrelo en `selectedHero`.
<div class="alert is-important"> <div class="alert is-important">
Don't forget the asterisk (*) in front of `ngIf`. It's a critical part of the syntax. No olvides el asterisco (*) antes del `ngIf`. Esta es una parte importante de la sintaxis.
</div> </div>
<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="ng-if" header="src/app/heroes/heroes.component.html (*ngIf)"></code-example> <code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="ng-if" header="src/app/heroes/heroes.component.html (*ngIf)"></code-example>
After the browser refreshes, the list of names reappears. Actualiza su navegador y verá la lista de nombres nuevamente.
The details area is blank. El área de detalles está en blanco.
Click a hero in the list of heroes and its details appear. Hace clic en un héroe en la lista de héroes para ver más detalles.
The app seems to be working again. La aplicación comenzó a funcionar nuevamente.
The heroes appear in a list and details about the clicked hero appear at the bottom of the page. Los héroes se muestran en la lista, y los detalles del héroe seleccionado se muestran en la parte inferior de la página.
### Por qué esto funciona
#### Why it works Cuando `selectedHero` no está definido, `ngIf` elimina los detalles del héroe del DOM. No hay obligación de preocuparse por `selectedHero`.
When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to consider. Cuando el usuario selecciona un héroe, `selectedHero` tiene un valor y `ngIf` inserta los detalles del héroe en el DOM.
When the user picks a hero, `selectedHero` has a value and ### Dar estilo a el héroe seleccionado
`ngIf` puts the hero detail into the DOM.
### Style the selected hero Si todos los elementos `<li>` se parecen, es difícil identificar al _héroe seleccionado_ en la lista.
It's difficult to identify the _selected hero_ in the list when all `<li>` elements look alike. Si el usuario hace clic en "Magneta", el héroe debe dibujarse con un color de fondo prominente como este:
If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this:
<div class="lightbox"> <div class="lightbox">
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero"> <img src='generated/images/guide/toh/heroes-list-selected.png' alt="Selected hero">
</div> </div>
That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles). El color del _héroe seleccionado_ es el trabajo de la clase CSS `.selected` en [el estilo que acaba de agregar](#styles).
You just have to apply the `.selected` class to the `<li>` when the user clicks it. Simplemente aplica la clase `.selected` a `<li>` cuando el usuario hace clic.
The Angular [class binding](guide/attribute-binding#class-binding) makes it easy to add and remove a CSS class conditionally. El [enlace de clase](guide/attribute-binding#class-binding)de Angular facilita la adición y eliminación de clases CSS condicionales.
Just add `[class.some-css-class]="some-condition"` to the element you want to style. Simplemente agregue `[class.some-css-class] =" some-condition"` al elemento que desea decorar.
Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template: Agrega el enlace `[class.selected]` al `<li>` en `HeroesComponent` Plantillas:
<code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" header="heroes.component.html (toggle the 'selected' CSS class)"></code-example> <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" header="heroes.component.html (toggle the 'selected' CSS class)"></code-example>
When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class. Si el héroe de la fila actual es el mismo que de `selectedHero`, Angular agrega una clase CSS `selected`.Cuando los dos héroes son diferentes, Angular eliminará la clase.
The finished `<li>` looks like this: El `<li>` completado se ve así:
<code-example path="toh-pt2/src/app/heroes/heroes.component.html" region="li" header="heroes.component.html (list item hero)"></code-example> <code-example path = "toh-pt2/src/app/heroes/heroes.component.html" region = "li" header = "heroes.component.html (elemento de lista hero)"> </code-example>
{@a final-code-review} {@a final-code-review}
## Final code review ## Revisión final del código
Here are the code files discussed on this page, including the `HeroesComponent` styles. Aquí está el archivo de código en esta página que incluye el estilo `HeroesComponent`.
<code-tabs> <code-tabs>
<code-pane header="src/app/mock-heroes.ts" path="toh-pt2/src/app/mock-heroes.ts"> <code-pane header="src/app/mock-heroes.ts" path="toh-pt2/src/app/mock-heroes.ts">
</code-pane> </code-pane>
<code-pane header="src/app/heroes/heroes.component.ts" path="toh-pt2/src/app/heroes/heroes.component.ts"> <code-pane header="src/app/heroes/heroes.component.ts" path="toh-pt2/src/app/heroes/heroes.component.ts">
</code-pane> </code-pane>
@ -241,13 +226,12 @@ Here are the code files discussed on this page, including the `HeroesComponent`
<code-pane header="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css"> <code-pane header="src/app/heroes/heroes.component.css" path="toh-pt2/src/app/heroes/heroes.component.css">
</code-pane> </code-pane>
</code-tabs> </code-tabs>
## Summary ## Resumen
* The Tour of Heroes app displays a list of heroes in a Master/Detail view. * La aplicación "Tour de Héroes" muestra una lista de héroes en la pantalla Maestro / Detalle
* The user can select a hero and see that hero's details. * El usuario puede seleccionar un héroe y ver los detalles de ese héroe
* You used `*ngFor` to display a list. * Utilizó `*ngFor` para mostrar la lista
* You used `*ngIf` to conditionally include or exclude a block of HTML. * Utilizó `*ngIf` para incluir o excluir condicionalmente bloques de HTML
* You can toggle a CSS style class with a `class` binding. * La clase de estilo CSS se puede cambiar con el enlace `class`