GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing github.com — feat(core): add ability to set inputs on ComponentRef by pkozlowski-opensource · Pull Request #46641 · angular/angular

Conversation

pkozlowski-opensource commented Jun 30, 2022 •

edited

Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link

Copy Markdown

Member

This change adds the setInput method to the ComponentRef with the following benefits:

it takes input aliasing into account
it marks OnPush components as dirty
it triggers NgOnChanges lifecycle hook

Closes #12313
Closes #22567

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Totati, PascalBDev, mlc-mlapis, sg-gdarnell, sheikalthaf, eneajaho, AwesomeObserver, HyperLife1119, tonivj5, devoto13, and 13 more reacted with hooray emoji

All reactions

🎉 23 reactions

mlc-mlapis commented Jun 30, 2022

Copy link

Copy Markdown

Contributor

@pkozlowski-opensource Great news, thank you.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

pkozlowski-opensource force-pushed the fixit_set_input branch from 948c4ad to 7019681 Compare

June 30, 2022 13:29

pkozlowski-opensource added action: review

The PR is still awaiting reviews from at least one requested reviewer

area: core Issues related to the framework runtime labels

Jun 30, 2022

ngbot Bot added this to the Backlog milestone

Jun 30, 2022

pkozlowski-opensource modified the milestones: Backlog, Fixit H1'2022

Jun 30, 2022

pkozlowski-opensource added the target: minor This PR is targeted for the next minor release label

Jun 30, 2022

pkozlowski-opensource marked this pull request as ready for review

June 30, 2022 13:53

pullapprove Bot requested review from AndrewKushnir, alxhub and jessicajaniuk

June 30, 2022 13:53

atscott reviewed

Jun 30, 2022

View reviewed changes

atscott left a comment

Copy link

Copy Markdown

Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is exciting! I think it would be worth mentioning some more about why in the commit message, not just the what. For example, how this affects testing for components with inputs, how this makes working with dynamic component creation easier (not having to manually call ngOnChanges in code, for example), and the potential for unlocking other features such as binding route params to component inputs.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

pkozlowski-opensource, mlc-mlapis, trungvose, and hlovdal reacted with thumbs up emoji

pkozlowski-opensource reacted with heart emoji

All reactions

👍 4 reactions
❤️ 1 reaction

Comment thread

packages/core/src/linker/component_factory.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

pkozlowski-opensource force-pushed the fixit_set_input branch from 7019681 to 47c4358 Compare

June 30, 2022 16:28

alxhub approved these changes

Jun 30, 2022

View reviewed changes

pullapprove Bot requested a review from alxhub

June 30, 2022 17:47

atscott approved these changes

Jun 30, 2022

View reviewed changes

atscott left a comment

Copy link

Copy Markdown

Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewed-for: public-api, fw-core

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

AndrewKushnir reviewed

Jun 30, 2022

View reviewed changes

AndrewKushnir left a comment

Copy link

Copy Markdown

Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, just a few minor comments 👍

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

Comment thread

packages/core/src/render3/component_ref.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

Comment thread

packages/core/test/render3/component_ref_spec.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

Comment thread

packages/core/src/render3/component_ref.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

pullapprove Bot requested review from AndrewKushnir

June 30, 2022 18:13

jessicajaniuk approved these changes

Jun 30, 2022

View reviewed changes

jessicajaniuk left a comment

Copy link

Copy Markdown

Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewed-for: fw-core, public-api

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

jessicajaniuk removed the request for review from alxhub

June 30, 2022 22:16

pkozlowski-opensource force-pushed the fixit_set_input branch 3 times, most recently from 39ef803 to 7363c73 Compare

July 1, 2022 10:24

AndrewKushnir approved these changes

Jul 1, 2022

View reviewed changes

AndrewKushnir left a comment

Copy link

Copy Markdown

Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pkozlowski-opensource thanks for addressing the feedback. The changes look great 👍

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

Comment thread

packages/core/src/render3/component.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

Comment thread

packages/core/src/linker/component_factory.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

Comment thread

packages/core/src/render3/component_ref.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

pkozlowski-opensource force-pushed the fixit_set_input branch from 7363c73 to f02ca24 Compare

July 1, 2022 18:39

pkozlowski-opensource added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels

Jul 1, 2022

AndrewKushnir approved these changes

Jul 1, 2022

View reviewed changes


          feat(core): add ability to set inputs on ComponentRef

982f88a

This change adds the setInput method to the ComponentRef.

Previously users had to call `componentRef.instance['inputName']`
to change inputs of a dynamically created component. This had
several problems:

*  OnPush components were not marked for check and thus very
difficult to test;
* input aliasing was not take into account - a property name
on a component could have been different from the actual input
name so setting input properties was fragile;
* manually setting input propertie would NOT trigger the
`NgOnChanges` lifecycle hook.

This modifications unifies `@Input` accross dynamically created
components and the ones referenced in templates. This also opens
doors to other changes: as an example router could use this new
method to set `@Input`s from router params.

Closes angular#12313
Closes angular#22567

pkozlowski-opensource force-pushed the fixit_set_input branch from f02ca24 to 982f88a Compare

July 1, 2022 18:57

pullapprove Bot requested review from AndrewKushnir and jessicajaniuk

July 1, 2022 18:57

AndrewKushnir approved these changes

Jul 1, 2022

View reviewed changes

pullapprove Bot requested a review from AndrewKushnir

July 1, 2022 18:58

AndrewKushnir approved these changes

Jul 1, 2022

View reviewed changes

AndrewKushnir left a comment

Copy link

Copy Markdown

Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed-for: size-tracking

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

AndrewKushnir removed the request for review from jessicajaniuk

July 1, 2022 18:59

atscott commented Jul 1, 2022

Copy link

Copy Markdown

Contributor

This PR was merged into the repository by commit 96c6139.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

atscott closed this in

96c6139

Jul 1, 2022

demike mentioned this pull request

Jul 4, 2022

Alternative way for depreciation of ComponentFactory in order to get componentFactory inputs #44926

Closed

This was referenced Jul 4, 2022

ComponentRef Change detector doesn't trigger detecting for view #36667

Closed

Dynamic component detectChanges trigger ngDoCheck but not refresh view #39524

Closed

There is no way to access inputs or outputs of Components created by NgComponentOutlet #15360

Open

tiberiuzuld mentioned this pull request

Jul 21, 2022

Angular 14.1.0 issue with implementing ComponentRef Indigosoft/ngxd#48

Closed

crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request

Jul 24, 2022


          Update angular monorepo to v14.1.0 (#1472)

724e437

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@angular/animations](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fanimations/14.0.6/14.1.0) |
| [@angular/common](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcommon/14.0.6/14.1.0) |
| [@angular/compiler](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/14.0.6/14.1.0) |
| [@angular/compiler-cli](https://github.com/angular/angular) | devDependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/14.0.6/14.1.0) |
| [@angular/core](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcore/14.0.6/14.1.0) |
| [@angular/forms](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fforms/14.0.6/14.1.0) |
| [@angular/platform-browser](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/14.0.6/14.1.0) |
| [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/14.0.6/14.1.0) |

---

### Release Notes

<details>
<summary>angular/angular</summary>

### [`v14.1.0`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#&#8203;1410-2022-07-20)

[Compare Source](angular/angular@14.0.7...14.1.0)

#### Deprecations

##### core

-   The `createNgModuleRef` is deprecated in favor of newly added `createNgModule` one.
-   The bit field signature of `inject()` has been deprecated, in favor of the
    new options object. Correspondingly, `InjectFlags` is deprecated as well.

##### animations

| Commit | Type | Description |
| -- | -- | -- |
| [55308f2df5](angular/angular@55308f2) | feat | add `provideAnimations()` and `provideNoopAnimations()` functions ([#&#8203;46793](angular/angular#46793)) |

##### common

| Commit | Type | Description |
| -- | -- | -- |
| [4a2e7335b1](angular/angular@4a2e733) | feat | make the `CommonModule` pipes standalone ([#&#8203;46401](angular/angular#46401)) |
| [a7597dd080](angular/angular@a7597dd) | feat | make the CommonModule directives standalone ([#&#8203;46469](angular/angular#46469)) |

##### compiler

| Commit | Type | Description |
| -- | -- | -- |
| [33ce3883a5](angular/angular@33ce388) | feat | Add extended diagnostic to warn when missing let on ngForOf ([#&#8203;46683](angular/angular#46683)) |
| [6f11a58040](angular/angular@6f11a58) | feat | Add extended diagnostic to warn when text attributes are intended to be bindings ([#&#8203;46161](angular/angular#46161)) |
| [9e836c232f](angular/angular@9e836c2) | feat | warn when style suffixes are used with attribute bindings ([#&#8203;46651](angular/angular#46651)) |

##### compiler-cli

| Commit | Type | Description |
| -- | -- | -- |
| [93c65e7b14](angular/angular@93c65e7) | feat | add extended diagnostic for non-nullable optional chains ([#&#8203;46686](angular/angular#46686)) |
| [131d029da1](angular/angular@131d029) | feat | detect missing control flow directive imports in standalone components ([#&#8203;46146](angular/angular#46146)) |
| [6b8e60c06a](angular/angular@6b8e60c) | fix | improve the missingControlFlowDirective message ([#&#8203;46846](angular/angular#46846)) |

##### core

| Commit | Type | Description |
| -- | -- | -- |
| [e8e8e5f171](angular/angular@e8e8e5f) | feat | add `createComponent` function |
| [b5153814af](angular/angular@b515381) | feat | add `reflectComponentType` function |
| [96c6139c9a](angular/angular@96c6139) | feat | add ability to set inputs on ComponentRef ([#&#8203;46641](angular/angular#46641)) |
| [a6d5fe202c](angular/angular@a6d5fe2) | feat | alias `createNgModuleRef` as `createNgModule` ([#&#8203;46789](angular/angular#46789)) |
| [71e606d3c3](angular/angular@71e606d) | feat | expose EnvironmentInjector on ApplicationRef ([#&#8203;46665](angular/angular#46665)) |
| [19e6d9ccd3](angular/angular@19e6d9c) | feat | import AsyncStackTaggingZone if available ([#&#8203;46693](angular/angular#46693)) |
| [a7a14df5f8](angular/angular@a7a14df) | feat | introduce `EnvironmentInjector.runInContext` API ([#&#8203;46653](angular/angular#46653)) |
| [fa52b6e906](angular/angular@fa52b6e) | feat | options object to supersede bit flags for `inject()` ([#&#8203;46649](angular/angular#46649)) |
| [af20112222](angular/angular@af20112) | feat | support the descendants option for ContentChild queries ([#&#8203;46638](angular/angular#46638)) |
| [945a3ad359](angular/angular@945a3ad) | fix | Fix `runInContext` for `NgModuleRef` injector ([#&#8203;46877](angular/angular#46877)) |
| [bb7c80477b](angular/angular@bb7c804) | fix | make parent injector argument required in `createEnvironmentInjector` ([#&#8203;46397](angular/angular#46397)) |

##### http

| Commit | Type | Description |
| -- | -- | -- |
| [82acbf919b](angular/angular@82acbf9) | feat | improve error message for nullish header ([#&#8203;46059](angular/angular#46059)) |

##### router

| Commit | Type | Description |
| -- | -- | -- |
| [53ca936366](angular/angular@53ca936) | feat | Add ability to create `UrlTree` from any `ActivatedRouteSnapshot` ([#&#8203;45877](angular/angular#45877)) |
| [de058bba99](angular/angular@de058bb) | feat | Add CanMatch guard to control whether a Route should match ([#&#8203;46021](angular/angular#46021)) |
| [6c1357dd7d](angular/angular@6c1357d) | feat | Add stable cancelation code to `NavigationCancel` event ([#&#8203;46675](angular/angular#46675)) |
| [a4ce273e50](angular/angular@a4ce273) | feat | Add the target `RouterStateSnapshot` to `NavigationError` ([#&#8203;46731](angular/angular#46731)) |
| [abe3759e24](angular/angular@abe3759) | fix | allow to return `UrlTree` from `CanMatchFn` ([#&#8203;46455](angular/angular#46455)) |
| [e8c7dd10e9](angular/angular@e8c7dd1) | fix | Ensure `APP_INITIALIZER` of `enabledBlocking` option completes ([#&#8203;46026](angular/angular#46026)) |
| [ce20ed067f](angular/angular@ce20ed0) | fix | Ensure Route injector is created before running CanMatch guards ([#&#8203;46394](angular/angular#46394)) |
| [6a7b818d94](angular/angular@6a7b818) | fix | Ensure target `RouterStateSnapshot` is defined in `NavigationError` ([#&#8203;46842](angular/angular#46842)) |
| [f94c6f433d](angular/angular@f94c6f4) | fix | Expose CanMatchFn as public API ([#&#8203;46394](angular/angular#46394)) |
| [e8ae0fe3e9](angular/angular@e8ae0fe) | fix | Fix cancellation code for canLoad rejections ([#&#8203;46752](angular/angular#46752)) |

##### upgrade

| Commit | Type | Description |
| -- | -- | -- |
| [e9cb0454dc](angular/angular@e9cb045) | feat | more closely align `UpgradeModule#bootstrap()` with `angular.bootstrap()` ([#&#8203;46214](angular/angular#46214)) |

#### Special Thanks

AleksanderBodurri, Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Cédric Exbrayat, Dmitrij Kuba, Dylan Hunn, George Kalpakas, Jessica Janiuk, JiaLiPassion, Joey Perrott, John Vandenberg, JoostK, Keith Li, Or'el Ben-Ya'ir, Paul Gschwendtner, Pawel Kozlowski, SyedAhm3r, arturovt, mariu, markostanimirovic and mgechev

<!-- CHANGELOG SPLIT MARKER -->

### [`v14.0.7`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#&#8203;1407-2022-07-20)

[Compare Source](angular/angular@14.0.6...14.0.7)

##### animations

| Commit | Type | Description |
| -- | -- | -- |
| [5bdbb6285b](angular/angular@5bdbb62) | fix | make sure falsy values are added to \_globalTimelineStyles ([#&#8203;46863](angular/angular#46863)) |

##### compiler

| Commit | Type | Description |
| -- | -- | -- |
| [41253f9c46](angular/angular@41253f9) | fix | inputs/outputs incorrectly parsed in jit mode ([#&#8203;46813](angular/angular#46813)) |

##### core

| Commit | Type | Description |
| -- | -- | -- |
| [4e77c7fbf3](angular/angular@4e77c7f) | fix | do not invoke jasmine `done` callback multiple times with `waitForAsync` |

#### Special Thanks

Andrew Kushnir, Andrew Scott, Bob Watson, Cédric Exbrayat, Doug Parker, George Kalpakas, Jessica Janiuk, Kristiyan Kostadinov, Paul Gschwendtner, acvi, dario-piotrowicz, jnizet and piyush132000

<!-- CHANGELOG SPLIT MARKER -->

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox.

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzMi4xMTkuMiIsInVwZGF0ZWRJblZlciI6IjMyLjExOS4yIn0=-->

Co-authored-by: cabr2-bot <[email protected]>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1472
Reviewed-by: Epsilon_02 <[email protected]>
Co-authored-by: Calciumdibromid Bot <[email protected]>
Co-committed-by: Calciumdibromid Bot <[email protected]>

angular-automatic-lock-bot Bot commented Aug 1, 2022

Copy link

Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

angular-automatic-lock-bot Bot locked and limited conversation to collaborators

Aug 1, 2022

Reviewers

atscott

atscott approved these changes

alxhub

alxhub approved these changes

AndrewKushnir

AndrewKushnir approved these changes

+1 more reviewer

jessicajaniuk

jessicajaniuk approved these changes

Reviewers whose approvals may not affect merge requirements

Uh oh!

There was an error while loading. Please reload this page.

Assignees

No one assigned

Labels

action: merge

The PR is ready for merge by the caretaker

area: core

Issues related to the framework runtime

target: minor

This PR is targeted for the next minor release

Projects

None yet

Milestone

Fixit H1'2022

Development

Successfully merging this pull request may close these issues.

Feature: add method to change inputs in ComponentRef TestBed: rethink interactions with the @Input / @output of the root component

Uh oh!

There was an error while loading. Please reload this page.

6 participants

Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

Conversation

pkozlowski-opensource commented Jun 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mlc-mlapis commented Jun 30, 2022

Uh oh!

atscott left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

atscott left a comment

Choose a reason for hiding this comment

Uh oh!

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jessicajaniuk left a comment

Choose a reason for hiding this comment

Uh oh!

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AndrewKushnir left a comment

Choose a reason for hiding this comment

Uh oh!

atscott commented Jul 1, 2022

Uh oh!

angular-automatic-lock-bot Bot commented Aug 1, 2022

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

pkozlowski-opensource commented Jun 30, 2022 •

edited

Loading

Uh oh!

There was an error while loading. Please reload this page.