docs(aio): ensure blank lines before HTML blocks in markdown
This commit is contained in:
Peter Bacon Darwin
committed by
Pete Bacon Darwin
Pete Bacon Darwin
parent
8ef621ad2a
commit
2d14c3b17a
@ -15,19 +15,25 @@ Before you continue with this page of the Tour of Heroes,
|
||||
verify that you have the following structure after [The Hero Editor](tutorial/toh-pt1) page.
|
||||
If your structure doesn't match, go back to that page to figure out what you missed.
|
||||
|
||||
|
||||
<aio-filetree>
|
||||
|
||||
|
||||
<aio-folder>
|
||||
angular-tour-of-heroes
|
||||
|
||||
<aio-folder>
|
||||
src
|
||||
|
||||
<aio-folder>
|
||||
app
|
||||
|
||||
<aio-file>
|
||||
app.component.ts
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
app.module.ts
|
||||
</aio-file>
|
||||
@ -36,26 +42,31 @@ If your structure doesn't match, go back to that page to figure out what you mis
|
||||
</aio-folder>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
main.ts
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
index.html
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
styles.css
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
systemjs.config.js
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
tsconfig.json
|
||||
</aio-file>
|
||||
@ -64,11 +75,13 @@ If your structure doesn't match, go back to that page to figure out what you mis
|
||||
</aio-folder>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
node_modules ...
|
||||
</aio-file>
|
||||
|
||||
|
||||
|
||||
<aio-file>
|
||||
package.json
|
||||
</aio-file>
|
||||
@ -82,6 +95,7 @@ If your structure doesn't match, go back to that page to figure out what you mis
|
||||
## Keep the app transpiling and running
|
||||
Enter the following command in the terminal window:
|
||||
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
npm start
|
||||
|
||||
@ -99,6 +113,7 @@ To display a list of heroes, you'll add heroes to the view's template.
|
||||
Create an array of ten heroes.
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts" region="hero-array">
|
||||
|
||||
</code-example>
|
||||
@ -112,6 +127,7 @@ Create a public property in `AppComponent` that exposes the heroes for binding.
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="hero-array-1">
|
||||
|
||||
</code-example>
|
||||
@ -133,6 +149,7 @@ insert the following chunk of HTML below the title and above the hero details.
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="heroes-template-1" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -147,6 +164,7 @@ and display them individually.
|
||||
Modify the `<li>` tag by adding the built-in directive `*ngFor`.
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="heroes-ngfor-1">
|
||||
|
||||
</code-example>
|
||||
@ -180,6 +198,7 @@ that uses the `hero` template variable to display the hero's properties.
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="ng-for" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -193,6 +212,7 @@ To add styles to your component, set the `styles` property on the `@Component` d
|
||||
to the following CSS classes:
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts" region="styles" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -208,6 +228,7 @@ The template for displaying heroes should look like this:
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="heroes-styled" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -228,6 +249,7 @@ Add a click event binding to the `<li>` like this:
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="selectedHero-click" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -253,6 +275,7 @@ But the user will be able to select one of the heroes by clicking on it.
|
||||
So replace the `hero` property with this simple `selectedHero` property:
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts" region="selected-hero">
|
||||
|
||||
</code-example>
|
||||
@ -262,6 +285,7 @@ you won't initialize the `selectedHero` as you did with `hero`.
|
||||
|
||||
Add an `onSelect` method that sets the `selectedHero` property to the `hero` that the user clicks.
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts" region="on-select" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -271,6 +295,7 @@ Bind to the new selectedHero property instead as follows:
|
||||
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="selectedHero-details" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -281,6 +306,7 @@ When the app loads, the `selectedHero` is undefined and won't be defined until y
|
||||
Angular can't display properties of the undefined `selectedHero` and throws the following error,
|
||||
visible in the browser's console:
|
||||
|
||||
|
||||
<code-example format="nocode">
|
||||
EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
|
||||
|
||||
@ -293,6 +319,7 @@ Wrap the HTML hero detail content of the template with a `<div>`.
|
||||
Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="ng-if" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -334,12 +361,14 @@ To make the selected hero more visible, you'll apply this `selected` class to th
|
||||
For example, when the user clicks "Magneta", it should render with a distinctive but subtle background color
|
||||
like this:
|
||||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/devguide/toh/heroes-list-selected.png' alt="Selected hero"> </img>
|
||||
</figure>
|
||||
|
||||
In the template, add the following `[class.selected]` binding to the `<li>`:
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="class-selected-1" linenums="false">
|
||||
|
||||
</code-example>
|
||||
@ -358,12 +387,14 @@ Read more about the `[class]` binding in the [Template Syntax](guide/template-sy
|
||||
|
||||
The final version of the `<li>` looks like this:
|
||||
|
||||
|
||||
<code-example path="toh-2/app/app.component.1.html" region="class-selected-2" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
After clicking "Magneta", the list should look like this:
|
||||
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='assets/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app"> </img>
|
||||
</figure>
|
||||
@ -371,6 +402,7 @@ After clicking "Magneta", the list should look like this:
|
||||
Here's the complete `app.component.ts` as of now:
|
||||
|
||||
|
||||
|
||||
<code-example path="toh-2/src/app/app.component.ts">
|
||||
|
||||
</code-example>
|
||||
|
||||
Reference in New Issue
Block a user