docs: fix visible code snippets in first-app tutorial (angular#55742)

PR Close angular#55742

Author: bencodezen

adev/src/content/tutorials/first-app/steps/02-HomeComponent/README.md

@@ -70,11 +70,11 @@ In the **Edit** pane of your IDE:
 
 1. In `app.component.ts`, in `@Component`, update the `imports` array property and add `HomeComponent`.
 
-    <docs-code header="Replace in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[7,9]"/>
+    <docs-code header="Replace in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[7]"/>
 
 1. In `app.component.ts`, in `@Component`, update the `template` property to include the following HTML code.
 
-    <docs-code header="Replace in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[10,19]"/>
+    <docs-code header="Replace in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[8,17]"/>
 
 1. Save your changes to  `app.component.ts`.
 1. If `ng serve` is running, the app should update.
@@ -87,6 +87,7 @@ In the **Edit** pane of your IDE:
 </docs-step>
 
 <docs-step title="Add features to `HomeComponent`">
+
 In this step you add features to `HomeComponent`.
 
 In the previous step, you added the default `HomeComponent` to your app's template so its default HTML appeared in the app.
@@ -99,7 +100,7 @@ In the **Edit** pane of your IDE:
 1. In the `first-app` directory, open `home.component.ts` in the editor.
 1. In `home.component.ts`, in `@Component`, update the `template` property with this code.
 
-    <docs-code header="Replace in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.component.ts" visibleLines="[10,17]"/>
+    <docs-code header="Replace in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.component.ts" visibleLines="[8,15]"/>
 
 1. Next, open `home.component.css` in the editor and update the content with these styles.
 

adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md

@@ -51,11 +51,11 @@ In the **Edit** pane of your IDE:
 
 1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocationComponent` to the array.
 
-    <docs-code header="Add HousingLocationComponent to imports array in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[7,10]"/>
+    <docs-code header="Add HousingLocationComponent to imports array in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[7]"/>
 
 1. Now the component is ready for use in the template for the `HomeComponent`. Update the `template` property of the `@Component` metadata to include a reference to the `<app-housing-location>` tag.
 
-    <docs-code header="Add housing location to the component template in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[11,21]"/>
+    <docs-code header="Add housing location to the component template in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[8,18]"/>
 
 </docs-step>
 

adev/src/content/tutorials/first-app/steps/04-interfaces/README.md

@@ -48,7 +48,7 @@ This step adds the properties to the interface that your app needs to represent
 1. In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file.
 1. In `housinglocation.ts`, replace the default content with the following code to make your new interface to match this example.
 
-    <docs-code header="Update src/app/housinglocation.ts to match this code" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts"/>
+    <docs-code header="Update src/app/housinglocation.ts to match this code" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" />
 
 1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step.
 
@@ -70,11 +70,11 @@ There are a few more lessons to complete before that happens.
 
 1. In `src/app/home/home.component.ts`, replace the empty `export class HomeComponent {}` definition with this code to create a single instance of the new interface in the component.
 
-    <docs-code header="Add sample data to src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.component.ts" visibleLines="[27,38]"/>
+    <docs-code header="Add sample data to src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.component.ts" visibleLines="[23,36]"/>
 
 1. Confirm that your `home.component.ts` file matches like this example.
 
-    <docs-code header="src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.component.ts"/>
+    <docs-code header="src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.component.ts" visibleLines="[1,36]" />
 
     By adding the `housingLocation` property of type `HousingLocation` to the `HomeComponent` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.
 

adev/src/content/tutorials/first-app/steps/05-inputs/README.md

@@ -33,7 +33,7 @@ In the code editor:
 <docs-step title="Add the Input property">
 1.  In the same file, add a property called `housingLocation` of type `HousingLocation` to the `HousingLocationComponent` class. Add an `!` after the property name and prefix it with the `@Input()` decorator:
 
-    <docs-code header="Import HousingLocationComponent and Input in src/app/housing-location/housing-location.component.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.component.ts" visibleLines="[16,18]"/>
+    <docs-code header="Import HousingLocationComponent and Input in src/app/housing-location/housing-location.component.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.component.ts" visibleLines="[13,15]"/>
 
     You have to add the `!` because the input is expecting the value to be passed. In this case, there is no default value. In our example application case we know that the value will be passed in - this is by design. The exclamation point is called the non-null assertion operator and it tells the TypeScript compiler that the value of this property won't be null or undefined.
 

adev/src/content/tutorials/first-app/steps/06-property-binding/README.md

@@ -26,7 +26,7 @@ In the code editor:
 
 1. Navigate to `src/app/home/home.component.ts`
 1. In the template property of the `@Component` decorator, update the code to match the code below:
-    <docs-code header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.component.ts" visibleLines="[21]"/>
+    <docs-code header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.component.ts" visibleLines="[17,19]"/>
 
     When adding a property binding to a component tag, we use the `[attribute] = "value"` syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value.
 

adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md

@@ -27,7 +27,7 @@ In the code editor:
 1. Navigate to `src/app/housing-location/housing-location.component.ts`
 1. In the template property of the `@Component` decorator, replace the existing HTML markup with the following code:
 
-    <docs-code header="Update HousingLocationComponent template" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.component.ts" visibleLines="[9,15]"/>
+    <docs-code header="Update HousingLocationComponent template" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.component.ts" visibleLines="[9,20]"/>
 
     In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpolation to give more context to the alt text of the image.
 

adev/src/content/tutorials/first-app/steps/08-ngFor/README.md

@@ -25,7 +25,7 @@ In the `HomeComponent` there is only a single housing location. In this step, yo
 
 1. In `src/app/home/home.component.ts`, remove the `housingLocation` property from the `HomeComponent` class.
 1. Update the `HomeComponent` class to have a property called `housingLocationList`. Update your code to match the following code:
-    <docs-code header="Add housingLocationList property" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.component.ts" visibleLines="31-136"/>
+    <docs-code header="Add housingLocationList property" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.component.ts" visibleLines="26-131"/>
 
     IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step.
 
@@ -35,7 +35,7 @@ In the `HomeComponent` there is only a single housing location. In this step, yo
 Now the app has a dataset that you can use to display the entries in the browser using the `ngFor` directive.
 
 1. Update the `<app-housing-location>` tag in the template code to this:
-    <docs-code header="Add ngFor to HomeComponent template" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.component.ts" visibleLines="[21,24]"/>
+    <docs-code header="Add ngFor to HomeComponent template" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.component.ts" visibleLines="[17,22]"/>
 
     Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `ngFor` directive. Before this change, it referred to the property on the `HomeComponent` class.
 

adev/src/content/tutorials/first-app/steps/09-services/README.md

@@ -87,7 +87,7 @@ In the **Edit** pane of your IDE, in `src/app/home/home.component.ts`:
 
 1. In `HomeComponent`, add the following code to inject the new service and initialize the data for the app. The `constructor` is the first function that runs when this component is created. The code in the `constructor` will assign the `housingLocationList` the value returned from the call to `getAllHousingLocations`.
 
-    <docs-code header="Initialize data from service in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.component.ts" visibleLines="[31,36]"/>
+    <docs-code header="Initialize data from service in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.component.ts" visibleLines="[28,32]"/>
 
 1. Save the changes to `src/app/home/home.component.ts` and confirm your app builds without error.
     Correct any errors before you continue to the next step.

adev/src/content/tutorials/first-app/steps/10-routing/README.md

@@ -49,11 +49,11 @@ In this lesson, you will enable routing in your application to navigate to the d
 
     1. Add `RouterModule` to the `@Component` metadata imports
 
-        <docs-code header="Import RouterModule in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[9,12]"/>
+        <docs-code header="Import RouterModule in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[7]"/>
 
     1. In the `template` property, replace the `<app-home></app-home>` tag with the `<router-outlet>` directive and add a link back to the home page. Your code should match this code:
 
-        <docs-code header="Add router-outlet in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[13,24]"/>
+        <docs-code header="Add router-outlet in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[8,18]"/>
 
 </docs-step>
 

adev/src/content/tutorials/first-app/steps/11-details-page/README.md

@@ -29,7 +29,7 @@ In this case, `:id` is dynamic and will change based on how the route is request
 
 1. In `src/app/housing-location/housing-location.component.ts`, add an anchor tag to the `section` element and include the `routerLink` directive:
 
-    <docs-code header="Add anchor with a routerLink directive to housing-location.component.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.component.ts" visibleLines="[13,20]"/>
+    <docs-code header="Add anchor with a routerLink directive to housing-location.component.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.component.ts" visibleLines="[20]"/>
 
     The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data.
 
@@ -53,7 +53,7 @@ In this step, you will get the route parameter in the `DetailsComponent`. Curren
       template: `<p>details works! {{ housingLocationId }}</p>`,
     </docs-code>
 
-1. Update the body of the `DetailsComponent` with the following code:
+1. Update the body of the `DetailsComponent` class with the following code:
 
     <docs-code language="javascript">
         export class DetailsComponent {
@@ -79,13 +79,13 @@ To access the data you will add a call to the `HousingService`.
 
 1. Update the template code to match the following code:
 
-    <docs-code header="Update the DetailsComponent template in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[11,28]"/>
+    <docs-code header="Update the DetailsComponent template in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[11,32]"/>
 
     Notice that the `housingLocation` properties are being accessed with the optional chaining operator `?`. This ensures that if the `housingLocation` value is null or undefined the application doesn't crash.
 
 1. Update the body of the `DetailsComponent` class to match the following code:
 
-    <docs-code header="Update the DetailsComponent class in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[31,42]"/>
+    <docs-code header="Update the DetailsComponent class in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[35,44]"/>
 
     Now the component has the code to display the correct information based on the selected housing location. The `constructor` now includes a call to the `HousingService` to pass the route parameter as an argument to the `getHousingLocationById` service function.
 
@@ -106,7 +106,7 @@ In a previous lesson you updated the `AppComponent` template to include a `route
 
 1. Confirm that your code matches the following:
 
-    <docs-code header="Add routerLink to AppComponent" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.component.ts" visibleLines="[13,24]"/>
+    <docs-code header="Add routerLink to AppComponent" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.component.ts" visibleLines="[8,20]"/>
 
     Your code may already be up-to-date but confirm to be sure.
 </docs-step>