Collect all kinds of angular programming exceptions and fault solutions.


while doing ng build --prod, jw-angular-pagination throwing error

I am using "jw-angular-pagination": "^1.1.0"
ERROR in
node_modules/jw-angular-pagination/lib/jw-pagination.component.d.ts.JwPaginationComponent.html(8,9):
: Property 'setPage' is private and...


Mat auto complete not filtering the values

I've a list of products, which I'd like to have an auto complete feature while selecting, but this doesn't seems to be working the way I'm trying.
Here is my html code:
form [formGroup]="


Angular Bootstrap DropDown reactive form items not loading

I am trying to create a dropdown with multiple checkboxes.
checkboxes are showing up but All the labels are shown by clicking multiple times on the dropdown button.
Component.ts :
export class


How to add header on angular 8 service for cors control

This is my service
export class user {
apiUrl = 'http://localhost:8080/api/v1/'
constructor(private _http: HttpClient) {}
getUser() {
return this._http.get(this.apiUrl + `user`, ...


Benefits of Angular libraries vs Angular modules in a monorepo? NX architecture

I'm wondering what are the benefits of working with libraries rather than modules in Angular, as nx.dev recommends for an monorepo architecture.
I understand the benefits for a npm publishable feat...


How to add border radius to angular mat table?

I am trying to make the mat-table border as round. But it is not working. Tried this-
table {
width: 100%;
border-collapse: collapse;
border-radius: 1em;
}
How to achieve this?


Return File from ngx-image-cropper to upload - Angular

I am using ngx-image-cropper to crop my image. I need to retrieve the cropped image from ngx-image-cropper to upload. However, I can't retrieve File object through this.
This is the code that I us...


How to make scully.io work on github pages?

I'm trying to add scully to my portfolio hosted on github pages. When I'm disabling javascript in the browser, everything stops working (website is not rendered at all). Github requires all deploya...


Angular9 : ngcc failing to run

I am trying to update from Angular 8 to 9 (Ivy). I am trying to consume a shared library which is compiled using Angular 8. I have added:
"postinstall":"ngcc"
in my package.json and tried running...


Highchart 3D module is not working in angular 9.1.4

I am using Highchart in my angular project, everything was working fine but when I update my angular cli to 9.1.4 the declaration start throwing following error ( error screenshot https://prnt.sc/s...


Australia phone number validation is not working in angular

I am trying to set Australia's phone number validation using regExp. The condition is
it should be number
should start with 04
should be 10 digits
But my condition is not working. Can anyone help...


i want to add credentials to window.open(url) in angular6

Code output
i am having this issue in window.open
below is code
repourl:any='http://192.168.1.104/....'
ngOnInit() {
var params = {
Username: 'd2kuser',
Password: '****'};window.open(this.r...


Error: ngcc is already running at process with id 14828

When I run ng serve -o command in the terminal produced the below command
Error: ngcc is already running at process with id 14828.
enter image description here


Template driven form not working.. "Error: Export of name 'ngForm' not found"

I have added the FormsModule in the component module and also tried by adding it to the app module but the same error is repeating 4 times in the console. Please help me fix this issue.
grant-access.


PrimeNG calender display:none issue

I am using the PrimeNG extension for one of the Angular project and is using the primeng-lts version with Angular 8. In the packages.json file I have the following :
"primeicons": "^...


ngx-ui-loader: loaderId "master" does not exist

In my Angular 8 application, I'm using ngx-ui-loader for multiple loaders.
I keep getting error, loaderId "master" does not exist. Can anyone help
app.module
const ngxUiLoaderConfig:


Schematic "store" not found in collection "@schematics/angular"

I install ngrx/store with the following command :
ng add @ngrx/store
then I want to add store
ng generate store auth/Auth --module auth.module.ts
get the following error :
An unhandled exception


Content is not responsive in flex layout angular

Content of home.component.html act unresponsively but when I put the code of home.component.html directly in app.component.html then it act responsively and work perfectly. However, in home.compon...


How do I string interpolate a ng-template ID into the ng-if Else condition?

<div *ngFor="let user of users">
<ng-template [attr.id]="'tileInactiveContent'+user">
something...
</ng-template>
<div *ngIf="somecondition;e...


Unit test Keypress event directive in angular

I have a directive that prevents users from entering the alphabets. for unit testing I planned to execute that I will trigger a keypress event and if its number it will be there in the text box if ...


Step Definitions not implemented - Cucumber with Angular9 & Serenity/JS

When I run my Cucumber step definitions using protractor e2e/protractor.conf.js the test reporter returns:
Logging in to application: User navigates to site from outside company network
Given Us...


Going to route/id doesn't cause template update (address bar shows correct route/id)

I'm just learining angular so sorry if it turns out to be silly question. I have a basic app where I have left-side panel (sidenav material component) and content area. In the left-side panel I hav...


How to send to a Subject different Observable results without having to break the observable flow subscribing?

Edited the question with a concise example. I think it'll make it easier for people to understand. Take note this example is super simplified, normally I layer things between different components, ...


Where to find NgRx version 7 documentation on how to create reducers

I only started using NgRx at version 8, so have only used the create functions for my actions and reducers.
Unfortunately I am now working in a project still in Angular 7, and I want to add NgRx to...


Angular calendar click event

I'm based on that thread.
I could add a method allowing to show a modal (popup) after clicking on an existing event as presented by that capture:
with that code:
<mwl-calendar-week-view
*


API contract testing with Pact and Angular

I have this function:
saveApplication(details: Application): Observable<any> {
return this.http.post(`http://localhost:5000/Apply`, details);
}
And I am writing a Pact Test for it (API contr...


ESLint error when trying to lint Angular templates

I have an Angular 10 app set up with eslint and prettier, which worked fine so far for linting Typescript files. I'm now trying to lint my component template files as well following this doc.
But w...


Can't delete document from collection firebase angular

I updated firestore image for structuring:
I used this method to delete documents in collections , but i don't get errors , still the ID of the product is correct.
firebase.service.ts


Opening Kendo UI for Angular menu upwards instead of downwards

In this StackBlitz I have a Kendo UI for Angular context menu. When the user right-clicks the menu list is opened downwards as any regular menu.
What I need is to open the menu list upwards instead...


Dynamically set mat-select-options when using ngx-mat-select-search in formArray in angular 8

I have a formArray which contains two mat-selects. One of them uses ngx-mat-select-search to search from the values in the options of the mat-select. My problem is that when the form array contains


Include default export in Angular AOT build

I'm using a map library that exports polygon definition as:
export default {
...
}
in various files like world.ts for example.
I then utilise the data in my Angular component using:
import mapData


Angular 9 - collect ALL parameters in the current url

Several previous questions addressed the retrieval one single parameters of a given url, but what about collecting all of them?
Let's say I have this kind of url:
http://localhost:4200/en/my-site/i...


How to call a function after pipe() has completed in angularfire

I have a really simple problem but it has caused me hours of frustration.
I have an observable snapshot from angular firebase which I am piping through the map function to change some of the data.
...


Badges in NativeScript TabView

I need my app to display red badges on the TabView like the ones on the LinkedIn app shown here.
Does anybody know how to do that in NativeScript?


Angular Route partial wildcard

When a link comes in like this: mysite.com/_/somethingThatChangesRandomly
I wish to redirect that to the login page, so the rule is "path starts with _":
{
path: '_/**', redirectTo: &...


Angular 9 to 10 upgrade - Typescript compilation warnings : *.ngtypecheck.ts

Post my upgrade from Angular 9 to Angular 10. ng build --prod throws the Typescript compilation unused warnings:
.ts is part of the TypeScript compilation but it's unused.
Add only entry points to ...


Angular variable is not refreshing (not displayed correctly in template)

There are 2 components : graph, node
And 1 service: nodesmanager
nodesmanager is injected in graph
When the graph component detects a mouse click event, the injected service nodesmanager create a new


How to pass results between chained observables

Abstract problem: Every time a source Observable emits and event, a sequence of API calls and Angular services need to be triggered. Some of those invocations are depending on previous results.
In my


How to handle "Uncaught (in promise): Error: Template parse errors: 'alert' is not a known element:" in Angular?

I am developing an authentiaction app in AngularJS. There I want to print an alert message if the username or password is incorrect. Below is my implementation,
alert.component.html :-
<div *ngIf=&


Best way to store file on client machine

I am currently building a website with Angular(front) and .NET Core (back).
The aim of the website is to display medias on remote screens. These screens have my website opened and is already able t...


Interaction between two components

I need some help.
I have a home page and a favourites page (another component)
In the home page the user enters a movie list and in this list it displays 2 buttons (Delete and fav)
My problem is in...


How to Deploy an Angular 8 Universal App to an Azure App Service on Linux Running Node

I've deployed standard Angular apps to Azure. I just add an index.js file using express to the root, zip the dist folder and use web deploy to release the app.
The output for an Angular Universal a...


TypeScript setter not triggered

I have the following class
export class VibrationElement {
private _amplitude: number;
get amplitude(): number {
return this._amplitude;
}
set amplitude(amplitude: number...


How to exactly match filter string data from select in Angular Material Table?

i am trying to filter my table by Production or Application name. I've used this guide https://www.freakyjolly.com/angular-material-table-custom-filter-using-select-box/ for my approach and everyth...


Error in imports of Angular Material only in build

I migrated a project that was in version 7 of the angular with angular material 7 also to version 10. It works fine, except that when I'm going to do the Build, it shows me an error in imports. I c...


Infinite Loop On Mat-chip-list Inside Mat-Table

I have a custom mat-chip-list component as following and want to use it inside mat-table:
<mat-chip-list
class="fv-stroke-chip"
[ngClass]="{'mat-chip-list-stacked': ariaOrient...


Angular changeDetector.detectChanges() breaks matTooltip in *ngFor

The matTooltip in following component is redering correctly. The overlay and small bubble for the tooltip is rendered, but the text is missing (although in the html when inspecting in the browser) ...


Did Google forget to update their code for Angular 10 examples in Material Design or what is going on?

So I was looking at the Material Design page as a normal human being (did I mention I am a normal human being?).
I was looking at the Material Design table examples in the official documentation in


How can i unsubscribe all subscriptions in my app?

I have a big app where I have a lot of subscribe methods. If I want to unsubscribe from one of them, then I will use this code:
getUsersSubscription: Subscription;
ngOnInit() : void {
this.


Unable to enable CORS in spring boot with my Angular app

I've tried the options suggested, for some reason my Angular client on port 4200 can not make the call to my spring boot app on port 8081. I am unsure if its a CORS issue or if I am missing something


Next