Angular

Material 18 - Edit chip content with a button

katana — Mon, 01 Dec 2025 15:02:57 +0000

I recently implemented Material chips (v18) in my Angular app, and it seems that the only way to edit a chip’s content is by double-clicking on it. But in the latest Material version they added an edit button that does the same thing. Is it possible to add an edit button to a Material v18 chip and emulate the same behavior that the edit button has in the latest version (v21)?

Examples: Material v18: https://v18.material.angular.dev/components/chips/examples#chips-input Material v21: https://material.angular.dev/components/chips/examples#chips-input

Continue reading...

Material 18 - Edit chip content with a button

Inject migration angular didn't work on nx workspace

kian — Mon, 01 Dec 2025 11:22:29 +0000

I use this nx generate @angular/core:inject to migrate projects but get below error:

Could not find any files to migrate under the path /home/jibit/Desktop/jibit-angular-workspace/. Cannot run the inject migration.

also try to use --path to address specific project in apps folder.

I can't figure out this problem is related to what? tsconfig maybe? or mismatch package versions?

Tsconfig:

package.json:

"dependencies": {
"@angular/animations": "20.3.4",
"@angular/cdk": "20.2.8",
"@angular/common": "20.3.4",
"@angular/compiler": "20.3.4",
"@angular/core": "20.3.4",
"@angular/forms": "20.3.4",
"@angular/localize": "20.3.4",
"@angular/material":...

Inject migration angular didn't work on nx workspace

withEnabledBlockingInitialNavigation() is required to make hydration work for route component,...

Chrillewoodz — Mon, 01 Dec 2025 09:42:25 +0000

I'm investigating why our application flickers when running on a slower network such as 3G/4G on a mobile while also using SSR, and I found that the router component disappears after a while, before popping back in (classic SSR rendering with no hydration, basically).

I dug deeper, and found this in the Angular devtools panel:

This seems to indicate that my lazy loaded route component wasn't hydrated, based on missing the little hydration icon to the far right.

These are my client and server configs respectively:

export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZonelessChangeDetection(),
provideClientHydration(withEventReplay(), withI18nSupport(), withIncrementalHydration(), withHttpTransferCacheOptions({...

withEnabledBlockingInitialNavigation() is required to make hydration work for route component,...

AWS Amplify keeps clearing my session tokes from localStorace after a network droput

Joseph Cannella — Mon, 01 Dec 2025 05:53:19 +0000

I'm a bit frustrated with AWS Amplify, what seems like a basic feature of maintaining sessions is seems to fail if the network drops.

Here is my Cogntio CDK setup, the refreshTokenValidity is set to 90 days, however I was noticing that after a netowkr drop (or device sleep) the tokens were often cleared froom localStorage. I've since managed to find a way to hack most of these to prevent them form being removed, however I noticed that only 5 of the 6 tokens are preserved and the Amplify login page of the App doesnt seem to realize that the user is re-authenticated and should be considered logged in.

// user pool client is used for authentication
this.userPoolClient = new UserPoolClient(this, 'SmallTownClient', {
userPool: this.userPool,
generateSecret: false, // must be false for Amplify login to work
authFlows: {
userPassword: true,
userSrp:...

AWS Amplify keeps clearing my session tokes from localStorace after a network droput

Internal server error: Failed to update ``Vite` client error overlay text

3gwebtrain — Mon, 01 Dec 2025 05:22:56 +0000

Because of the angular 20 security issue, I updated the 20.3.14 version. But on running the app, getting an error as

[vite] Internal server error: Failed to update Vite client error overlay text.
at loadViteClientCode (C:\Users\bashim2\Projects\CAT\minestar-gui-safety\node_modules\@angular\build\src\tools\vite\plugins\angular-memory-plugin.js:108:31)
at async EnvironmentPluginContainer.load (file:///C:/Users/bashim2/Projects/CAT/minestar-gui-safety/node_modules/vite/dist/node/chunks/dep-D4NMHUTW.js:42293:22)
at async loadAndTransform (file:///C:/Users/bashim2/Projects/CAT/minestar-gui-safety/node_modules/vite/dist/node/chunks/dep-D4NMHUTW.js:35673:22)

How to fix this error? here is my package.json

{
"name": "source",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "npx nx serve",
"lint": "npx nx affected -t lint",
"stylelint":...

Internal server error: Failed to update ``Vite` client error overlay text

How to implement custom node-based reshaping for SVG ellipse inside a resizable reference box?...

yashwanth — Mon, 01 Dec 2025 05:22:56 +0000

I’m working on a feature similar to Figma or Lucidchart where an ellipse (or circle) is placed inside a reference box (a square) with four corner handles for resizing.

Screen recording expectation

Current functionality:

Dragging a corner handle resizes the ellipse while keeping the opposite corner fixed.
Dragging a side handle adjusts the width or height proportionally.

This works fine for ellipses.

Now, I want to add:

custom node-based reshaping of the ellipse using a rotation handle.

I tried multiple approaches, including using SVG and experimenting with for more flexibility, but I couldn’t get rotation to work properly.

Question:

Is using an SVG the right approach for enabling rotation and node-based reshaping?
Are there...

How to implement custom node-based reshaping for SVG ellipse inside a resizable reference box?...

What is the difference between Promises and Observables?

Rohit — Sun, 30 Nov 2025 11:35:39 +0000

What is the difference between Promise and Observable in Angular?

An example on each would be helpful in understanding both the cases. In what scenario can we use each case?

Continue reading...

HttpTestingController runs endlessly

TalVik99 — Sun, 30 Nov 2025 09:56:21 +0000

In my component I have httpResource:

export class EmployeesComponent {
employees = httpResource(() => '/api/employees', {
defaultValue: [],
});
}

and in tests I try to test it with Vitest:

describe('EmployeesComponent', () => {
let component: EmployeesComponent;
let fixture: ComponentFixture;
let _httpTesting: HttpTestingController;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EmployeesComponent],
providers: [provideRouter([]), provideHttpClient(), provideHttpClientTesting()],
}).compileComponents();

fixture = TestBed.createComponent(EmployeesComponent);
component = fixture.componentInstance;
_httpTesting = TestBed.inject(HttpTestingController);
await fixture.whenStable();
});

it('should create', () => {
expect(component).toBeTruthy();...

HttpTestingController runs endlessly

How to implement rotation and custom node-based reshaping for SVG ellipse inside a resizable...

yashwanth — Sun, 30 Nov 2025 07:23:32 +0000

Reference: screen recording link

I’m working on a feature similar to Figma or Lucidchart where an ellipse (or circle) is placed inside a reference box (a square) with four corner handles for resizing.

Current functionality:

Dragging a corner handle resizes the ellipse while keeping the opposite corner fixed.
Dragging a side handle adjusts the width or height proportionally.

This works fine for ellipses.

Now, I want to add:

Rotation of the ellipse using a rotation handle.
Double-click to add an extra node that can be dragged to reshape the ellipse (similar to vector editing tools).

I tried multiple approaches, including using SVG and experimenting with for more flexibility, but I couldn’t get rotation and custom node-based reshaping to work...

How to implement rotation and custom node-based reshaping for SVG ellipse inside a resizable...

Send Observable result to child component as Signal

Horacio García Magallanes — Sat, 29 Nov 2025 20:42:12 +0000

In my code I am trying to get the result from this observable

// Runs fine
obtenerOfertaPorId(id: number): Observable {
return this.http.get(`${this.apiUrl}${this.base_url}/obtenerOfertaPorId/${id}`)
.pipe(
tap(resultado => console.log(resultado)),
catchError(error => {
console.log('Error fetching oferta by id');
return throwError(() => new Error(error))
})
);
}

On this component:

export class JobPostDetailPage {

private activatedRoute = inject(ActivatedRoute);
private id = this.activatedRoute.snapshot.paramMap.get('id')!;
private ofertaService = inject(OfertaService);
jobPost = toSignal(this.ofertaService.obtenerOfertaPorId(parseInt(this.id)));

}

To send the result as an input signal to the children:

And...

Send Observable result to child component as Signal

What does "NG8113: Home is not used within the template of App" mean

Damon Heinz — Sat, 29 Nov 2025 02:43:30 +0000

I was doing the tutorial from https://angular.dev/tutorials/first-app/11-details-page. I got the error message below:

NG8113: Home is not used within the template of App [plugin angular-compiler]

src/app/app.ts:6:12:
6 │ imports: [Home, RouterLink, RouterOutlet],

I also got the error message:

TS2339: Property 'photo' does not exist on type 'InputSignal'. [plugin angular-compiler]

src/app/housing-location/housing-location.ts:11:31:
11 │ [src]="housingLocation.photo"

What did I do wrong to generate these messages? The NG8113 message is considered a warning by the compiler, but I brought it up because it might be responsible for the other message.

Continue reading...

What does "NG8113: Home is not used within the template of App" mean

Angular: How do I read a text file located in the assets folder?

ISHAAN PATEL — Fri, 28 Nov 2025 20:03:22 +0000

I am trying to open a .txt file which is in my assets folder. The name is "Maze1.txt". I am sort of new to these things so I was wondering if someone can help me read the text from this file. Thank you so much. If there is any more information needed, please tell me.

Continue reading...

TypeError: is not a function in TypeScript class

Aaron Balthaser — Fri, 28 Nov 2025 13:02:56 +0000

I'm getting the following error in my TypeScript class. I am trying to call a helper function passing the token.

Error:

post error: TypeError: this.storeToken is not a function(…)

Class:

/**
* Authentication Service:
*
* Contains the http request logic to authenticate the
* user.
*/
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

import { AuthToken } from './auth-token.service';

import { User } from '../../shared/models/user.model';

@Injectable()
export class Authenticate {

constructor(
private http: Http,
private authToken: AuthToken
) {}

post(user: User): Observable {
let url = 'http://localhost:4000/';
let body = JSON.stringify(user);
let headers = new Headers({ 'content-type':...

TypeError: is not a function in TypeScript class

Filter PrimeNG Table on Init using .ts code

Domagoj Hamzic — Fri, 28 Nov 2025 12:22:41 +0000

I need to filter the table on view load.

For example, I have a table with 5 columns (Woid, Customer, AdapterID, Assignee, Status). On load, I want to filter woid column using 'contains'. I accomplished filtering onLoad but when I want to filter again that column later I got an error:

'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.'

Program code below...

@ViewChild('dt', { static: true }) dt: any;
ngOnInit() {
this.dt.filter('22', 'woid', 'contains');
}

Also, after filtering via .ts code (woid filter) and directly in view with (customer filter) from PrimeNG Angular collection, I get this JSON. woid property is not an array, unlike custom which is....

Filter PrimeNG Table on Init using .ts code

Attribute inputs vs explicit inputs in Angular

Lukasz Prus — Fri, 28 Nov 2025 11:43:17 +0000

Which approach to passing static string values as inputs to an Angular component is considered a better practice and is more performant?

Pass input via an attribute

or pass it explicitly

Does either of them result in fewer CD checks, ngOnchanges calls, or has DOM access advantages?

Continue reading...

ngx cron editor not patching value on edit mode in angular12

Prashant G — Fri, 28 Nov 2025 09:42:50 +0000

I am using Angular 12 with the package ngx-cron-editor@0.7.0. The cron editor renders correctly, but when I try to patch an existing cron expression into my reactive form, the UI of the cron editor does not update. The FormControl value changes, but the editor continues to show default values instead of the patched cron.

Example:

[formControlName]="cronConfigConstant.cronConfigFormDetails.cronExpression.key"
[options]="cronOptions">

private patchCronForm() {
this.cronConfigService.editCronFormSub
.pipe(takeUntil(this.destroySubscription))
.subscribe((resp: CronDetailsModel) => {
// --- ADD THESE LOGS ---
console.log('Incoming Data object:', resp);
console.log('API value for cron_expression:', resp?.cron_expression);
if (resp) {
this.editCronId = resp?.id...

ngx cron editor not patching value on edit mode in angular12

What tools does Angular team use to design svg?

anlex N — Fri, 28 Nov 2025 06:42:59 +0000

I am reviewing [Angular](https://github.com/angular/angular) source code.

what tools does Angular team use to design these svg? I take some for example:

//adev/src/assets/images/overview.svg
//adev/src/assets/images/roadmap.svg
//adev/src/assets/images/templates.svg

I have searched google, but can not find solutions.

I can use Adobe Illustrators, if Angular team also use Adobe Illustrators, can you give me your svg's .ai files?

Continue reading...

What tools does Angular team use to design svg?

Angular Aria Autocomplete Feature - Compilation Error

freedomdev — Fri, 28 Nov 2025 01:13:27 +0000

I am working with a .NET + Angular WebApp Project

I added Angular Aria to the Angular project hoping to use their Autocomplete feature for a Select Box.

I copied the code directly from the first example on the angular page. https://angular.dev/guide/aria/autocomplete

However, trying to use this code is yielding Typescript error messages on compilation.

TS2551: Property '@ɵINPUT_SIGNAL_BRAND_WRITE_TYPE@1584' does not exist on type 'InputSignal<"auto-select" | "manual" | "highlight">'. Did you mean '@ɵINPUT_SIGNAL_BRAND_WRITE_TYPE@3762'? [plugin angular-compiler]

src/app/autocomplete/autocomplete.component.html:1:16:
1 │

╵ ~~~~~~~~~~

X [ERROR] TS2551: Property '@ɵINPUT_SIGNAL_BRAND_WRITE_TYPE@1584' does not exist on type 'InputSignal'. Did you mean...

Angular Aria Autocomplete Feature - Compilation Error

Ionic Angular ion-content inner-scroll has zero height on iOS preventing scrolling - all...

MatthewSamaha — Thu, 27 Nov 2025 22:52:43 +0000

I have an Ionic Angular application where scrolling is completely broken on iOS (Safari, Firefox, Edge - all WebKit-based). Desktop browsers work perfectly. The diagnostic evidence shows that the .inner-scroll element inside ion-content's shadow DOM has completely collapsed to zero height.

Environment

Ionic: with Angular standalone components
Platform: iOS (all browsers)
Status: Desktop works fine, iOS completely broken
Behavior: Can only "wiggle" content a few pixels, no actual scrolling

Current Setup

Template:

html

Relevant Global CSS:

scss

ion-content {
--background: var(--ion-background-color);
--color: var(--ion-text-color);...

Ionic Angular ion-content inner-scroll has zero height on iOS preventing scrolling - all...

How do I get the selected Item in a Tabmenu from Primeng?

TheWandererr — Thu, 27 Nov 2025 19:42:49 +0000

I have a simple MenuItem Array that I use to fill the Tabmenu component from primeng. This looks something like this:

.ts file:

items = MenuItem[];
activeItem = MenuItem;

// Constructor, etc...

ngOnInit() {

this.items = [
{label: 'Homework', icon: 'fa-file-pdf-o'},
{label: 'Movies', icon: 'fa-file-pdf-o'},
{label: 'Games', icon: 'fa-file-pdf-o'},
{label: 'Pictures', icon: 'fa-file-pdf-o'}
];
this.activeItem = this.items[2]
}

.html file:

I know I can set the Active item of the tabmenu with the help of the activeItem like so:

this.activeItem = this.items[2]

Can I somehow retrieve the activeItem on click? E.g.,

getActiveItem Method:...

How do I get the selected Item in a Tabmenu from Primeng?