mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
docs: Updates tutorial syntaxis highlight
(cherry picked from commit ccf31349c5)
This commit is contained in:
SkyZeroZx
Alex Rickabaugh
parent
f253f1200d
commit
3c8b3ac07b
21 changed files with 115 additions and 109 deletions
|
|
@ -12,24 +12,24 @@ In this activity, you'll learn how to use deferrable views to defer load a secti
|
|||
<docs-step title="Add a `@defer` block to a section of a template">
|
||||
In your `app.ts`, wrap the `article-comments` component with a `@defer` block to defer load it.
|
||||
|
||||
<docs-code language="angular-html">
|
||||
```angular-html
|
||||
@defer {
|
||||
<article-comments />
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
By default, `@defer` loads the `article-comments` component when the browser is idle.
|
||||
|
||||
In your browser's developer console, you can see that the `article-comments-component` lazy chunk file is loaded separately (The specific file names may change from run to run):
|
||||
|
||||
<docs-code language="markdown">
|
||||
```markdown
|
||||
Initial chunk files | Names | Raw size
|
||||
chunk-NNSQHFIE.js | - | 769.00 kB |
|
||||
chunk-NNSQHFIE.js | - | 769.00 kB |
|
||||
main.js | main | 229.25 kB |
|
||||
|
||||
Lazy chunk files | Names | Raw size
|
||||
chunk-T5UYXUSI.js | article-comments-component | 1.84 kB |
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
</docs-workflow>
|
||||
|
|
|
|||
|
|
@ -39,25 +39,27 @@ In this activity, you'll learn how to use the `@loading`, `@error` and `@placeho
|
|||
<docs-step title="Add `@placeholder` block">
|
||||
In your `app.ts`, add a `@placeholder` block to the `@defer` block.
|
||||
|
||||
<docs-code language="angular-html" highlight="[3,4,5]">
|
||||
```angular-html {highlight:[3,4,5]}
|
||||
@defer {
|
||||
<article-comments />
|
||||
} @placeholder {
|
||||
<p>Placeholder for comments</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Configure the `@placeholder` block">
|
||||
The `@placeholder` block accepts an optional parameter to specify the `minimum` amount of time that this placeholder should be shown. This `minimum` parameter is specified in time increments of milliseconds (ms) or seconds (s). This parameter exists to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
|
||||
|
||||
<docs-code language="angular-html" highlight="[3,4,5]">
|
||||
```angular-html {highlight:[3,4,5]}
|
||||
@defer {
|
||||
<article-comments />
|
||||
} @placeholder (minimum 1s) {
|
||||
<p>Placeholder for comments</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Add `@loading` block">
|
||||
|
|
@ -72,7 +74,7 @@ Both parameters are specified in time increments of milliseconds (ms) or seconds
|
|||
|
||||
Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` as well as an after parameter with the value 500ms to the @loading block.
|
||||
|
||||
<docs-code language="angular-html" highlight="[5,6,7]">
|
||||
```angular-html {highlight:[5,6,7]}
|
||||
@defer {
|
||||
<article-comments />
|
||||
} @placeholder (minimum 1s) {
|
||||
|
|
@ -80,7 +82,7 @@ Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` a
|
|||
} @loading (minimum 1s; after 500ms) {
|
||||
<p>Loading comments...</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
NOTE: this example uses two parameters, separated by the ; character.
|
||||
|
||||
|
|
@ -89,7 +91,7 @@ NOTE: this example uses two parameters, separated by the ; character.
|
|||
<docs-step title="Add `@error` block">
|
||||
Finally, add an `@error` block to the `@defer` block.
|
||||
|
||||
<docs-code language="angular-html" highlight="[7,8,9]">
|
||||
```angular-html {highlight:[7,8,9]}
|
||||
@defer {
|
||||
<article-comments />
|
||||
} @placeholder (minimum 1s) {
|
||||
|
|
@ -99,7 +101,8 @@ Finally, add an `@error` block to the `@defer` block.
|
|||
} @error {
|
||||
<p>Failed to load comments</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
</docs-workflow>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ In this activity, you'll learn how to use triggers to specify the condition to l
|
|||
<docs-step title="Add `on hover` trigger">
|
||||
In your `app.ts`, add an `on hover` trigger to the `@defer` block.
|
||||
|
||||
<docs-code language="angular-html" hightlight="[1]">
|
||||
```angular-html {highlight:[1]}
|
||||
@defer (on hover) {
|
||||
<article-comments />
|
||||
} @placeholder (minimum 1s) {
|
||||
|
|
@ -51,7 +51,7 @@ In your `app.ts`, add an `on hover` trigger to the `@defer` block.
|
|||
} @error {
|
||||
<p>Failed to load comments</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
Now, the page will not render the comments section until you hover its placeholder.
|
||||
</docs-step>
|
||||
|
|
@ -59,7 +59,7 @@ Now, the page will not render the comments section until you hover its placehold
|
|||
<docs-step title="Add a 'Show all comments' button">
|
||||
Next, update the template to include a button with the label "Show all comments". Include a template variable called `#showComments` with the button.
|
||||
|
||||
<docs-code language="angular-html" hightlight="[1]">
|
||||
```angular-html {highlight:[1]}
|
||||
<button type="button" #showComments>Show all comments</button>
|
||||
|
||||
@defer (on hover) {
|
||||
|
|
@ -72,7 +72,7 @@ Next, update the template to include a button with the label "Show all comments"
|
|||
} @error {
|
||||
<p>Failed to load comments</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
NOTE: for more information on [template variables check the documentation](https://angular.dev/guide/templates/reference-variables#).
|
||||
|
||||
|
|
@ -81,7 +81,7 @@ NOTE: for more information on [template variables check the documentation](https
|
|||
<docs-step title="Add `on interaction` trigger">
|
||||
Update the `@defer` block in the template to use the `on interaction` trigger. Provide the `showComments` template variable as the parameter to `interaction`.
|
||||
|
||||
<docs-code language="angular-html" hightlight="[3]">
|
||||
```angular-html {highlight:[3]}
|
||||
<button type="button" #showComments>Show all comments</button>
|
||||
|
||||
@defer (on hover; on interaction(showComments)) {
|
||||
|
|
@ -94,7 +94,7 @@ Update the `@defer` block in the template to use the `on interaction` trigger. P
|
|||
} @error {
|
||||
<p>Failed to load comments</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
With these changes, the page will wait for one of the following conditions before rendering the comments section:
|
||||
|
||||
|
|
|
|||
|
|
@ -32,13 +32,13 @@ The code above is an example of how to use a basic `@defer` block. By default `@
|
|||
|
||||
Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is where you put html that will show before the deferred loading starts. The content in `@placeholder` blocks is eagerly loaded.
|
||||
|
||||
<docs-code language="angular-html" highlight="[3,4,5]">
|
||||
```angular-html {highlight:[3,4,5]}
|
||||
@defer {
|
||||
<comments />
|
||||
} @placeholder {
|
||||
<p>Future comments</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is wh
|
|||
|
||||
Add a `@loading` block to the `@defer` block. The `@loading` block is where you put html that will show _while_ the deferred content is actively being fetched, but hasn't finished yet. The content in `@loading` blocks is eagerly loaded.
|
||||
|
||||
<docs-code language="angular-html" highlight="[5,6,7]">
|
||||
```angular-html {highlight:[5,6,7]}
|
||||
@defer {
|
||||
<comments />
|
||||
} @placeholder {
|
||||
|
|
@ -54,7 +54,7 @@ Add a `@loading` block to the `@defer` block. The `@loading` block is where you
|
|||
} @loading {
|
||||
<p>Loading comments...</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ Add a `@loading` block to the `@defer` block. The `@loading` block is where you
|
|||
|
||||
Both `@placeholder` and `@loading` sections have optional parameters to prevent flickering from occurring when loading happens quickly. `@placeholder` has `minimum` and `@loading` has `minimum` and `after`. Add a `minimum` duration to the `@loading` block so it will be rendered for at least 2 seconds.
|
||||
|
||||
<docs-code language="angular-html" highlight="[5]">
|
||||
```angular-html {highlight:[5]}
|
||||
@defer {
|
||||
<comments />
|
||||
} @placeholder {
|
||||
|
|
@ -70,7 +70,7 @@ Both `@placeholder` and `@loading` sections have optional parameters to prevent
|
|||
} @loading (minimum 2s) {
|
||||
<p>Loading comments...</p>
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -78,11 +78,11 @@ Both `@placeholder` and `@loading` sections have optional parameters to prevent
|
|||
|
||||
Deferrable views have a number of trigger options. Add a viewport trigger so the content will defer load once it enters the viewport.
|
||||
|
||||
<docs-code language="angular-html" highlight="[1]">
|
||||
```angular-html {highlight:[1]}
|
||||
@defer (on viewport) {
|
||||
<comments />
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ Deferrable views have a number of trigger options. Add a viewport trigger so the
|
|||
|
||||
A viewport trigger is best used when you're deferring content that's far enough down the page that it needs to be scrolled to see. So let's add some content to our blog post. You can either write your own, or you can copy the content below and put it inside the `<article>` element.
|
||||
|
||||
<docs-code language="html" highlight="[1]">
|
||||
```html {highlight:[1]}
|
||||
<article>
|
||||
<p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
|
||||
<p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p>
|
||||
|
|
@ -99,7 +99,7 @@ A viewport trigger is best used when you're deferring content that's far enough
|
|||
<p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
|
||||
<p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted.</p>
|
||||
</article>
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
Once you've added this code, now scroll down to see the deferred content load once you scroll it into the viewport.
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ import { NgOptimizedImage } from '@angular/common';
|
|||
|
||||
To enable the `NgOptimizedImage` directive, swap out the `src` attribute for `ngSrc`. This applies for both static image sources (i.e., `src`) and dynamic image sources (i.e., `[src]`).
|
||||
|
||||
<docs-code language="angular-ts" highlight="[[9], [13]]">
|
||||
```angular-ts {highlight:[[9],[13]]}
|
||||
import { NgOptimizedImage } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
|
|
@ -48,7 +48,7 @@ template: ` ...
|
|||
`,
|
||||
imports: [NgOptimizedImage],
|
||||
})
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ In `app.config.ts`, configure the app to Angular Router with the following steps
|
|||
1. Import `routes` from the `./app.routes.ts`.
|
||||
1. Call the `provideRouter` function with `routes` passed in as an argument in the `providers` array.
|
||||
|
||||
<docs-code language="ts" highlight="[2,3,6]">
|
||||
```ts {highlight:[2,3,6]}
|
||||
import {ApplicationConfig} from '@angular/core';
|
||||
import {provideRouter} from '@angular/router';
|
||||
import {routes} from './app.routes';
|
||||
|
|
@ -41,7 +41,7 @@ import {routes} from './app.routes';
|
|||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideRouter(routes)],
|
||||
};
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -51,12 +51,13 @@ Finally, to make sure your app is ready to use the Angular Router, you need to t
|
|||
|
||||
Update the template for `App` by adding `<router-outlet />`
|
||||
|
||||
<docs-code language="angular-ts" highlight="[11]">
|
||||
```angular-ts {highlight:[11]}
|
||||
import {RouterOutlet} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
...
|
||||
template: ` <nav>
|
||||
template: `
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
|
|
||||
<a href="/user">User</a>
|
||||
|
|
@ -66,7 +67,7 @@ template: ` <nav>
|
|||
imports: [RouterOutlet],
|
||||
})
|
||||
export class App {}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,18 +43,18 @@ In addition to defining the routes correctly, Angular Router also enables you to
|
|||
|
||||
In `app.routes.ts`, add the `title` property to the default route (`path: ''`) and the `user` route. Here's an example:
|
||||
|
||||
<docs-code language="ts" highlight="[8]">
|
||||
```ts {highlight:[7]}
|
||||
import {Routes} from '@angular/router';
|
||||
import {Home} from './home/home';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
title: 'App Home Page',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
title: 'App Home Page',
|
||||
component: Home,
|
||||
},
|
||||
];
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ For this form to use Angular features that enable data binding to forms, you'll
|
|||
|
||||
Import the `FormsModule` from `@angular/forms` and add it to the `imports` array of the `User`.
|
||||
|
||||
<docs-code language="ts" highlight="[2, 7]">
|
||||
```ts {highlight:[2,7]}
|
||||
import {Component} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ import {FormsModule} from '@angular/forms';
|
|||
imports: [FormsModule],
|
||||
})
|
||||
export class User {}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -50,12 +50,12 @@ The `FormsModule` has a directive called `ngModel` that binds the value of the i
|
|||
|
||||
Update the input to use the `ngModel` directive, specifically with the following syntax `[(ngModel)]="favoriteFramework"` to bind to the `favoriteFramework` property.
|
||||
|
||||
<docs-code language="html" highlight="[3]">
|
||||
```html {highlight:[3]}
|
||||
<label for="framework">
|
||||
Favorite Framework:
|
||||
<input id="framework" type="text" [(ngModel)]="favoriteFramework" />
|
||||
</label>
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
After you've made changes, try entering a value in the input field. Notice how it updates on the screen (yes, very cool).
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ In this activity, you'll learn how to get the value from your form input.
|
|||
|
||||
To display the input value in a template, you can use the interpolation syntax `{{}}` just like any other class property of the component:
|
||||
|
||||
<docs-code language="angular-ts" highlight="[5]">
|
||||
```angular-ts {highlight:[5]}
|
||||
@Component({
|
||||
selector: 'app-user',
|
||||
template: `
|
||||
|
|
@ -29,7 +29,7 @@ To display the input value in a template, you can use the interpolation syntax `
|
|||
export class User {
|
||||
favoriteFramework = '';
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export class User {
|
|||
|
||||
When you need to reference the input field value in the component class, you can do so by accessing the class property with the `this` syntax.
|
||||
|
||||
<docs-code language="angular-ts" highlight="[15]">
|
||||
```angular-ts {highlight:[15]}
|
||||
...
|
||||
@Component({
|
||||
selector: 'app-user',
|
||||
|
|
@ -51,11 +51,11 @@ export class User {
|
|||
favoriteFramework = '';
|
||||
...
|
||||
|
||||
showFramework() {
|
||||
alert(this.favoriteFramework);
|
||||
showFramework() {
|
||||
alert(this.favoriteFramework);
|
||||
}
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -96,24 +96,25 @@ This method will display values from the form, you can access the values from th
|
|||
|
||||
In the component class, add the `handleSubmit()` method to handle the form submission.
|
||||
|
||||
<docs-code language="ts">
|
||||
```ts
|
||||
handleSubmit() {
|
||||
alert(
|
||||
this.profileForm.value.name + ' | ' + this.profileForm.value.email
|
||||
);
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Add `ngSubmit` to the form">
|
||||
You have access to the form values, now it is time to handle the submission event and use the `handleSubmit` method.
|
||||
Angular has an event handler for this specific purpose called `ngSubmit`. Update the form element to call the `handleSubmit` method when the form is submitted.
|
||||
|
||||
<docs-code language="angular-html" highlight="[3]">
|
||||
```angular-html {highlight:[3]}
|
||||
<form
|
||||
[formGroup]="profileForm"
|
||||
(ngSubmit)="handleSubmit()">
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ In this activity, you'll learn how to validate forms with reactive forms.
|
|||
|
||||
Angular provides a set of validation tools. To use them, first update the component to import `Validators` from `@angular/forms`.
|
||||
|
||||
<docs-code language="ts" highlight="[1]">
|
||||
```ts {highlight:[1]}
|
||||
import {ReactiveFormsModule, Validators} from '@angular/forms';
|
||||
|
||||
@Component({...})
|
||||
export class App {}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@ One way to use a service is to act as a way to interact with data and APIs. To m
|
|||
|
||||
To make a service eligible to be injected by the DI system use the `@Injectable` decorator. For example:
|
||||
|
||||
<docs-code language="ts" highlight="[1, 2, 3]">
|
||||
```ts {highlight:[1,2,3]}
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
class UserService {
|
||||
// methods to retrieve and return data
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
The `@Injectable` decorator notifies the DI system that the `UserService` is available to be requested in a class. `providedIn` sets the scope in which this resource is available. For now, it is good enough to understand that `providedIn: 'root'` means that the `UserService` is available to the entire application.
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@ In this activity, you'll learn how to inject a service and use it in a component
|
|||
|
||||
It is often helpful to initialize class properties with values provided by the DI system. Here's an example:
|
||||
|
||||
<docs-code language="ts" highlight="[3]">
|
||||
```ts {highlight:[3]}
|
||||
@Component({...})
|
||||
class PetCareDashboard {
|
||||
petRosterService = inject(PetRosterService);
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
<docs-workflow>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,18 +10,18 @@ In this activity, you will import a pipe and use it in the template.
|
|||
|
||||
To use a pipe in a template include it in an interpolated expression. Check out this example:
|
||||
|
||||
<docs-code language="angular-ts" highlight="[1,5,6]">
|
||||
```angular-ts {highlight:[1,5,6]}
|
||||
import {UpperCasePipe} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
...
|
||||
template: `{{ loudMessage | uppercase }}`,
|
||||
imports: [UpperCasePipe],
|
||||
...
|
||||
template: `{{ loudMessage | uppercase }}`,
|
||||
imports: [UpperCasePipe],
|
||||
})
|
||||
export class App {
|
||||
loudMessage = 'we think you are doing great!'
|
||||
loudMessage = 'we think you are doing great!'
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
Now, it's your turn to give this a try:
|
||||
|
||||
|
|
@ -39,19 +39,19 @@ import { LowerCasePipe } from '@angular/common';
|
|||
<docs-step title="Add the pipe to the template imports">
|
||||
Next, update `@Component()` decorator `imports` to include a reference to `LowerCasePipe`
|
||||
|
||||
<docs-code language="ts" highlight="[3]">
|
||||
```ts {highlight:[3]}
|
||||
@Component({
|
||||
...
|
||||
imports: [LowerCasePipe]
|
||||
})
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Add the pipe to the template">
|
||||
Finally, in `app.ts` update the template to include the `lowercase` pipe:
|
||||
|
||||
```ts
|
||||
```angular-html
|
||||
template: `{{username | lowercase }}`
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ In this activity, you will work with some pipes and pipe parameters.
|
|||
|
||||
To pass parameters to a pipe, use the `:` syntax followed by the parameter value. Here's an example:
|
||||
|
||||
```ts
|
||||
```angular-html
|
||||
template: `{{ date | date:'medium' }}`;
|
||||
```
|
||||
|
||||
|
|
@ -24,12 +24,12 @@ Time to customize some pipe output:
|
|||
|
||||
In `app.ts`, update the template to include parameter for the `decimal` pipe.
|
||||
|
||||
<docs-code language="ts" highlight="[3]">
|
||||
```angular-html {highlight:[3]}
|
||||
template: `
|
||||
...
|
||||
<li>Number with "decimal" {{ num | number:"3.2-2" }}</li>
|
||||
`
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
NOTE: What's that format? The parameter for the `DecimalPipe` is called `digitsInfo`, this parameter uses the format: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}`
|
||||
|
||||
|
|
@ -39,12 +39,12 @@ NOTE: What's that format? The parameter for the `DecimalPipe` is called `digitsI
|
|||
|
||||
Now, update the template to use the `date` pipe.
|
||||
|
||||
<docs-code language="ts" highlight="[3]">
|
||||
```angular-html {highlight:[3]}
|
||||
template: `
|
||||
...
|
||||
<li>Date with "date" {{ birthday | date: 'medium' }}</li>
|
||||
`
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
For extra fun, try some different parameters for `date`. More information can be found in the [Angular docs](guide/templates/pipes).
|
||||
|
||||
|
|
@ -54,12 +54,12 @@ For extra fun, try some different parameters for `date`. More information can be
|
|||
|
||||
For your last task, update the template to use the `currency` pipe.
|
||||
|
||||
<docs-code language="ts" highlight="[3]">
|
||||
```angular-html {highlight:[3]}
|
||||
template: `
|
||||
...
|
||||
<li>Currency with "currency" {{ cost | currency }}</li>
|
||||
`
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
You can also try different parameters for `currency`. More information can be found in the [Angular docs](guide/templates/pipes).
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and pr
|
|||
|
||||
Now the `ReversePipe` class is a pipe. Update the `transform` function to add the reversing logic:
|
||||
|
||||
<docs-code language="ts" highlight="[3,4,5,6,7,8,9]">
|
||||
```ts {highlight:[3,4,5,6,7,8,9]}
|
||||
export class ReversePipe implements PipeTransform {
|
||||
transform(value: string): string {
|
||||
let reverse = '';
|
||||
|
|
@ -58,23 +58,22 @@ export class ReversePipe implements PipeTransform {
|
|||
}
|
||||
|
||||
return reverse;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Use the `ReversePipe` in the template"></docs-step>
|
||||
With the pipe logic implemented, the final step is to use it in the template. In `app.ts` include the pipe in the template and add it to the component imports:
|
||||
|
||||
<docs-code language="angular-ts" highlight="[3,4]">
|
||||
```angular-ts {highlight:[3,4]}
|
||||
@Component({
|
||||
...
|
||||
template: `Reverse Machine: {{ word | reverse }}`
|
||||
imports: [ReversePipe]
|
||||
})
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-workflow>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ In this example, there are two components `User` and `App`.
|
|||
<docs-step title="Add a reference to `User`">
|
||||
Update the `App` template to include a reference to the `User` which uses the selector `app-user`. Be sure to add `User` to the imports array of `App`, this makes it available for use in the `App` template.
|
||||
|
||||
```ts
|
||||
```angular-html
|
||||
template: `<app-user />`,
|
||||
imports: [User]
|
||||
```
|
||||
|
|
@ -28,7 +28,7 @@ The component now displays the message `Username: youngTech`. You can update the
|
|||
<docs-step title="Add more markup">
|
||||
Because you can use any HTML markup that you want in a template, try updating the template for `App` to also include more HTML elements. This example will add a `<section>` element as the parent of the `<app-user>` element.
|
||||
|
||||
```ts
|
||||
```angular-html
|
||||
template: `<section><app-user /></section>`,
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ Now Angular supports native template syntax for defining the else case with the
|
|||
|
||||
Here's an example:
|
||||
|
||||
```angular-ts
|
||||
```angular-html
|
||||
template: `
|
||||
@if (isServerRunning) { ... }
|
||||
@else { ... }
|
||||
|
|
|
|||
|
|
@ -23,22 +23,24 @@ In this example, the value of the `src` attribute will be bound to the class pro
|
|||
<docs-step title="Add a property called `isEditable`" header="app.ts" language="ts">
|
||||
Update the code in `app.ts` by adding a property to the `App` class called `isEditable` with the initial value set to `true`.
|
||||
|
||||
<docs-code highlight="[2]">
|
||||
```ts {highlight:[2]}
|
||||
export class App {
|
||||
isEditable = true;
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
<docs-step title="Bind to `contentEditable`" header="app.ts" language="ts">
|
||||
Next, bind the `contentEditable` attribute of the `div` to the `isEditable` property by using the <code aria-label="square brackets">[]</code> syntax.
|
||||
|
||||
<docs-code highlight="[3]" language="angular-ts">
|
||||
```angular-ts {highlight:[3]}
|
||||
@Component({
|
||||
...
|
||||
template: `<div [contentEditable]="isEditable"></div>`,
|
||||
})
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
</docs-workflow>
|
||||
|
|
|
|||
|
|
@ -12,30 +12,30 @@ In this activity, you'll learn how to use the `input()` function to send informa
|
|||
|
||||
To create an `input` property, add the `input()` function to initialize a property of a component class:
|
||||
|
||||
<docs-code header="user.ts" language="ts">
|
||||
```ts {header:"user.ts"}
|
||||
class User {
|
||||
occupation = input<string>();
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
When you are ready to pass in a value through an `input`, values can be set in templates using the attribute syntax. Here's an example:
|
||||
|
||||
<docs-code header="app.ts" language="angular-ts" highlight="[3]">
|
||||
```angular-ts {header:"app.ts", highlight:[3]}
|
||||
@Component({
|
||||
...
|
||||
template: `<app-user occupation="Angular Developer"></app-user>`
|
||||
})
|
||||
export class App {}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
The `input` function returns an `InputSignal`. You can read the value by calling the signal.
|
||||
|
||||
<docs-code header="user.ts" language="angular-ts">
|
||||
```angular-ts {header:"user.ts"}
|
||||
@Component({
|
||||
...
|
||||
template: `<p>The user's occupation is {{occupation()}}</p>`
|
||||
})
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
<docs-workflow>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@ In this activity, you'll learn how to use the `output()` function to communicate
|
|||
|
||||
To create the communication path from child to parent components, use the `output` function to initialize a class property.
|
||||
|
||||
<docs-code header="child.ts" language="ts">
|
||||
```ts {header:"child.ts"}
|
||||
@Component({...})
|
||||
class Child {
|
||||
incrementCountEvent = output<number>();
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
Now the component can generate events that can be listened to by the parent component. Trigger events by calling the `emit` method:
|
||||
|
||||
<docs-code header="child.ts" language="ts">
|
||||
```ts {header:"child.ts"}
|
||||
class Child {
|
||||
...
|
||||
|
||||
onClick() {
|
||||
this.count++;
|
||||
this.incrementCountEvent.emit(this.count);
|
||||
onClick() {
|
||||
this.count++;
|
||||
this.incrementCountEvent.emit(this.count);
|
||||
}
|
||||
}
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
The emit function will generate an event with the same type as defined by the `output`.
|
||||
|
||||
|
|
@ -45,11 +45,11 @@ Update `child.ts` by adding an output property called `addItemEvent`, be sure to
|
|||
<docs-step title="Complete `addItem` method">
|
||||
In `child.ts` update the `addItem` method; use the following code as the logic:
|
||||
|
||||
<docs-code header="child.ts" highlight="[2]" language="ts">
|
||||
```ts {header:"child.ts", highlight:[2]}
|
||||
addItem() {
|
||||
this.addItemEvent.emit('🐢');
|
||||
}
|
||||
</docs-code>
|
||||
```
|
||||
|
||||
</docs-step>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue