mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
docs: update tutorials with self-closing tags, standalone router directives, and fix syntax highlighting
(cherry picked from commit 4544135b1e)
This commit is contained in:
SkyZeroZx
Jessica Janiuk
parent
2e7623ca13
commit
1c4fb90857
47 changed files with 228 additions and 224 deletions
|
|
@ -28,15 +28,15 @@ In the **Terminal** pane of your IDE:
|
|||
1. In your project directory, navigate to the `first-app` directory.
|
||||
1. Run this command to install the dependencies needed to run the app.
|
||||
|
||||
<docs-code language="shell">
|
||||
npm install
|
||||
</docs-code>
|
||||
```shell
|
||||
npm install
|
||||
```
|
||||
|
||||
1. Run this command to build and serve the default app.
|
||||
|
||||
<docs-code language="shell">
|
||||
```shell
|
||||
ng serve
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
The app should build without errors.
|
||||
|
||||
|
|
@ -96,7 +96,7 @@ In your IDE:
|
|||
1. Next, open `first-app/src/app/app.ts`.
|
||||
1. In `app.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component.
|
||||
|
||||
<docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/>
|
||||
<docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/>
|
||||
|
||||
1. In `app.ts`, in the `App` class definition, replace the `title` line with this code to change the component title.
|
||||
|
||||
|
|
|
|||
|
|
@ -37,17 +37,17 @@ In the **Terminal** pane of your IDE:
|
|||
1. In your project directory, navigate to the `first-app` directory.
|
||||
1. Run this command to create a new `Home`
|
||||
|
||||
<docs-code language="shell">
|
||||
ng generate component home
|
||||
</docs-code>
|
||||
```shell
|
||||
ng generate component home
|
||||
```
|
||||
|
||||
1. Run this command to build and serve your app.
|
||||
|
||||
NOTE: This step is only for your local environment!
|
||||
|
||||
<docs-code language="shell">
|
||||
```shell
|
||||
ng serve
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
1. Open a browser and navigate to `http://localhost:4200` to find the application.
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ In the **Edit** pane of your IDE:
|
|||
|
||||
1. In `app.ts`, in `@Component`, update the `template` property to include the following HTML code.
|
||||
|
||||
<docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/>
|
||||
<docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/>
|
||||
|
||||
1. Save your changes to `app.ts`.
|
||||
1. If `ng serve` is running, the app should update.
|
||||
|
|
@ -100,7 +100,7 @@ In the **Edit** pane of your IDE:
|
|||
1. In the `first-app` directory, open `home.ts` in the editor.
|
||||
1. In `home.ts`, in `@Component`, update the `template` property with this code.
|
||||
|
||||
<docs-code header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/>
|
||||
<docs-code language="angular-ts" header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/>
|
||||
|
||||
1. Next, open `home.css` in the editor and update the content with these styles.
|
||||
|
||||
|
|
|
|||
|
|
@ -19,15 +19,15 @@ In the **Terminal** pane of your IDE:
|
|||
|
||||
1. Run this command to create a new `HousingLocation`
|
||||
|
||||
<docs-code language="shell">
|
||||
ng generate component housingLocation
|
||||
</docs-code>
|
||||
```shell
|
||||
ng generate component housingLocation
|
||||
```
|
||||
|
||||
1. Run this command to build and serve your app.
|
||||
|
||||
<docs-code language="shell">
|
||||
```shell
|
||||
ng serve
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
NOTE: This step is only for your local environment!
|
||||
|
||||
|
|
@ -51,11 +51,11 @@ In the **Edit** pane of your IDE:
|
|||
|
||||
1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocation` to the array.
|
||||
|
||||
<docs-code header="Add HousingLocation to imports array in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[6]"/>
|
||||
<docs-code header="Add HousingLocation to imports array in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[6]"/>
|
||||
|
||||
1. Now the component is ready for use in the template for the `Home`. 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.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[7,17]"/>
|
||||
<docs-code language="angular-ts" header="Add housing location to the component template in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[7,17]"/>
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,11 +29,11 @@ In the **Terminal** pane of your IDE:
|
|||
1. In your project directory, navigate to the `first-app` directory.
|
||||
1. In the `first-app` directory, run this command to create the new interface.
|
||||
|
||||
<docs-code language="shell">
|
||||
```shell
|
||||
|
||||
ng generate interface housinglocation
|
||||
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
1. Run `ng serve` to build the app and serve it to `http://localhost:4200`.
|
||||
1. In a browser, open `http://localhost:4200` to see your app.
|
||||
|
|
@ -66,15 +66,15 @@ There are a few more lessons to complete before that happens.
|
|||
1. In the **Edit** pane of your IDE, open `src/app/home/home.ts`.
|
||||
1. In `src/app/home/home.ts`, add this import statement after the existing `import` statements so that `Home` can use the new interface.
|
||||
|
||||
<docs-code header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/>
|
||||
<docs-code language="angular-ts" header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/>
|
||||
|
||||
1. In `src/app/home/home.ts`, replace the empty `export class Home {}` 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.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
|
||||
<docs-code language="angular-ts" header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
|
||||
|
||||
1. Confirm that your `home.ts` file matches this example.
|
||||
|
||||
<docs-code header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" />
|
||||
<docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" />
|
||||
|
||||
By adding the `housingLocation` property of type `HousingLocation` to the `Home` 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import {HousingLocation} from '../housing-location/housing-location';
|
|||
</form>
|
||||
</section>
|
||||
<section class="results">
|
||||
<app-housing-location></app-housing-location>
|
||||
<app-housing-location />
|
||||
</section>
|
||||
`,
|
||||
styleUrls: ['./home.css'],
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ You have to invoke the `required` method on `input` to indicate that the parent
|
|||
<docs-step title="Pass data to the input">
|
||||
Send the `housingLocation` value from the `Home` component to the `housingLocation` property of the HousingLocation component.
|
||||
|
||||
<docs-code header="Declare the input property for HousingLocation in home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
|
||||
<docs-code language="angular-ts" header="Declare the input property for HousingLocation in home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {HousingLocationInfo} from '../housinglocation';
|
|||
</form>
|
||||
</section>
|
||||
<section class="results">
|
||||
<app-housing-location></app-housing-location>
|
||||
<app-housing-location />
|
||||
</section>
|
||||
`,
|
||||
styleUrls: ['./home.css'],
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ In the code editor:
|
|||
|
||||
1. Navigate to `src/app/home/home.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.ts" visibleLines="[15,17]"/>
|
||||
<docs-code language="angular-ts" header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts" visibleLines="[15,17]"/>
|
||||
|
||||
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.ts`
|
||||
1. In the template property of the `@Component` decorator, replace the existing HTML markup with the following code:
|
||||
|
||||
<docs-code header="Update HousingLocation template in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/>
|
||||
<docs-code language="angular-ts" header="Update HousingLocation template in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/>
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {HousingLocationInfo} from '../housinglocation';
|
|||
</form>
|
||||
</section>
|
||||
<section class="results">
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
<app-housing-location [housingLocation]="housingLocation" />
|
||||
</section>
|
||||
`,
|
||||
styleUrls: ['./home.css'],
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ In the `Home` there is only a single housing location. In this step, you will ad
|
|||
|
||||
1. In `src/app/home/home.ts`, remove the `housingLocation` property from the `Home` class.
|
||||
1. Update the `Home` class to have a property called `housingLocationList`. Update your code to match the following code:
|
||||
<docs-code header="Add housingLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="26-131"/>
|
||||
<docs-code language="angular-ts" header="Add housingLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="26-131"/>
|
||||
|
||||
IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step.
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ In the `Home` there is only a single housing location. In this step, you will ad
|
|||
Now the app has a dataset that you can use to display the entries in the browser using the `@for` block.
|
||||
|
||||
1. Update the `<app-housing-location>` tag in the template code to this:
|
||||
<docs-code header="Add @for to Home template in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[15,19]"/>
|
||||
<docs-code language="angular-ts" header="Add @for to Home template in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[15,19]"/>
|
||||
|
||||
Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `@for` block. Before this change, it referred to the property on the `Home` class.
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {HousingLocationInfo} from '../housinglocation';
|
|||
</form>
|
||||
</section>
|
||||
<section class="results">
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
<app-housing-location [housingLocation]="housingLocation" />
|
||||
</section>
|
||||
`,
|
||||
styleUrls: ['./home.css'],
|
||||
|
|
|
|||
|
|
@ -77,17 +77,17 @@ In the **Edit** pane of your IDE, in `src/app/home/home.ts`:
|
|||
|
||||
1. At the top of `src/app/home/home.ts`, add the `inject` to the items imported from `@angular/core`. This will import the `inject` function into the `Home` class.
|
||||
|
||||
<docs-code header="Update to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[1]"/>
|
||||
<docs-code language="angular-ts" header="Update to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[1]"/>
|
||||
|
||||
1. Add a new file level import for the `HousingService`:
|
||||
|
||||
<docs-code header="Add import to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[4]"/>
|
||||
<docs-code language="angular-ts" header="Add import to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[4]"/>
|
||||
|
||||
1. From `Home`, delete the `housingLocationList` array entries and assign `housingLocationList` the value of empty array (`[]`). In a few steps you will update the code to pull the data from the `HousingService`.
|
||||
|
||||
1. In `Home`, 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.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[23,30]"/>
|
||||
<docs-code language="angular-ts" header="Initialize data from service in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[23,30]"/>
|
||||
|
||||
1. Save the changes to `src/app/home/home.ts` and confirm your app builds without error.
|
||||
Correct any errors before you continue to the next step.
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import {HousingLocationInfo} from '../housinglocation';
|
|||
</section>
|
||||
<section class="results">
|
||||
@for(housingLocation of housingLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
<app-housing-location [housingLocation]="housingLocation" />
|
||||
}
|
||||
</section>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -43,15 +43,15 @@ In this lesson, you will enable routing in your application to navigate to the d
|
|||
<docs-code header="Add router configuration in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[10,17]"/>
|
||||
|
||||
1. In `src/app/app.ts`, update the component to use routing:
|
||||
1. Add a file level import for `RoutingModule`:
|
||||
1. Add file level imports for the router directives `RouterOutlet` and `RouterLink`:
|
||||
|
||||
<docs-code header="Import RouterModule in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[3]"/>
|
||||
1. Add `RouterModule` to the `@Component` metadata imports
|
||||
<docs-code language="angular-ts" header="Import router directives in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[3]"/>
|
||||
1. Add `RouterOutlet` and `RouterLink` to the `@Component` metadata imports
|
||||
|
||||
<docs-code header="Import RouterModule in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[6]"/>
|
||||
<docs-code language="angular-ts" header="Add router directives to component imports in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[6]"/>
|
||||
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.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[7,18]"/>
|
||||
<docs-code language="angular-ts" header="Add router-outlet in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[7,18]"/>
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {Home} from './home/home';
|
|||
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
|
||||
</header>
|
||||
<section class="content">
|
||||
<app-home></app-home>
|
||||
<app-home />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import {HousingService} from '../housing.service';
|
|||
</section>
|
||||
<section class="results">
|
||||
@for(housingLocation of housingLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
<app-housing-location [housingLocation]="housingLocation" />
|
||||
}
|
||||
</section>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -21,15 +21,15 @@ Route parameters enable you to include dynamic information as a part of your rou
|
|||
<docs-step title="Using `routerLink` for dynamic navigation">
|
||||
In lesson 10, you added a second route to `src/app/routes.ts` which includes a special segment that identifies the route parameter, `id`:
|
||||
|
||||
<docs-code language="javascript">
|
||||
```
|
||||
'details/:id'
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
In this case, `:id` is dynamic and will change based on how the route is requested by the code.
|
||||
|
||||
1. In `src/app/housing-location/housing-location.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.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.ts" visibleLines="[18]"/>
|
||||
<docs-code language="angular-ts" header="Add anchor with a routerLink directive to housing-location.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.ts" visibleLines="[18]"/>
|
||||
|
||||
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.
|
||||
|
||||
|
|
@ -50,13 +50,13 @@ In this step, you will get the route parameter in the `Details`. Currently, the
|
|||
|
||||
1. Update the `template` property of the `@Component` decorator to display the value `housingLocationId`:
|
||||
|
||||
<docs-code language="javascript">
|
||||
template: `<p>details works! {{ housingLocationId }}</p>`,
|
||||
</docs-code>
|
||||
```angular-ts
|
||||
template: `<p>details works! {{ housingLocationId }}</p>`,
|
||||
```
|
||||
|
||||
1. Update the body of the `Details` class with the following code:
|
||||
|
||||
<docs-code language="javascript">
|
||||
```ts
|
||||
export class Details {
|
||||
route: ActivatedRoute = inject(ActivatedRoute);
|
||||
housingLocationId = -1;
|
||||
|
|
@ -64,7 +64,7 @@ In this step, you will get the route parameter in the `Details`. Currently, the
|
|||
this.housingLocationId = Number(this.route.snapshot.params['id']);
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
This code gives the `Details` access to the `ActivatedRoute` router feature that enables you to have access to the data about the current route. In the `constructor`, the code converts the `id` parameter acquired from the route from a string to a number.
|
||||
|
||||
|
|
@ -80,13 +80,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 Details template in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[8,29]"/>
|
||||
<docs-code language="angular-ts" header="Update the Details template in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[8,29]"/>
|
||||
|
||||
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 `Details` class to match the following code:
|
||||
|
||||
<docs-code header="Update the Details class in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[32,41]"/>
|
||||
<docs-code language="angular-ts" header="Update the Details class in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[32,41]"/>
|
||||
|
||||
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.
|
||||
|
||||
|
|
@ -97,7 +97,7 @@ To access the data you will add a call to the `HousingService`.
|
|||
and save your changes
|
||||
|
||||
1. In `Details` use the just created `details.css` file as the source for the styles:
|
||||
<docs-code header="Update details.ts to use the created css file" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[30]"/>
|
||||
<docs-code language="angular-ts" header="Update details.ts to use the created css file" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[30]"/>
|
||||
|
||||
1. In the browser refresh the page and confirm that when you click on the "Learn More" link for a given housing location the details page displays the correct information based on the data for that selected item.
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ In a previous lesson you updated the `App` template to include a `routerLink`. A
|
|||
|
||||
1. Confirm that your code matches the following:
|
||||
|
||||
<docs-code header="Confirm the routerLink in app.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.ts" visibleLines="[8,19]"/>
|
||||
<docs-code language="angular-ts" header="Confirm the routerLink in app.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.ts" visibleLines="[8,19]"/>
|
||||
|
||||
Your code should already be up-to-date but confirm to be sure.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Home} from './home/home';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {RouterLink, RouterOutlet} from '@angular/router';
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [Home, RouterModule],
|
||||
imports: [Home, RouterOutlet, RouterLink],
|
||||
template: `
|
||||
<main>
|
||||
<a [routerLink]="['/']">
|
||||
|
|
@ -12,7 +12,7 @@ import {RouterModule} from '@angular/router';
|
|||
</header>
|
||||
</a>
|
||||
<section class="content">
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {HousingService} from '../housing.service';
|
|||
</section>
|
||||
<section class="results">
|
||||
@for(housingLocation of housingLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
<app-housing-location [housingLocation]="housingLocation" />
|
||||
}
|
||||
</section>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import {Component, input} from '@angular/core';
|
||||
import {HousingLocationInfo} from '../housinglocation';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {RouterLink} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-housing-location',
|
||||
imports: [RouterModule],
|
||||
imports: [RouterLink],
|
||||
template: `
|
||||
<section class="listing">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.ts`:
|
|||
|
||||
1. In the `Details` 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.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[10,45]"/>
|
||||
<docs-code language="angular-ts" header="template directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[10,45]"/>
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {RouterLink, RouterOutlet} from '@angular/router';
|
|||
</header>
|
||||
</a>
|
||||
<section class="content">
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {HousingService} from '../housing.service';
|
|||
</section>
|
||||
<section class="results">
|
||||
@for(housingLocation of housingLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
<app-housing-location [housingLocation]="housingLocation" />
|
||||
}
|
||||
</section>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import {Component, input} from '@angular/core';
|
||||
import {HousingLocationInfo} from '../housinglocation';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {RouterLink} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-housing-location',
|
||||
imports: [RouterModule],
|
||||
imports: [RouterLink],
|
||||
template: `
|
||||
<section class="listing">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -35,12 +35,12 @@ The `Home` already contains an input field that you will use to capture input fr
|
|||
|
||||
1. Update the `Home` template to include a template variable in the `input` element called `#filter`.
|
||||
|
||||
<docs-code header="Add a template variable to the input HTML element in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[12]"/>
|
||||
<docs-code language="angular-ts" header="Add a template variable to the input HTML element in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[12]"/>
|
||||
This example uses a [template reference variable](guide/templates) to get access to the `input` element as its value.
|
||||
|
||||
1. Next, update the component template to attach an event handler to the "Search" button.
|
||||
|
||||
<docs-code header="Bind the button click event to a method in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[13]"/>
|
||||
<docs-code language="angular-ts" header="Bind the button click event to a method in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[13]"/>
|
||||
|
||||
By binding to the `click` event on the `button` element, you are able to call the `filterResults` function. The argument to the function is the `value` property of the `filter` template variable. Specifically, the `.value` property from the `input` HTML element.
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {HousingService} from '../housing.service';
|
|||
</section>
|
||||
<section class="results">
|
||||
@for(housingLocation of housingLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
<app-housing-location [housingLocation]="housingLocation" />
|
||||
}
|
||||
</section>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import {Component, input} from '@angular/core';
|
||||
import {HousingLocationInfo} from '../housinglocation';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {RouterLink} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-housing-location',
|
||||
imports: [RouterModule],
|
||||
imports: [RouterLink],
|
||||
template: `
|
||||
<section class="listing">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -18,127 +18,129 @@ Your app will use data from a JSON server
|
|||
JSON Server is an open source tool used to create mock REST APIs. You'll use it to serve the housing location data that is currently stored in the housing service.
|
||||
|
||||
1. Install `json-server` from npm by using the following command.
|
||||
<docs-code language="bash">
|
||||
npm install -g json-server
|
||||
</docs-code>
|
||||
|
||||
```bash
|
||||
npm install -g json-server
|
||||
```
|
||||
|
||||
1. In the root directory of your project, create a file called `db.json`. This is where you will store the data for the `json-server`.
|
||||
|
||||
1. Open `db.json` and copy the following code into the file
|
||||
<docs-code language="json">
|
||||
|
||||
```json
|
||||
{
|
||||
"locations": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "Acme Fresh Start Housing",
|
||||
"city": "Chicago",
|
||||
"state": "IL",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
|
||||
"availableUnits": 4,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "A113 Transitional Housing",
|
||||
"city": "Santa Monica",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg",
|
||||
"availableUnits": 0,
|
||||
"wifi": false,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Warm Beds Housing Support",
|
||||
"city": "Juneau",
|
||||
"state": "AK",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": false,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Homesteady Housing",
|
||||
"city": "Chicago",
|
||||
"state": "IL",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": true,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Happy Homes Group",
|
||||
"city": "Gary",
|
||||
"state": "IN",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": true,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Hopeful Apartment Group",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg",
|
||||
"availableUnits": 2,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Seriously Safe Towns",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg",
|
||||
"availableUnits": 5,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Hopeful Housing Solutions",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg",
|
||||
"availableUnits": 2,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"name": "Seriously Safe Towns",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg",
|
||||
"availableUnits": 10,
|
||||
"wifi": false,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"name": "Capital Safe Towns",
|
||||
"city": "Portland",
|
||||
"state": "OR",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg",
|
||||
"availableUnits": 6,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
"locations": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "Acme Fresh Start Housing",
|
||||
"city": "Chicago",
|
||||
"state": "IL",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
|
||||
"availableUnits": 4,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "A113 Transitional Housing",
|
||||
"city": "Santa Monica",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg",
|
||||
"availableUnits": 0,
|
||||
"wifi": false,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Warm Beds Housing Support",
|
||||
"city": "Juneau",
|
||||
"state": "AK",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": false,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Homesteady Housing",
|
||||
"city": "Chicago",
|
||||
"state": "IL",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": true,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Happy Homes Group",
|
||||
"city": "Gary",
|
||||
"state": "IN",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg",
|
||||
"availableUnits": 1,
|
||||
"wifi": true,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Hopeful Apartment Group",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg",
|
||||
"availableUnits": 2,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Seriously Safe Towns",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg",
|
||||
"availableUnits": 5,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Hopeful Housing Solutions",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg",
|
||||
"availableUnits": 2,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"name": "Seriously Safe Towns",
|
||||
"city": "Oakland",
|
||||
"state": "CA",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg",
|
||||
"availableUnits": 10,
|
||||
"wifi": false,
|
||||
"laundry": false
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"name": "Capital Safe Towns",
|
||||
"city": "Portland",
|
||||
"state": "OR",
|
||||
"photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg",
|
||||
"availableUnits": 6,
|
||||
"wifi": true,
|
||||
"laundry": true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
1. Save this file.
|
||||
|
||||
1. Time to test your configuration. From the command line, at the root of your project run the following commands.
|
||||
|
||||
<docs-code language="bash">
|
||||
json-server --watch db.json
|
||||
</docs-code>
|
||||
```bash
|
||||
json-server --watch db.json
|
||||
```
|
||||
|
||||
1. In your web browser, navigate to the `http://localhost:3000/locations` and confirm that the response includes the data stored in `db.json`.
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {RouterLink, RouterOutlet} from '@angular/router';
|
|||
</header>
|
||||
</a>
|
||||
<section class="content">
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {HousingService} from '../housing.service';
|
|||
</section>
|
||||
<section class="results">
|
||||
@for(housingLocation of filteredLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
<app-housing-location [housingLocation]="housingLocation" />
|
||||
}
|
||||
</section>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import {Component, input} from '@angular/core';
|
||||
import {HousingLocationInfo} from '../housinglocation';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {RouterLink} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-housing-location',
|
||||
imports: [RouterModule],
|
||||
imports: [RouterLink],
|
||||
template: `
|
||||
<section class="listing">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {RouterLink, RouterOutlet} from '@angular/router';
|
|||
</header>
|
||||
</a>
|
||||
<section class="content">
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {HousingService} from '../housing.service';
|
|||
</section>
|
||||
<section class="results">
|
||||
@for(housingLocation of filteredLocationList; track $index) {
|
||||
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
|
||||
<app-housing-location [housingLocation]="housingLocation" />
|
||||
}
|
||||
</section>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import {Component, input} from '@angular/core';
|
||||
import {HousingLocationInfo} from '../housinglocation';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {RouterLink} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-housing-location',
|
||||
imports: [RouterModule],
|
||||
imports: [RouterLink],
|
||||
template: `
|
||||
<section class="listing">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {RouterOutlet} from '@angular/router';
|
|||
|
|
||||
<a href="/user">User</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet />
|
||||
`,
|
||||
imports: [RouterOutlet],
|
||||
})
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {RouterOutlet} from '@angular/router';
|
|||
|
|
||||
<a href="/user">User</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet />
|
||||
`,
|
||||
imports: [RouterOutlet],
|
||||
})
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="arrow" id="static" #staticArrow>
|
||||
<div class="center"></div>
|
||||
@if(rotateVal() >= 20) {
|
||||
<div class="svg" [style.transform]="getIndicatorRotation()">
|
||||
<div class="svg" [style.transform]="indicatorRotation()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75">
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
[style.stroke-dashoffset]="getIndicatorStyle()"
|
||||
[style.stroke-dashoffset]="indicatorStyle()"
|
||||
class="svg-arrow"
|
||||
stroke="url(#gradient)"
|
||||
d="m64.37,45.4c-3.41,11.62-14.15,20.1-26.87,20.1-15.46,0-28-12.54-28-28s12.54-28,28-28,28,12.54,28,28"
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
</div>
|
||||
<div
|
||||
class="grabbable"
|
||||
[style.transform]="getRotation()"
|
||||
[style.transform]="rotation()"
|
||||
(mousedown)="mouseDown()"
|
||||
(touchstart)="mouseDown()"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
import {A11yModule} from '@angular/cdk/a11y';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {Component, ElementRef, ViewChild, computed, signal} from '@angular/core';
|
||||
import {DecimalPipe} from '@angular/common';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ElementRef,
|
||||
computed,
|
||||
signal,
|
||||
viewChild,
|
||||
} from '@angular/core';
|
||||
import {MatSlideToggleChange, MatSlideToggleModule} from '@angular/material/slide-toggle';
|
||||
import {bootstrapApplication} from '@angular/platform-browser';
|
||||
|
||||
|
|
@ -52,9 +59,10 @@ function getResultQuote(accuracy: number) {
|
|||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [CommonModule, MatSlideToggleModule, A11yModule],
|
||||
imports: [DecimalPipe, MatSlideToggleModule, A11yModule],
|
||||
styleUrl: 'game.css',
|
||||
templateUrl: 'game.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class Playground {
|
||||
protected readonly isGuessModalOpen = signal(false);
|
||||
|
|
@ -75,7 +83,7 @@ export class Playground {
|
|||
quote: "Hi, I'm NG the Angle!",
|
||||
};
|
||||
|
||||
@ViewChild('staticArrow') staticArrow!: ElementRef;
|
||||
staticArrow = viewChild.required<ElementRef<HTMLElement>>('staticArrow');
|
||||
|
||||
protected readonly totalAccuracyPercentage = computed(() => {
|
||||
const {level, totalAccuracy} = this.gameStats();
|
||||
|
|
@ -100,6 +108,12 @@ export class Playground {
|
|||
return this.currentInteractions;
|
||||
});
|
||||
|
||||
protected readonly rotation = computed(() => `rotate(${this.rotateVal()}deg)`);
|
||||
|
||||
protected readonly indicatorStyle = computed(() => 0.487 * this.rotateVal() - 179.5);
|
||||
|
||||
protected readonly indicatorRotation = computed(() => `rotate(${253 + this.rotateVal()}deg)`);
|
||||
|
||||
constructor() {
|
||||
this.resetGame();
|
||||
}
|
||||
|
|
@ -109,18 +123,6 @@ export class Playground {
|
|||
this.rotateVal.set(40);
|
||||
}
|
||||
|
||||
getRotation() {
|
||||
return `rotate(${this.rotateVal()}deg)`;
|
||||
}
|
||||
|
||||
getIndicatorStyle() {
|
||||
return 0.487 * this.rotateVal() - 179.5;
|
||||
}
|
||||
|
||||
getIndicatorRotation() {
|
||||
return `rotate(${253 + this.rotateVal()}deg)`;
|
||||
}
|
||||
|
||||
mouseDown() {
|
||||
this.isDragging = true;
|
||||
}
|
||||
|
|
@ -133,8 +135,8 @@ export class Playground {
|
|||
const vh30 = 0.3 * document.documentElement.clientHeight;
|
||||
if (!this.isDragging) return;
|
||||
|
||||
let pointX = e.pageX - (this.staticArrow.nativeElement.offsetLeft + 2.5);
|
||||
let pointY = e.pageY - (this.staticArrow.nativeElement.offsetTop + vh30);
|
||||
let pointX = e.pageX - (this.staticArrow().nativeElement.offsetLeft + 2.5);
|
||||
let pointY = e.pageY - (this.staticArrow().nativeElement.offsetTop + vh30);
|
||||
|
||||
let calculatedAngle = 0;
|
||||
if (pointX >= 0 && pointY < 0) {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ The template already has placeholders showing "Loading...". Replace them with yo
|
|||
|
||||
1. For notifications, replace `Loading...` with an @if block:
|
||||
|
||||
```html
|
||||
```angular-html
|
||||
@if (notificationsEnabled()) {
|
||||
Enabled
|
||||
} @else {
|
||||
|
|
@ -78,13 +78,13 @@ The template already has placeholders showing "Loading...". Replace them with yo
|
|||
|
||||
2. For the message, replace `Loading...` with:
|
||||
|
||||
```html
|
||||
```angular-html
|
||||
{{ statusMessage() }}
|
||||
```
|
||||
|
||||
3. For working hours, replace `Loading...` with an @if block:
|
||||
|
||||
```html
|
||||
```angular-html
|
||||
@if (isWithinWorkingHours()) {
|
||||
Yes
|
||||
} @else {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ This is the key difference: computed signals are read-only, but linked signals c
|
|||
<docs-step title="Update the template to add manual notification control">
|
||||
Update your template to add a toggle button for notifications:
|
||||
|
||||
```html
|
||||
```angular-html
|
||||
<div class="status-info">
|
||||
<div class="notifications">
|
||||
<strong>Notifications:</strong>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ Part 1. **Add click handlers to the buttons:**
|
|||
|
||||
Part 2. **Replace the placeholder with resource state handling:**
|
||||
|
||||
```html
|
||||
```angular-html
|
||||
@if (isLoading()) {
|
||||
<p>Loading user...</p>
|
||||
} @else if (hasError()) {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ Notice how `input.required()` creates an input that must be provided, while `inp
|
|||
<docs-step title="Connect inputs to the template">
|
||||
Update the template in `product-card` to display the signal input values.
|
||||
|
||||
```html
|
||||
```angular-html
|
||||
<div class="product-card">
|
||||
<h3>{{ name() }}</h3>
|
||||
<p class="price">\${{ price() }}</p>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ Part 1. **Uncomment the checkboxes and add two-way binding:**
|
|||
|
||||
Part 2. **Replace the `???` placeholders with @if blocks:**
|
||||
|
||||
```html
|
||||
```angular-html
|
||||
@if (agreedToTerms()) {
|
||||
Yes
|
||||
} @else {
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ These methods read the current cart state using `cartItems()` and update quantit
|
|||
<docs-step title="Update the main app component">
|
||||
Update the main app component in `app.ts` to use the cart service and display the cart component.
|
||||
|
||||
```ts
|
||||
```angular-ts
|
||||
import {Component, inject} from '@angular/core';
|
||||
import {CartStore} from './cart-store';
|
||||
import {CartDisplay} from './cart-display';
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {CartDisplay} from './cart-display';
|
|||
</header>
|
||||
|
||||
<main>
|
||||
<cart-display />
|
||||
<cart-display></cart-display>
|
||||
</main>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ The host bindings automatically re-evaluate when the signals change - just like
|
|||
<docs-step title="Use the directive in your template">
|
||||
Update the app template to demonstrate the reactive directive:
|
||||
|
||||
```ts
|
||||
```angular-ts
|
||||
template: `
|
||||
<div>
|
||||
<h1>Directive with Signals</h1>
|
||||
|
|
|
|||
Loading…
Reference in a new issue