35 questions
0
votes
0
answers
37
views
Components inheriting properties from a base class (directive)
I'm trying to dynamically update inputs of my Angular components using ViewContainerRef.createComponent.
Currently, my components inherit input signal properties from this directive:
@Directive()
...
- 767
1
vote
1
answer
77
views
Primeng components failure after Angular 20 update
After updating to Angular 20.3.9, primeng does not apply their styles to the input and button of this html and can not also import the Aura theme:
<form class="cloud" id="login-form&...
1
vote
0
answers
78
views
Angular @for Loop Not Updating When Signal is Truncated
Background:
I am working on an Angular 20.3.10 application where I use signals for managing the state of a collection of toast messages. I have SSR and Zoneless enabled and have a web worker ...
- 109
1
vote
2
answers
84
views
Prevent navigation to non-existent ID params
I try to prevent user to navigate to a non-existent id parameters with my details component. I read the documentation of Angular v20 and it seems that the "resolvers routes configuring" is ...
1
vote
1
answer
62
views
Angular compile error using strict templates with @if optional chaining
I'm currently running into an issue/question about optional chaining in Angular. I'm running Angular 20, with "strictTemplates": true enabled as angularCompilerOptions and "strict":...
- 11
1
vote
1
answer
54
views
How to create an error boundary component in Angular 20 to catch errors from child components?
I'm using Angular 20, and I need to create a component that works like a React Error Boundary.
The idea is:
If there are no errors inside the child components, it should render the normal content.
...
3
votes
1
answer
252
views
ESLint issue after upgrading to Angular 20 (".eslintignore" no longer supported)
After upgrading my Angular project to version 20, ESLint started throwing the following error when I run linting (using Nx):
[error] (node:20947) ESLintIgnoreWarning: The ".eslintignore" ...
- 10.2k
1
vote
1
answer
72
views
Frontend is not loading config in Angular app
I switched from Angular 16 to Angular 20 and suddenly Angular is not loading my configuration data.
There is a file with my Kubernetes setup in:
src
- assets
- config
- config.json
...
- 125
1
vote
3
answers
99
views
Grouping element in template throws error with for loop
In the template, I am trying to group the elements within the ul and li. I know that i can be achieved with pipe by grouping other way.
when I tried with template with conditional literals, like below
...
- 15.5k
2
votes
2
answers
66
views
Angular Reactive Form still includes empty values in form.value even after applying validators
I'm using a
Angular 20 with Reactive forms. Even after applying Validators.required to some controls, the form still includes empty string ("") or Null values when I log or submit form.
I ...
1
vote
1
answer
158
views
Build of angular library with ng-packagr fails for json translation files not found
I migrated one of our projects from Angular 18 to Angular 20.
The projects is strutured in this way:
project_name
-- projects
---- frontend
---- lib
------ src
------ lib
-------- i18n
-------- public-...
- 170
0
votes
0
answers
51
views
Angular Material mat-form-field label misaligned with prefix icon on initial render
I'm using Angular Material's mat-form-field with appearance="outline" and a prefix icon (matPrefix). On initial render, when the input is empty, the label appears too close to the prefix ...
- 313
0
votes
0
answers
32
views
ctx.widgetSize is not a function when using widgetSize input signal
I’m developing a standalone component in Angular 20 and I’m getting this error:
ERROR TypeError: ctx.widgetSize is not a function
at SanctionWidgetComponent_Template (sanction-widget.component....
- 767
2
votes
1
answer
156
views
angular 20 children routes seems not loaded at all when lazy load of component enabled
I have main route:
{
path: 'signup',
loadComponent: () => import('./signup/signup.component').then(m => m.SignUpComponent),
children: signUpRoutes
},
and inside signUpRoutes I ...
- 3,502
1
vote
0
answers
208
views
Fix for ngx-translate Angular 20 getBrowserLang default text flash
I'm currently working on an Angular 20 project with Server-Side Rendering and the ngx-translate library.
I've already read through the ngx-translate docs and found this about fixing UI glitches when ...
- 28
5
votes
0
answers
150
views
Long compile time in angular 20
After upgrading my angular project from 19.2.15 to 20.3.1
My project's compile time (ng build) when from 85.426 seconds to 453.679 seconds.
The resulted bundle size difference is minimal (different by ...
- 388
4
votes
3
answers
691
views
`@apply` is not working and does not validate actual TailwindCSS v4 class/utility names in an Angular (with Sass) project
I've recently created a new Angular application (v20.3.0) and I installed TailwindCSS v4, using the Angular documentation guideline which is very simple to do (also TailwindCSS in its documentation ...
- 127
1
vote
0
answers
134
views
Prerender in angular 20 latest
I have portfolio web needed help for the latest Angular 20 version for prerender options to generate static html pages for better seo purpose. Need help with how to enable prerender in website without ...
4
votes
1
answer
932
views
Does Angular Material plans to remove the deprecated @angular/animations package?
In Angular v20, @angular/animations package is now deprecated in favor of pure CSS. I wonder since i cannot find any information about that anywhere, is there plans to remove that deprecated package?
- 403
2
votes
6
answers
667
views
Animated height without `@angular/animations`
With the latest angular version, @angular/animations is being deprecated.
I am struggling with migrating an animation in my application. This minimal example shows the animated height.
Minimal example:...
- 147
-3
votes
2
answers
79
views
How do I use HTML wrapped in text quotes inside of Ionic ion-text
I am receiving a string from the API
textInsert = "<p>Hello</p><br><p>There</p>"
I wish to use the with
<ion-text color="secondary">
{{...
- 528
-4
votes
1
answer
237
views
toSignal() cannot be called from within a reactive context [closed]
When I subscribe and update the signal getting error as follows.
Error detail:
ERROR RuntimeError: NG0602: toSignal() cannot be called from within a reactive context.
Invoking toSignal causes new ...
- 15.5k
1
vote
1
answer
117
views
Getting error while convert existing code to use signal in HttpClient put method (Angular 20)
I am new to Angular. I started with Angular 19 that were using zone.js for change detection. But then I moved to Angular 20 and now I am using zoneless. I have a put method call that I am trying to ...
- 8,770
0
votes
0
answers
168
views
Primeng20 Component-level css styles is not getting evaluated
We have Angular hybrid application where we are using PrimeNg20 with Angulra20.
Tries with below dependencies:
"primeicons": "^7.0.0",
"@primeuix/themes": "1.2.3&...
- 1,092
1
vote
1
answer
380
views
How to bind outputs to ng-template in Angular 20?
I'm doing the following, which works as expected.
<ng-container
*ngComponentOutlet="
step.component | async;
inputs: {
someId: someId,
stepper: stepper,
step: step,
...
- 40.2k
1
vote
1
answer
100
views
Can't access inputs from host directive to HTML template
In the docs for Angular host directive, it's stated that I can use my inputs/outputs in the template like this.
@Component({ ...
template: "ID {{someId}}",
hostDirectives: [ { directive: ...
- 40.2k
2
votes
1
answer
436
views
How to iterate over a Angular signal object in the html by using @for
In the html, I have to iterate over a WritableSignal object variableList(), but this html code will not run the loop unless the json string of the variableList() will show correctly in the same html.
...
- 571
-2
votes
1
answer
311
views
Angular ng package build doesnt include lib folder after angular 20 upgrade [closed]
After upgrading my angular 19 ng package to angular 20, it seems that the lib folder is missing in the build of the package.
After running ng build my-lib the lib folder misses under dist/.
I tried ...
- 312
0
votes
1
answer
242
views
Angular 20 Can't bind to 'routerLink' since it isn't a known property of 'a'
Although I have used a previous stackoverflow solution, I still get the same error. The other problem is that there is no script in Angular 20 that has @NgModule. Here is the code I have:
navbar.html
...
- 29
2
votes
1
answer
94
views
How to handed a relationship between two signals by linkedSignals in Angular v20?
I have to mange a relation for X*2=Y, there Y and Y are input fields.
In the moment, I trigger by a change of the input field the related variable as
X changed => Y=X*2
Y changed => X=Y/2
import ...
- 571
2
votes
1
answer
258
views
Loading GoogleMaps API in Angular 20 Karma unit tests
Having updated an Angular v19 app to Angular v20, the Google Maps API is not being loaded in the Karma unit tests. All the unit tests on components which serve Google Maps fail with the following ...
- 1,272
0
votes
1
answer
3k
views
Getting the deprecation warning for ngIf/ngFor/ngSwitch/ngSwitchCase/ngSwitchDefault in my project
Trying out Angular 20.
Getting the deprecation warning for all my control flow elements.
'NgSwitchDefault' is deprecated.
'NgSwitchCase' is deprecated.
'NgSwitch' is deprecated.
'NgFor' is deprecated....
- 66.2k
8
votes
3
answers
4k
views
ng-bootstrap with Angular 20
After updating Angular 19 to Angular 20 while having @ng-bootstrap/ng-bootstrap I receive the error:
X [ERROR] No matching export in "node_modules/@angular/core/fesm2022/core.mjs" for ...
- 183
1
vote
1
answer
308
views
config.json file cannot be found in Angular v20
I have just updated my Angular app from version 19 to v 20. The updated seemed to work fine except the JSON files in my assets folder no longer. I have a config.json file in the assets folder which is ...
- 79
1
vote
2
answers
788
views
Angular 20 ng-reflect-* attributes missing in HTML, test cases failing due to missing attributes
I have been trying out the new Angular 20, I noticed a few test cases were failing, the test cases specifically were using ng-reflect-* to identify elements to test.
Below are two examples and ...
- 66.2k