LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-10 04:22:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add dynamic host first three samples

Browse Source
This commit is contained in:
Corbin Crutchley
2023-12-27 16:41:50 -07:00
parent 2958ceff57
commit 48205997d4
25 changed files with 39125 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
content/blog/angular-dynamic-host-usage/index.md
View File

@@ -34,9 +34,11 @@ class DoNothingDirective {}
<p doNothing>I am currently unchanged.</p>
`,
})
export class App {}
class AppComponent {}
```
<iframe data-frame-title="Do Nothing Directive - StackBlitz" src="uu-code:./do-nothing-directive?template=node&embed=1&file=src%2Fmain.ts"></iframe>
Think of them as components without templates. They can use lifecycle methods:
```typescript
@@ -59,11 +61,13 @@ class AlertOnDestroyDirective implements OnDestroy {
<button (click)="render = !render">Toggle</button>
`,
})
export class App {
class AppComponent {
render = true;
}
```
<iframe data-frame-title="Alert On Destroy - StackBlitz" src="uu-code:./alert-on-destroy?template=node&embed=1&file=src%2Fmain.ts"></iframe>
Store state:
```typescript
@@ -89,7 +93,7 @@ class ListenForEventDirective implements OnInit {
<button (click)="sendEvent()">Send event</button>
`,
})
export class App {
class AppComponent {
sendEvent() {
const event = new CustomEvent('hello');
document.dispatchEvent(event);
@@ -97,6 +101,8 @@ export class App {
}
```
<iframe data-frame-title="Listen for Events - StackBlitz" src="uu-code:./listen-for-events?template=node&embed=1&file=src%2Fmain.ts"></iframe>
Use the `inject` function:
```typescript
@@ -169,7 +175,7 @@ class RedDirective {
<p red>This is red</p>
`,
})
export class App {}
class AppComponent {}
```
# `host` property binding
@@ -194,7 +200,7 @@ class RedDirective {}
<p red>This is red</p>
`,
})
export class App {}
class AppComponent {}
```
Here, `host` refers to the element the directive is attached to. We can use it to then attach new attributes to the parent element like we did above.
@@ -224,7 +230,7 @@ class RedDirective {
<p red>This is red when I am selected</p>
`,
})
export class App {}
class AppComponent {}
````
# Using `host` property with Components
@@ -255,7 +261,7 @@ class RedDirective {
<red-div>This is red when I am selected</red-div>
`,
})
export class App {}
class AppComponent {}
```
This will output to something akin to the following Angular template: