mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
docs: fix visible code snippets in first-app tutorial (#55742)
PR Close #55742
This commit is contained in:
parent
c0012865eb
commit
c1915f19c6
13 changed files with 33 additions and 32 deletions
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ In the **Edit** pane of your IDE:
|
|||
|
||||
1. In `src/app/housing.service.ts`, inside the `HousingService` class, paste this method at the bottom of the class definition.
|
||||
|
||||
<docs-code header="Submit method in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,122]"/>
|
||||
<docs-code header="Submit method in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,124]"/>
|
||||
|
||||
1. Confirm that the app builds without error.
|
||||
Correct any errors before you continue to the next step.
|
||||
|
|
@ -42,7 +42,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`:
|
|||
|
||||
1. In the `DetailsComponent` decorator metadata, update the `imports` property with the following code:
|
||||
|
||||
<docs-code header="imports directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[10,13]"/>
|
||||
<docs-code header="imports directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[10]"/>
|
||||
|
||||
1. In the `DetailsComponent` class, before the `constructor()` method, add the following code to create the form object.
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`:
|
|||
|
||||
1. In the `DetailsComponent` class, after the `constructor()` method, add the following code to handle the **Apply now** click.
|
||||
|
||||
<docs-code header="template directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[64,69]"/>
|
||||
<docs-code header="template directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[63,69]"/>
|
||||
|
||||
This button does not exist yet - you will add it in the next step. In the above code, the `FormControl`s may return `null`. This code uses the nullish coalescing operator to default to empty string if the value is `null`.
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`:
|
|||
|
||||
1. In the `DetailsComponent` decorator metadata, update the `template` HTML to match the following code to add the form's markup.
|
||||
|
||||
<docs-code header="template directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[15,45]"/>
|
||||
<docs-code header="template directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[11,46]"/>
|
||||
|
||||
The template now includes an event handler `(submit)="submitApplication()"`. Angular uses parentheses syntax around the event name to define events in the template code. The code on the right hand side of the equals sign is the code that should be executed when this event is triggered. You can bind to browser events and custom events.
|
||||
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@ In this step, you'll update the `HomeComponent` class to store data in a new arr
|
|||
|
||||
1. In `src/app/home/home.component.ts`, add new property to the class called `filteredLocationList`.
|
||||
|
||||
<docs-code header="Add the filtered results property" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[30,33]"/>
|
||||
<docs-code header="Add the filtered results property" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[30]"/>
|
||||
|
||||
The `filteredLocationList` hold the values that match the search criteria entered by the user.
|
||||
|
||||
1. The `filteredLocationList` should contain the total set of housing locations values by default when the page loads. Update the `constructor` for the `HomeComponent` to set the value.
|
||||
|
||||
<docs-code header="Set the value of filteredLocationList" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[35,39]"/>
|
||||
<docs-code header="Set the value of filteredLocationList" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[31,34]"/>
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ The template has been updated to bind the `filterResults` function to the `click
|
|||
|
||||
1. Update the `HomeComponent` class to include the implementation of the `filterResults` function.
|
||||
|
||||
<docs-code header="Add the filterResults function implementation" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[41,45]"/>
|
||||
<docs-code header="Add the filterResults function implementation" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[35,44]"/>
|
||||
|
||||
This function uses the `String` `filter` function to compare the value of the `text` parameter against the `housingLocation.city` property. You can update this function to match against any property or multiple properties for a fun exercise.
|
||||
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ The data source has been configured, the next step is to update your web app to
|
|||
|
||||
1. Update the `getAllHousingLocations` function to make a call to the web server you configured.
|
||||
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[12,14]"/>
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[10,13]"/>
|
||||
|
||||
The code now uses asynchronous code to make a **GET** request over HTTP.
|
||||
|
||||
|
|
@ -170,11 +170,11 @@ The data source has been configured, the next step is to update your web app to
|
|||
|
||||
1. Update the `getHousingLocationsById` function to make a call to the web server you configured.
|
||||
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[16,19]"/>
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[15,18]"/>
|
||||
|
||||
1. Once all the updates are complete, your updated service should match the following code.
|
||||
|
||||
<docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts"/>
|
||||
<docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,24]" />
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -183,7 +183,7 @@ The server is now reading data from the HTTP request but the components that rel
|
|||
|
||||
1. In `src/app/home/home.component.ts`, update the `constructor` to use the new asynchronous version of the `getAllHousingLocations` method.
|
||||
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.component.ts" visibleLines="[36,41]"/>
|
||||
<docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.component.ts" visibleLines="[32,37]"/>
|
||||
|
||||
1. In `src/app/details/details.component.ts`, update the `constructor` to use the new asynchronous version of the `getHousingLocationById` method.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue