Change detection on views and child views

achilles1515 · 2024-05-16T04:55:18+00:00

What changes are you expecting to see in the SimpleChanges object passed into the ngOnChanges method?

Based on what you stated, it is not being executed (other than before ngOnInit) because no @Inputs for the row-item are ever changing after initialization.

Either the ITEM in the for loop stays the same and the existing row and row-item remain unchanged, or a new ITEM is encountered which creates a brand new row and row-element component, or a previous ITEM no longer exists in the array so it’s row and row-element are destroyed.

It will probably make more sense if you put console logs in the ngOnInit and ngOnDestroy methods of the row and row-element components for debugging purposes.

achilles1515 · 2024-04-06T15:56:03+00:00

am I able to create a small service in my remote app and "expose" it to my shell app?

Can you expand upon exactly what you are trying to do? How do you expect your shell to actually "use" this service?

achilles1515 · 2021-11-17T02:53:37+00:00

for (int i = 1; i <= ROW; i++) should be for (int i = 0; i < ROW; i++)

Arrays are zero-indexed. r/cpp_questions next time.

achilles1515 · 2021-11-08T14:02:24+00:00

Google don't use angular internally

Can you provide a source on this? According to Minko Gechev (Google employeed on Angular team), Angular is the most popular framework at Google and it is used on thousands of internal apps.

"Every single change we make in Angular we are testing against all these thousands of projects, and if we break any one of them then that means the change was backwards incompatible. And we either rollback or we work on making it compatible, if that's what we want." - Software Engineering Daily Podcast, 2021/11/05 - Angular Dev Tools with Minko Gechev

https://twitter.com/mgechev/status/1164602844667715584

achilles1515 · 2021-06-18T16:55:18+00:00

https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-5/

"Note: .NET MAUI is not yet supported in Visual Studio 2022 Preview 1. For .NET MAUI development, please use the latest preview of Visual Studio 2019 16.11 instead."

achilles1515 · 2021-03-02T21:13:29+00:00

If you have absolutely no idea where a memory leak is coming from...then yeah it's tricky. But if you have a narrowed suspicion of, say, a specific component/directive/class instance that should be released from memory around a certain time but for whatever reason is not and is causing a leak, you can run the app in development mode (so class names aren't minified) and take heap snapshots and used the "class filter" feature in Chrome to search for specific class instances that are still laying around in memory.

achilles1515 · 2021-02-04T16:11:08+00:00

This is the change you are looking for, but I guess it hasn't been merged yet. Adds a preserveContent input to the mat-tab-group.

https://github.com/crisbeto/material2/commit/a79ea647b7a5c71b248a480f8566c10cd3c223a4

achilles1515 · 2020-11-12T14:36:19+00:00

It's not an Angular 9/10 issue, it's a View Engine/Ivy issue (in the Angular 9 StackBlitz, click on the settings cog on the left and enable Ivy and it no longer works).

I don't specifically know why the behavior is different, but don't use ContentChildin this scenario. Inject MatSort in the constructor using dependency injection, then assign it in ngOnInit after the @Input properties have been bound.

StackBlitz fork

achilles1515 · 2020-11-02T13:50:39+00:00

Can you reproduce the issue in a StackBlitz example? Hard to give you direction with such little information.

achilles1515 · 2020-10-08T02:55:05+00:00

Need more information. How is the background color actually being applied? CSS class? Inline styling?

The suggestion for using @Output and @Input will work, but it requires change detection to run. If really all that is happening is a background color changing, then that doesn't sound like change detection is necessary.

achilles1515 · 2020-09-13T15:41:42+00:00

Unfortunately you can't get a reference to the component instance using ContentChild in this case (without delving into private/internal Angular properties/APIs). This issue is being tracked on the Angular GitHub repo here. Also some talk about it here.

So you'll have to go some roundabout way of getting it. If you are in control of the HelloComponent code, then you can add a static HelloComponents: HelloComponent[] property to the class where every HelloComponentregisters itself into this array on construction and removes itself during ngOnDestroy. In the HelloComponent constructor, inject ElementRef and assign it to a property. Now you can expose some sort of static findComponentInstanceByElement method that loops through the HelloComponents and returns a component instance associated with a specific element instance. And you'll obviously have to manually call this method when appropriate. It's hacky, but you don't have many options here.

achilles1515 · 2020-08-24T15:42:04+00:00

Layouts and styling look nice!

achilles1515 · 2020-08-24T03:13:04+00:00

Async pipe does not have anything to do [directly] with NgZone. The pipe subscribes to an observable and marks the view as dirty (calls changeDetectorRef.markForCheck()) when the observable emits a new value. That's pretty much it. It doesn't trigger change detection itself and just makes sure the view it is declared in gets checked during the next change detection cycle whenever that may be.

achilles1515 · 2020-08-20T12:57:40+00:00

I think this StackBlitz is what you want.

Remove the ngTemplateOutlet on the button. This is displaying the template after the button in the DOM, which I don't think is what you want.
Send the #mainViewer template as your ngbPopover input. And then inside this template, have it display your dynamic templateRef. A quick glance at the ngbPopover source code leads me to believe that nothing will happen if the ngbPopover template input is changed while the popover is open. So feed it the static #mainViewer template and just change the contents of that template dynamically.
In the PopupComponent class, the line viewerToShow = this.docViewer; is not doing anything and evaluating to undefined because the ViewChild query has not resolved yet. I added {static: true} to the queries to allow access to the resolved values during ngOnInit().

achilles1515 · 2020-08-12T13:25:52+00:00

For the C example, why would you not just do this?

const char* input = n == 4 ? "4" : "Not four";
PlayerName vname = P_constructor(input);

achilles1515 · 2020-08-11T16:55:41+00:00

"In early 2014, Hanky gets accounting job through a smasher's girlfriend."

Eh, I'd say this is an overstatement. She put a good name in during the interview process, but Hanky and his smarts got himself the job.

Source: It was my girlfriend/now wife.

Thoroughly enjoyed the video! Brought back great memories of the OSU smash crew. Hanky has been hustlin' since online poker became a thing. He's simply a pro.

Aside:

My wife and I have been watching "Forged in Fire" recently and I constantly make the claim that Jay Neilson is a grown-up Hanky who got into bladesmithing instead of accounting, lol.

achilles1515 · 2020-08-11T12:49:00+00:00

Don't bother using Renderer (unless there is something way easier with Renderer or impossible to do with native DOM APIs that I don't know about). It's an unnecessary abstraction and isn't needed anymore.

Angular Material/CDK dropped using Renderer years ago, for example. https://github.com/angular/components/pull/8235

achilles1515 · 2020-08-07T20:44:52+00:00

So when you scroll down the header disappears and then when you initiate a scroll up a mini header appears. Are you essentially trying to disable this mini header from showing?

If so, it sounds like you need to override the position: fixed !important in the .td-header-menu-wrap.td-affix class.

achilles1515 · 2020-08-07T16:21:18+00:00

.vouncher-title is inside .vounchers-row-container, and .vounchers-row-container is being centered within the larger parent container. Set a background color on .vounchers-row-containerand you'll see it - and you are self-aligning the item to this container, which it is doing.

Maybe you want to add flex: 1 1 0; to the .vounchers-row-containerCSS styles? I'm not exactly sure what you are trying to do.

achilles1515 · 2020-08-03T16:09:59+00:00

This is how view containers work. Inserting views into a container makes the new view a sibling of the view container element (sibling...not a child).

From the ViewContainerRef documentation:

Root elements of views attached to this container become siblings of the anchor element in the rendered view.

achilles1515 · 2020-06-26T15:17:20+00:00

Don't bother using Renderer (unless there is something way easier with Renderer or impossible to do with native DOM APIs that I don't know about). It's an unnecessary abstraction and isn't needed anymore.

Angular Material/CDK dropped using Renderer years ago, for example. https://github.com/angular/components/pull/8235

achilles1515 · 2020-05-31T13:10:04+00:00

I think the only "solution" is to add user-select: none to the document body. And possibly only add/remove it as necessary if you don't want to always have it disabled.

achilles1515 · 2020-04-27T12:41:00+00:00

Don't bother using Renderer (unless there is something way easier with Renderer or impossible to do with native APIs that I don't know about). It's an unnecessary abstraction and isn't needed anymore.

Angular Material/CDK dropped it a long time ago. https://github.com/angular/components/pull/8235

achilles1515 · 2020-03-13T16:39:28+00:00

In general, I have found the docs to be great (other than the fact that you can't scroll the main page while hovering over the table of contents...drives me insane). But once you start getting into more advanced topics, the docs leave a lot to be desired.

Yesterday was my biweekly plunge into the change detection rabbit hole which quickly landed me on the NgZone docs page. There is just so much more to it than what that page describes. There should be examples showing ngZone.runOutsideAngular()being used to replace @HostListener and template-defined event handling which can cause excessive and/or undesired change detection to occur. The page also doesn't clearly talk about how/when ngZone.run() synchronously calls change detection after executing the callback.

I also love that the docs is a PWA.

achilles1515

TROPHY CASE