mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-10 12:57:46 +00:00
Mostly finalized context section of the article
This commit is contained in:
@@ -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?
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user