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

feat: add local code using a uu-code: prefix

Browse Source
This commit is contained in:
Corbin Crutchley
2023-11-12 01:13:15 -07:00
parent 3ba9ec66ed
commit 5677c768d5
5 changed files with 322 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
content/blog/angular-components-control-value-accessor/index.md
View File

@@ -70,7 +70,7 @@ export class ExampleInputComponent {
With only a bit of CSS, we have a visually appealing, A11Y friendly, and quirky input component. Look, it even wiggles the unicorns!
<iframe src="https://stackblitz.com/github/unicorn-utterances/unicorn-utterances/tree/local-code/content/blog/angular-components-control-value-accessor/angular-unicorns-text-input?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe data-frame-title="Angular Unicorns Text Input - StackBlitz" src="uu-code:./angular-unicorns-text-input?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
Now, this component is far from feature complete. There's no way to `disable` the input, there's no way to extract data out from the typed input, there's not a lot of functionality you'd typically expect to see from an input component. Let's change that.
@@ -303,7 +303,7 @@ Finally, you can pass these options to `ngModel` and `formControl` (or even `for
If done properly, you should see something like this:
<iframe src="https://stackblitz.com/github/unicorn-utterances/unicorn-utterances/tree/local-code/content/blog/angular-components-control-value-accessor/angular-value-accessor-example?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe data-frame-title="Angular Value Accessor Example - StackBlitz" src="uu-code:./angular-value-accessor-example?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
# Form Control Classes
@@ -407,7 +407,7 @@ export class AppComponent {
}
```
<iframe src="https://stackblitz.com/github/unicorn-utterances/unicorn-utterances/tree/local-code/content/blog/angular-components-control-value-accessor/angular-value-accessor-dep-inject?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<iframe data-frame-title="Angular Value Accessor Dep Inject - StackBlitz" src="uu-code:./angular-value-accessor-dep-inject?embed=1&file=src/app/app.component.ts" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
Not only do you have [a wide range of Angular-built validators at your disposal](https://angular.io/api/forms/Validators), but you're even able to [make your own validator](https://angular.io/api/forms/Validator)!