ng-components | This is a set angular components | Frontend Utils library

So, I have been following this tutorial for making a tabbed component:

https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/

I have the following pieces of code:

Tabs:

I am reading the official examples of angular routing testing from here . I didn't understand how heroClick() does trigger click.

I read the CSS styling section (https://vaadin.com/docs/v14/flow/styling/styling-components) and it mentions that global CSS doesnt affect the 'INPUT" field in the shadow DOM, So styling has to be added to shdaow DOM, But unfortunately no where does it explicitly say HOW to add the styling to the shadow DOM. Note. im using mainly Flow pure java with a bit of CSS.

I tried retrieving the elementt from component then retrieving the shadowRoot, then from root, retrieve the 'input' element to add styling to it, unfortunately that didnt work, shadowroot was null (this code executed from the onAttach() method in the view class)

I am writing an Angular application. I have a test for my component (losely following this manual), where I want to check that my ngOnInit() calls the provided (mock) service, and initialises my property foos with an array of Foo objects.

I'm trying to lazy-load a component in Angular 11 (strict mode) following this guide. Strict mode has been a pain because almost no examples/tutorials use it.

This component will load the appropriate header component (eventually). I'm just trying to lazy-load one for "site A" to start.

header-loader-component.ts

I am creating a BottonShet component in Nativescript-Vue. The problem I have is the following:

Uploading the frame using translateY or animation behaves differently on iOS and Android.

I have a component:

In the botton sheet I have an element that is 150 high. If I apply a

frame.translateY = Screen.mainScreen.heightDIPs - 150

in android it reaches a high and in ios it reaches another. What's going on here? How can I calculate a height so that it is the same in all phones from 150 and the screen height?

In this documentation it says that the translate of the animation is measured in DIPs so this should work well on all devices.

In the mentioned tutorial, it makes an if to apply one height or another depending on the platform, I don't want that, I want to be able to calculate so I don't have to be testing on all devices.

Thanks a lot.

I am migrating my component unit tests with only jest to UI tests using Testbed and jest (Before I had just unit test with component = new MyCompontent()).

I am using Angular 11.

There is one thing I do not understand about compileComponents. In the docs it says "You can ignore this section if you only run tests with the CLI ng test command because the CLI compiles the application before running the tests."

I am not calling ng test but jest --watch but my tests work both with and without compileComponents ( by work I mean they assert correctly my view).

Also there is a "You must call this method if any of the testing module components have a templateUrl or styleUrls because fetching component template and style files is necessarily asynchronous"

My component is using both templateUrl and styleUrls

I'd like to refresh the child component when the parent is updated and only the child component of this component should update, because I'd like to reuse the child component somewhere else in the page. The components structure is the following.

UserShow.php

I am trying out ABP 4.0 using the Blazor UI and want to override the built-in view for User Management. Inspecting the source code I found the UserManagement.razor file which has the route of "/identity/users" - this matches the view that I want to override.

I have (I believe) followed the steps listed at: https://docs.abp.io/en/abp/latest/UI/Blazor/Customization-Overriding-Components. However when running the site, I still get the standard, built-in user list.

Pages/Identity/UserManagement.razor (within my wwwroot folder):