question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`firstChange` not set properly in `ngOnChanges` for pre-bound properties

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package @angular/elements

Is this a regression?

No.

Description

When a property is set on an element prior to it being attached to the DOM, the initial call to ngOnChanges does not have firstChange properties set to true.

This requires code from #36114, to fix #30848 in order for ngOnChanges to fire at all – this is a follow-on issue.

🔬 Minimal Reproduction

https://github.com/antch/angular-elements-lifecycle-hooks You can look at console logs to see lifecycle events for both the Native Angular element, and the Custom Element. The reproduction uses artifacts from a CI build associated with #36114.

There is a secondary issue here, that is – event listeners on component outputs won’t fire during ngOnInit, ngOnChanges, ngAfterViewInit, and ngAfterContentInit. This is in contrast to the native element which does fire the callback during these hooks. You can see this by examining the ul and li elements in each section.

🌍 Your Environment

Angular Version: Warning: This is a build off of CI assets, so this isn’t entirely accurate.


Angular CLI: 9.0.6
Node: 10.14.2
OS: darwin x64

Angular: 9.1.0-next.4
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.6
@angular-devkit/build-angular     0.900.6
@angular-devkit/build-optimizer   0.900.6
@angular-devkit/build-webpack     0.900.6
@angular-devkit/core              9.0.6
@angular-devkit/schematics        9.0.6
@angular/cli                      9.0.6
@ngtools/webpack                  9.0.6
@schematics/angular               9.0.6
@schematics/update                0.900.6
rxjs                              6.5.4
typescript                        3.6.5
webpack                           4.41.2

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
antchcommented, Mar 19, 2020

I created #36141 to cover the output events issue. And thank you again, you have no idea how much I appreciate your work on these issues.

1reaction
gkalpakcommented, Mar 19, 2020

Thx for reporting this issue(s 😁), @antch 👍

I have a fix for firstChange in #36140. Please create a separate issue for output events not firing, since that is a different issue and needs to be tracked separately.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular ngOnChanges can not read property first time
After debugging, this issue occurs only when page refresh. First time data would be undefined and second time data is loading. What am...
Read more >
ngOnChanges best practice - always use SimpleChanges
ngOnChanges (): "A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to ...
Read more >
Manually Triggering ngOnChanges() Inside An NgModel ...
Ben Nadel looks at how to trigger the ngOnChanges() life-cycle event method manually from within an ngModel value accessor bridge in Angular ...
Read more >
Detecting @​Input changes in Angular with ngOnChanges ...
A SimpleChange object has the firstChange , isFirstChange() , previousValue and currentValue properties and methods.
Read more >
ngOnChanges Example | Angular - StackChief
ngOnChanges () takes a changes argument of type SimpleChanges. changeFromChild() won't call ngOnChanges(). changeFromParent() will call ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found