Migration to new Angular Control Flow syntax

[FrancescoMolinaro]

References

Resolve #3674

Description

Migration to new Angular control flow syntax to improve readbility, type checks on Html , performances and bundle size.

Instructions for Reviewers/List of changes in this PR:

Migrated all templates and import to new syntax.

Removed all NgIf/NgFor/NgForOf/NgSwitch directives and related imports.

Added new lint rule to enforce new syntax.

Functionalities remain unaltered.

To test the rendering improvements was quite difficult as they are not really noticeable on small lists.
Therefore I mocked a list of ca. 1000 elements in /admin/registries/metadata (table with NgFor).
I did run then several tests comparing the two version (old/new) with different methods (tested in CSR):

1. MutationObservers and performace.measure()

I did set up a mutation observer that would mark the start and the end of the performance measurament when the first and the last item in the list would enter the DOM.
The rendering time could vary based on different facotrs e.g. machine used, memory allocation etc. , so I tried to run the tests in the most similar conditions on a local machine.

In general here the render time is very similar but I will list the two best results I got (duration value is in millisecond):

Old Syntax

{
"name": "render list",
"entryType": "measure",
"startTime": 14961.10000000149,
"duration": 20.299999999254942
}

New Syntax

{
"name": "render list",
"entryType": "measure",
"startTime": 13188.5,
"duration": 19.399999998509884
}

2. Lighthouse Performance

I have then performed some tests on with the Lightouse extension from Google , we can notice that the time also here is very similar but the total blocking time seems reduce.
Best two results I could gather:

Old syntax

New Syntax

[github-actions]

Hi @FrancescoMolinaro,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!