Mostly finalized context section of the article

This commit is contained in:
Corbin Crutchley
2019-05-21 13:18:17 -07:00
parent 99be38edb3
commit d7dea98571

View File

@@ -60,42 +60,48 @@ That said, they don't rely on the order of parameters (they rather rely on the n
So, now that we know what they are in broad terms, what do they look like? So, now that we know what they are in broad terms, what do they look like?
### Passing Context To Rendering ### Passing Context To Rendering
You can pass values to templates by using a template context
While we used the `ngTemplateOutlet` directive before to render a template, we can also pass an input to the directive `ngTemplateOutletContext` in order to pass a context. A context is just an object with a standard key/value pairing.
```html ```html
<ng-template [ngTemplateOutlet]="templateName" <ng-template [ngTemplateOutlet]="templateName"
[ngTemplateOutletContext]="{$implicit: 'value', otherVar: 'otherVal'}"> [ngTemplateOutletContext]="{$implicit: 'Hello World', personName: 'Corbin'}">
</ng-template> </ng-template>
``` ```
And then consuming it like so: From there, you can use `let` declarations to create template variables in that template based on the values passed by the context like so:
```html ```html
<ng-template let-implicitVal let-boundVar="otherVal"> <ng-template #templateName let-implicitTemplVal let-boundPersonTemplVar="personName">
<p #str1>{{implicitVal}}</p> <p>{{implicitTemplVal}} {{boundPersonTemplVar}}</p>
<p #str1>{{boundVar}}</p>
</ng-template> </ng-template>
``` ```
Where `let-nameHere` is the name of the `$implicit`ly passed values for `nameHere` template variable, and `let-item="text"` gets the value of `text` that's passed and is assigned to the template variable `item` Here, you can see that `let-templateVariableName="contextKeyName"` is the syntax to bind any named context key's value to the template variable with the name you provided after `let`. There is an edge-case you've probable noticed though, the `$implicit` key of the context is treated as a default of sorts, allowing a user to simply leave `let-templateVariableName` to be the value of the `$implicit` key of the context value.
#### Notes
As a qiuck note, I only named these template variables differently from the context value key in order to make it clear that you may do so. `let-personName="personName"` is not only valid, but can be clearer to other developers of it's intentions in the code.
It's also important to note that a template variable is bound to the element and it's children. Attempting to accessing the template variable from a sibling, parent, or cousin's template code is not valid. To recap:
```html
<!-- ✅ This is perfectly fine -->
<ng-template #templateOne let-varName><p>{{varName}}</p></ng-template>
<!-- ❌ This will throw errors, as the template variable is not set in siblings -->
<ng-template #templateTwo let-thisVar></ng-template>
<p>{{thisVar}}</p>
```
### Structural Directives - What Sorcery is this? ### Structural Directives - What Sorcery is this?