docs: add recipe with angular elements #1819

santoshyadavdev · 2019-05-04T19:18:43Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/ngrx/platform/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[x] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Closes #1621

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[X] No

Other information

santoshyadavdev · 2019-05-04T19:19:35Z

added example code, docs changes in progress.

projects/ngrx.io/content/examples/store-elelments/.gitignore

santoshyadavdev · 2019-05-05T16:53:08Z

@wesleygrimes this is open for review, build issue will be resolved once #1795 is merged,

wesleygrimes

Here is my first pass review. Some work to do, but a great start.

projects/ngrx.io/content/guide/store/recipes/custom-elements.md

projects/ngrx.io/content/examples/store-elements/e2e/src/app.e2e-spec.ts

santoshyadavdev · 2019-05-05T20:10:15Z

Thanks a lot, @wesleygrimes ,
Will work on the changes. Again a lot of grammar mistake. Will Improve

wesleygrimes · 2019-05-05T20:22:27Z

Great work! Have you tried using Grammarly or Antidote?

…

-Wes

On May 5, 2019, at 4:10 PM, Santosh Yadav ***@***.***> wrote: Thanks a lot, @wesleygrimes , Will work on the changes. Again a lot of grammar mistake. Will Improve — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

santoshyadavdev · 2019-05-07T07:12:20Z

Great work! Have you tried using Grammarly or Antidote?
…
-Wes
On May 5, 2019, at 4:10 PM, Santosh Yadav @.***> wrote: Thanks a lot, @wesleygrimes , Will work on the changes. Again a lot of grammar mistake. Will Improve — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

Thanks have started using it.

wesleygrimes · 2019-05-07T20:07:49Z

@santoshyadav198613 Your latest updates were done using the amend or force push method. When these methods are used, we lose the ability to easily track changes in our PR review process. Next time around, can you just push additional new commits?

santoshyadavdev · 2019-05-08T05:41:41Z

@santoshyadav198613 Your latest updates were done using the amend or force push method. When these methods are used, we lose the ability to easily track changes in our PR review process. Next time around, can you just push additional new commits?

Sure.

wesleygrimes · 2019-05-08T15:08:38Z

@santoshyadav198613 the latest build failed due to incorrect path to example file:

Error processing docs: Error: Missing example file... relativePath: "store-elements/projects/my-counter/src/lib/app/counter.module.ts". - doc "guide/store/recipes/custom-elements" (content) - from file "guide/store/recipes/custom-elements.md"

There is no store-elements/projects/my-counter/src/lib/app/ folder so consider changing to

-<code-example header="src/lib/counter.module.ts" path="store-elements/projects/my-counter/src/lib/app/counter.module.ts">
+<code-example header="src/lib/counter.module.ts" path="store-elements/projects/my-counter/src/lib/counter.module.ts">

santoshyadavdev · 2019-05-08T16:23:39Z

@santoshyadav198613 the latest build failed due to incorrect path to example file:

Error processing docs: Error: Missing example file... relativePath: "store-elements/projects/my-counter/src/lib/app/counter.module.ts". - doc "guide/store/recipes/custom-elements" (content) - from file "guide/store/recipes/custom-elements.md"

There is no store-elements/projects/my-counter/src/lib/app/ folder so consider changing to
-<code-example header="src/lib/counter.module.ts" path="store-elements/projects/my-counter/src/lib/app/counter.module.ts">
+<code-example header="src/lib/counter.module.ts" path="store-elements/projects/my-counter/src/lib/counter.module.ts">

Hi @wesleygrimes,

Don't review as of now, I only pushed these changes as I don't want to keep it locally. Will let you know once done.

ngrxbot · 2019-05-08T17:15:40Z

Preview docs changes for d3720f8 at https://previews.ngrx.io/pr1819-d3720f8/

santoshyadavdev · 2019-05-08T18:43:12Z

Hi @wesleygrimes ,
Open for review now, wanted to ask one thing, I have not added anything about counter increment, decrement and reset component.

Also as the code cannot run directly on stackblitz, I have added a download link.

ngrxbot · 2019-05-08T18:53:35Z

Preview docs changes for e2b11e3 at https://previews.ngrx.io/pr1819-e2b11e3/

wesleygrimes · 2019-05-08T19:47:47Z

Hi @wesleygrimes ,
Open for review now, wanted to ask one thing, I have not added anything about counter increment, decrement and reset component.

Also as the code cannot run directly on stackblitz, I have added a download link.

Thanks @santoshyadav198613, we will review tomorrow.

wesleygrimes

Final round of changes

wesleygrimes

Couple more changes

wesleygrimes

Is this ready for a review @santoshyadav198613?

We just want to be sure because it seems like there are some commits appended to this PR that are already merged (Example app and @ngrx/data).

It also seems that the .spec files crept back in.

projects/ngrx.io/content/guide/store/recipes/custom-elements.md

santoshyadavdev · 2019-05-11T15:15:36Z

HI @wesleygrimes ,

I had to force push as after rebase from master there were extra files which were coming in my commit.

ngrxbot · 2019-05-11T15:21:16Z

Preview docs changes for b3f6083 at https://previews.ngrx.io/pr1819-b3f6083/

santoshyadavdev · 2019-05-12T19:00:01Z

Hi @wesleygrimes ,
You can remove WIP tag now,

wesleygrimes · 2019-05-12T19:01:02Z

Is it ready for review?

…

On May 12, 2019, at 3:00 PM, Santosh Yadav ***@***.***> wrote: Hi @wesleygrimes , You can remove WIP tag now, — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

santoshyadavdev · 2019-05-12T19:02:00Z

Is it ready for review?
…
On May 12, 2019, at 3:00 PM, Santosh Yadav @.***> wrote: Hi @wesleygrimes , You can remove WIP tag now, — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

Yes, it is.

santoshyadavdev · 2019-05-14T19:53:03Z

@santoshyadav198613 just a couple more tweaks. Feedback left on comments.

Done with the changes.

wesleygrimes · 2019-05-15T17:15:10Z

Yes

…

On Wed, May 15, 2019 at 1:13 PM Santosh Yadav ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In projects/ngrx.io/content/guide/store/recipes/custom-elements.md <#1819 (comment)>: > @@ -0,0 +1,88 @@ +# Using Store with Angular Elements +## Creating Angular Elements +The following recipe shows you how to manage the state of a counter, and how to select and display it within an Angular Elements and use the same within an Angular Project and a static page. +## Recipe +You can download <live-example name="store-elements" downloadOnly>Angular Elements Project</live-example>. Ok. let me do that, it should be at the end right. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1819?email_source=notifications&email_token=AACPFVDGQDYREMJPIEK6UTDPVRAEPA5CNFSM4HKZSIR2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOBYXPIWI#discussion_r284361790>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACPFVAMEIRHELW5SM6QPRDPVRAEPANCNFSM4HKZSIRQ> .

-- Thanks, Wes

wesleygrimes · 2019-05-15T17:24:01Z

Not for download, just point them to the Repo for viewing, they can decide to download later from GitHub if needed.

…

On Wed, May 15, 2019 at 1:21 PM Santosh Yadav ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In projects/ngrx.io/content/guide/store/recipes/custom-elements.md <#1819 (comment)>: > @@ -0,0 +1,88 @@ +# Using Store with Angular Elements +## Creating Angular Elements +The following recipe shows you how to manage the state of a counter, and how to select and display it within an Angular Elements and use the same within an Angular Project and a static page. +## Recipe +You can download <live-example name="store-elements" downloadOnly>Angular Elements Project</live-example>. But won't that be an overhead for users as they have to download the entire repo? By download link, we are downloading the same app, and they will get the only code they want. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1819?email_source=notifications&email_token=AACPFVERQAAWFFFYWXUIDEDPVRBARA5CNFSM4HKZSIR2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOBYXQGFI#discussion_r284364675>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACPFVBZX35XD7HNZ55SMRLPVRBARANCNFSM4HKZSIRQ> .

-- Thanks, Wes

santoshyadavdev · 2019-05-15T17:29:01Z

Not for download, just point them to the Repo for viewing, they can decide to download later from GitHub if needed.
…
On Wed, May 15, 2019 at 1:21 PM Santosh Yadav @.> wrote: @.* commented on this pull request. ------------------------------ In projects/ngrx.io/content/guide/store/recipes/custom-elements.md <#1819 (comment)>: > @@ -0,0 +1,88 @@ +# Using Store with Angular Elements +## Creating Angular Elements +The following recipe shows you how to manage the state of a counter, and how to select and display it within an Angular Elements and use the same within an Angular Project and a static page. +## Recipe +You can download Angular Elements Project. But won't that be an overhead for users as they have to download the entire repo? By download link, we are downloading the same app, and they will get the only code they want. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1819?email_source=notifications&email_token=AACPFVERQAAWFFFYWXUIDEDPVRBARA5CNFSM4HKZSIR2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOBYXQGFI#discussion_r284364675>, or mute the thread https://github.com/notifications/unsubscribe-auth/AACPFVBZX35XD7HNZ55SMRLPVRBARANCNFSM4HKZSIRQ .
-- Thanks, Wes

Is below text fine?
You can refer the code from GitHub Repo and download it.

ngrxbot · 2019-05-15T17:34:04Z

Preview docs changes for ba80559 at https://previews.ngrx.io/pr1819-ba80559/

ngrxbot · 2019-05-15T17:49:01Z

Preview docs changes for d5fbaba at https://previews.ngrx.io/pr1819-d5fbaba/

ngrxbot · 2019-05-15T18:23:16Z

Preview docs changes for d5fbaba at https://previews.ngrx.io/pr1819-d5fbaba/

timdeschryver

Mostly formatting requests.
The config files aren't added in the other examples, do you need them for a specific reason?

projects/ngrx.io/content/guide/store/recipes/angular-elements.md

timdeschryver · 2019-05-15T18:48:30Z

projects/ngrx.io/content/guide/store/recipes/angular-elements.md

@@ -0,0 +1,96 @@
+# Using Store with Angular Elements
+## Creating Angular Elements
+The following recipe  illustrates utilizing Angular Elements with a NgRx Store to manage the state of a counter, and select and display that counter state from within separate Angular Elements. This is all accomplished from within a single Angular Project and static HTML page.


Suggested change

The following recipe illustrates utilizing Angular Elements with a NgRx Store to manage the state of a counter, and select and display that counter state from within separate Angular Elements. This is all accomplished from within a single Angular Project and static HTML page.

The following recipe illustrates utilizing Angular Elements with a NgRx Store. This provides the ability to manage the state of a counter, and to select and display that counter state from within separate Angular Elements. This is all accomplished from within a single Angular Project and static HTML page.

projects/ngrx.io/content/guide/store/recipes/angular-elements.md

.../store-elements/projects/my-counter/src/lib/counter-decrement/counter-decrement.component.ts

.../store-elements/projects/my-counter/src/lib/counter-increment/counter-increment.component.ts

...examples/store-elements/projects/my-counter/src/lib/counter-reset/counter-reset.component.ts

projects/ngrx.io/content/examples/store-elements/projects/my-counter/tsconfig.lib.json

projects/ngrx.io/content/examples/store-elements/projects/my-counter/tsconfig.spec.json

santoshyadavdev · 2019-05-16T17:37:08Z

Hi @timdeschryver , changes done.

ngrxbot · 2019-05-16T17:46:50Z

Preview docs changes for efe1ff9 at https://previews.ngrx.io/pr1819-efe1ff9/

timdeschryver · 2019-05-19T14:41:17Z

Sorry but I think not all of is done @santoshyadav198613 ? For example, the empty ngOnInit functions and the line breaks around the code blocks.

santoshyadavdev · 2019-05-19T14:43:32Z

Ohh sorry, will fix it.

ngrxbot · 2019-05-19T18:00:05Z

Preview docs changes for 9f52f81 at https://previews.ngrx.io/pr1819-9f52f81/

santoshyadavdev · 2019-05-20T06:02:01Z

Sorry but I think not all of is done @santoshyadav198613 ? For example, the empty ngOnInit functions and the line breaks around the code blocks.

Done actually, I only did changes related to md file in the last check-in. You can verify now.

projects/ngrx.io/content/guide/store/recipes/angular-elements.md

projects/ngrx.io/content/examples/store-elements/projects/my-counter/tsconfig.lib.json

santoshyadavdev · 2019-05-20T14:04:39Z

Done @wesleygrimes .

ngrxbot · 2019-05-20T14:10:53Z

Preview docs changes for 8e6649f at https://previews.ngrx.io/pr1819-8e6649f/

wesleygrimes · 2019-05-20T15:30:52Z

Done @wesleygrimes .

OK, did you review all of @timdeschryver comments? I marked resolved the ones that appeared to be resolved, but I wasn't sure about the line breaks for code blocks. Are those resolved?

santoshyadavdev · 2019-05-21T12:02:48Z

Done @wesleygrimes .

OK, did you review all of @timdeschryver comments? I marked resolved the ones that appeared to be resolved, but I wasn't sure about the line breaks for code blocks. Are those resolved?

Yes resolved them as well.

santoshyadavdev · 2019-06-03T11:43:41Z

Hi @wesleygrimes @timdeschryver let me know if anything needed here.

wesleygrimes · 2019-06-03T14:26:26Z

Hi @wesleygrimes @timdeschryver let me know if anything needed here.

We will get back to you and let you know. Thanks.

timdeschryver

Should we update the example with the creator functions?

timdeschryver

Do we need the empty projects/ngrx.io/content/examples/store-elements/example-config.json file?

timdeschryver · 2019-06-13T19:32:34Z

...tore-elements/projects/my-counter/src/lib/counter-decrement/counter-decrement.component.html

@@ -0,0 +1,2 @@
+


Remove empty line

Suggested change

timdeschryver · 2019-06-13T19:33:07Z

projects/ngrx.io/content/examples/store-elements/projects/counterelement/src/app/app.module.ts

+})
+export class AppModule {
+
+  ngDoBootstrap() {


But there is no logic in this function?

Edit: GitHub seems to not like this, I'm asking this question because of this conversation before:

I asked if this this needed, where you replied:

Yes to bootstrap it manually so our angular elements can work.

timdeschryver · 2019-06-13T19:34:48Z

projects/ngrx.io/content/guide/store/recipes/angular-elements.md

+
+```json
+"scripts": [
+{"input": "node_modules/document-register-element/build/document-register-element.js"}


Suggested change

{"input": "node_modules/document-register-element/build/document-register-element.js"}

{ "input": "node_modules/document-register-element/build/document-register-element.js "}

HI @timdeschryver ,
Yes ngBootStrap is needed to build element. if we remove the elements will not work.

santoshyadavdev · 2019-06-23T09:05:51Z

Should we update the example with the creator functions?
Yes let me do that.

ngrxbot · 2019-06-23T09:41:18Z

Preview docs changes for a7a565c at https://previews.ngrx.io/pr1819-a7a565c/

ngrxbot · 2019-06-23T09:58:18Z

Preview docs changes for 38bfefb at https://previews.ngrx.io/pr1819-38bfefb/

santoshyadavdev · 2019-06-23T10:28:18Z

Hi @timblakely , @wesleygrimes due to some issue with commit this got closed opened a new one https://github.com/ngrx/platform/pull/1967/files

timdeschryver requested changes May 5, 2019

View reviewed changes

projects/ngrx.io/content/examples/store-elelments/.gitignore Outdated Show resolved Hide resolved

wesleygrimes suggested changes May 5, 2019

View reviewed changes

brandonroberts assigned wesleygrimes May 8, 2019

wesleygrimes added WIP Not ready for review Comp: Docs labels May 8, 2019

wesleygrimes suggested changes May 10, 2019

View reviewed changes

wesleygrimes requested review from wesleygrimes and timdeschryver May 10, 2019 14:57

wesleygrimes approved these changes May 10, 2019

View reviewed changes

wesleygrimes self-requested a review May 10, 2019 14:59

wesleygrimes suggested changes May 10, 2019

View reviewed changes

wesleygrimes reviewed May 10, 2019

View reviewed changes

projects/ngrx.io/content/guide/store/recipes/custom-elements.md Outdated Show resolved Hide resolved

projects/ngrx.io/content/guide/store/recipes/custom-elements.md Outdated Show resolved Hide resolved

brandonroberts added the Needs Cleanup Review changes needed label May 15, 2019

timdeschryver requested changes May 15, 2019

View reviewed changes

wesleygrimes suggested changes May 20, 2019

View reviewed changes

brandonroberts mentioned this pull request Jun 3, 2019

Getting Started - Step 6 is overloaded #1880

Closed

timdeschryver reviewed Jun 13, 2019

View reviewed changes

timdeschryver requested changes Jun 13, 2019

View reviewed changes

santoshyadavdev closed this Jun 23, 2019

	The following recipe illustrates utilizing Angular Elements with a NgRx Store to manage the state of a counter, and select and display that counter state from within separate Angular Elements. This is all accomplished from within a single Angular Project and static HTML page.
	The following recipe illustrates utilizing Angular Elements with a NgRx Store. This provides the ability to manage the state of a counter, and to select and display that counter state from within separate Angular Elements. This is all accomplished from within a single Angular Project and static HTML page.

	{"input": "node_modules/document-register-element/build/document-register-element.js"}
	{ "input": "node_modules/document-register-element/build/document-register-element.js "}

docs: add recipe with angular elements #1819

docs: add recipe with angular elements #1819

Conversation

santoshyadavdev commented May 4, 2019 • edited by wesleygrimes Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

santoshyadavdev commented May 4, 2019

santoshyadavdev commented May 5, 2019 • edited Loading

wesleygrimes left a comment

Choose a reason for hiding this comment

santoshyadavdev commented May 5, 2019

wesleygrimes commented May 5, 2019 via email

santoshyadavdev commented May 7, 2019

wesleygrimes commented May 7, 2019

santoshyadavdev commented May 8, 2019

wesleygrimes commented May 8, 2019

santoshyadavdev commented May 8, 2019

ngrxbot commented May 8, 2019

santoshyadavdev commented May 8, 2019

ngrxbot commented May 8, 2019

wesleygrimes commented May 8, 2019

wesleygrimes left a comment

Choose a reason for hiding this comment

wesleygrimes left a comment

Choose a reason for hiding this comment

wesleygrimes left a comment

Choose a reason for hiding this comment

santoshyadavdev commented May 11, 2019

ngrxbot commented May 11, 2019

santoshyadavdev commented May 12, 2019

wesleygrimes commented May 12, 2019 via email

santoshyadavdev commented May 12, 2019

santoshyadavdev commented May 14, 2019

wesleygrimes commented May 15, 2019 via email

wesleygrimes commented May 15, 2019 via email

santoshyadavdev commented May 15, 2019 • edited Loading

ngrxbot commented May 15, 2019

ngrxbot commented May 15, 2019

ngrxbot commented May 15, 2019

timdeschryver left a comment

Choose a reason for hiding this comment

timdeschryver May 15, 2019

Choose a reason for hiding this comment

santoshyadavdev commented May 16, 2019

ngrxbot commented May 16, 2019

timdeschryver commented May 19, 2019

santoshyadavdev commented May 19, 2019

ngrxbot commented May 19, 2019

santoshyadavdev commented May 20, 2019

santoshyadavdev commented May 20, 2019

ngrxbot commented May 20, 2019

wesleygrimes commented May 20, 2019

santoshyadavdev commented May 21, 2019

santoshyadavdev commented Jun 3, 2019

wesleygrimes commented Jun 3, 2019

timdeschryver left a comment

Choose a reason for hiding this comment

timdeschryver left a comment

Choose a reason for hiding this comment

timdeschryver Jun 13, 2019

Choose a reason for hiding this comment

timdeschryver Jun 13, 2019 • edited Loading

Choose a reason for hiding this comment

timdeschryver Jun 13, 2019

Choose a reason for hiding this comment

santoshyadavdev Jun 23, 2019

Choose a reason for hiding this comment

santoshyadavdev commented Jun 23, 2019

ngrxbot commented Jun 23, 2019

ngrxbot commented Jun 23, 2019

santoshyadavdev commented Jun 23, 2019

santoshyadavdev commented May 4, 2019 •

edited by wesleygrimes

Loading

santoshyadavdev commented May 5, 2019 •

edited

Loading

santoshyadavdev commented May 15, 2019 •

edited

Loading

timdeschryver Jun 13, 2019 •

edited

Loading