Skip to content

Commit 26876c5

Browse files
authored
Update 08-templated-components.md (#255)
1 parent 5724335 commit 26876c5

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

docs/08-templated-components.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,16 @@ It looks like:
4040
</PropertyGroup>
4141

4242
<ItemGroup>
43-
<PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.2" />
44-
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.2" />
43+
<PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.3" />
44+
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.3" />
4545
</ItemGroup>
4646

4747
</Project>
4848
```
4949

5050
There are a few things here worth understanding.
5151

52-
Firstly, the package targets `netstandard2.1`. Blazor Server uses `netcoreapp3.1` and Blazor WebAssembly uses `netstandard2.1` - so targeting `netstandard2.0` means that it will work for either scenario.
52+
Firstly, the package targets `netstandard2.0`. Blazor Server uses `netcoreapp3.1` and Blazor WebAssembly uses `netstandard2.1` - so targeting `netstandard2.0` means that it will work for either scenario.
5353

5454
Additional, the `<RazorLangVersion>3.0</RazorLangVersion>` sets the Razor language version. Version 3 is needed to support components and the `.razor` file extension.
5555

@@ -116,7 +116,7 @@ Next, to give this dialog some conditional behavior, let's add a parameter of ty
116116
}
117117
```
118118

119-
Do build and make sure that everything compiles at this stage. Next we'll get down to using this new component.
119+
Build the solution and make sure that everything compiles at this stage. Next we'll get down to using this new component.
120120

121121
## Adding a reference to the templated library
122122

@@ -174,9 +174,9 @@ We'll use this new templated component from `Index.razor`. Open `Index.razor` an
174174
@if (OrderState.ShowingConfigureDialog)
175175
{
176176
<ConfigurePizzaDialog
177-
Pizza="@OrderState.ConfiguringPizza"
178-
OnConfirm="@OrderState.ConfirmConfigurePizzaDialog"
179-
OnCancel="@OrderState.CancelConfigurePizzaDialog" />
177+
Pizza="OrderState.ConfiguringPizza"
178+
OnConfirm="OrderState.ConfirmConfigurePizzaDialog"
179+
OnCancel="OrderState.CancelConfigurePizzaDialog" />
180180
}
181181
```
182182

@@ -213,7 +213,7 @@ We can solve async loading by accepting a delegate of type `Func<Task<List<?>>>`
213213

214214
Making a generic-typed component works similarly to other generic types in C#, in fact `@typeparam` is just a convenient Razor syntax for a generic .NET type.
215215

216-
note: We don't yet have support for type-parameter-constraints. This is something we're looking to add in the future.
216+
> Note: We don't yet have support for type-parameter-constraints. This is something we're looking to add in the future.
217217
218218
Now that we've defined a generic type parameter we can use it in a parameter declaration. Let's add a parameter to accept a delegate we can use to load data, and then load the data in a similar fashion to our other components.
219219

@@ -253,7 +253,7 @@ else
253253
}
254254
```
255255

256-
Now, these are our three states of the dialog, and we'd like accept a content parameter for each one so the caller can plug in the desired content. We do this by defining three `RenderFragment` parameters. Since we have multiple we'll just give them their own descriptive names instead of calling them `ChildContent`. However, the content for showing an item needs to take a parameter. We can do this by using `RenderFragment<T>`.
256+
Now, these are our three states of the dialog, and we'd like to accept a content parameter for each one so the caller can plug in the desired content. We do this by defining three `RenderFragment` parameters. Since we have multiple `RenderFragment` parameters we'll just give each one their own descriptive names instead of calling them `ChildContent`. The content for showing an item needs to take a parameter. We can do this by using `RenderFragment<T>`.
257257

258258
Here's an example of the three parameters to add:
259259

@@ -381,7 +381,7 @@ First, we need to create a delegate that we can pass to the `TemplatedList` that
381381

382382
This matches the signature expected by the `Loader` parameter of `TemplatedList`, it's a `Func<Task<List<?>>>` where the **?** is replaced with `OrderWithStatus` so we are on the right track.
383383

384-
If you use the `TemplatedList` component now like so:
384+
You can use the `TemplatedList` component now like so:
385385

386386
```html
387387
<div class="main">
@@ -489,10 +489,10 @@ To prove that the list is really working correctly we can try the following:
489489

490490
## Summary
491491

492-
So what have we seen in this section?
492+
So what have we seen in this session?
493493

494494
1. It's possible to write components that accept *content* as a parameter - even multiple content parameters
495495
2. Templated components can be used to abstract things, like showing a dialog, or async loading of data
496-
3. Components can be generic types which makes them more reusable
496+
3. Components can be generic types, which makes them more reusable
497497

498498
Next up - [Progressive web app](09-progressive-web-app.md)

0 commit comments

Comments
 (0)