Issue I have a form that registers a new Group of courses called ‘areas’. The form have a button that calls a modal window and allows the user to select the desired courses and add them to the form list.
Continue readingTag: angular11
how to translate angular datePipe's dates with moment.js?
Issue I have this version of packages: "@angular/cdk": "^11.2.13", "@ngx-translate/core": "^13.0.0", "@angular/material-moment-adapter": "^12.2.9", "moment": "^2.29.1", "@types/moment": "^2.13.0", I am using angular datePipe | date: ‘MMM d, y’ format, which is mediumDate. I want to translate it to other language. For
Continue readingReassign Variable which is coming as @Input in component
Issue I have a component which takes a boolean value as @Input. I am controlling a div using ngIf with this value(to show/hide). Now, when I pass value true or false in both cases, the UI shows the div, whereas
Continue readingWhat causes the "Cannot find name" error in this Angular 11 application?
Issue I am working on an Angular 11 application. In the service UserService I have: import { Injectable, OnDestroy } from ‘@angular/core’; import { UserModel } from ‘../path/to/UserModel’; export class UserService implements OnDestroy { public isActiveUser: boolean = false; public
Continue readingAngular 11 two way binding for a numeric field: backspace not working as expected and giving junk values whenever pressed
Issue I am working with Angular 11 and came across two way binding for quantity field which is an input field of the type number. Problem arrives when I try to use backspace for the quantity field input. It gives
Continue readingconsole.log returns api data but ERROR TypeError: Cannot read properties of undefined reading 'name'
Issue I dont understand i’ve already passed the parent data employeeNumber to user-seminar child component. Here is my child component code export class UserSeminarComponent implements OnInit { @Input() employeeNumber: number; seminar: IUserSeminar; // seminar: any; constructor(private apiService: ApiService, private spinner:
Continue readingHow to get api data in router outlet – Angular
Issue My problem is i cannot pass parent data ngOnInit route params to my child component user-seminar. So i tried google searching and arrive a solution through services. I have changed my app navigation to router-outlet and i have main
Continue readingAngular – How to fix an "Object is possibly 'null'" error from the component's template
Issue I am working on an e-commerce Angular 11 application. I have a template that has to render an error message if the quantity provided for a cart item is less than 1. The cartItem can be null (or undefined)
Continue readingAngular – How to fix an "Object is possibly 'null'" error from the component's template
Issue I am working on an e-commerce Angular 11 application. I have a template that has to render an error message if the quantity provided for a cart item is less than 1. The cartItem can be null (or undefined)
Continue readingAngular 11: Cannot read properties of undefined (reading '0')
Issue I have an edit form that displays userSeminar data now i’ve added saveSeminar() which i want to save my changes but it gives me error even though data in html is correctly being displayed. When i press save it
Continue readingfetching data from Service and storing in Child component – Angular 11
Issue Here’s where i use my service to get api data to child. Initially it gets the Id and other user data in console. ngOnInit(): void { this.commonService.userSetChange.subscribe( apiData => { this.getUserSeminar(apiData); this.user = apiData; console.log(this.user) }); } Then i
Continue readingmessage: The POST method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE
Issue So I have an API route Route::group([‘prefix’ => ‘users’], function() { Route::group([‘prefix’ => ‘seminar’], function() { Route::get(‘/{employee_number}’, [UserProfileController::class, ‘getSeminar’]); Route::post(‘/{user}’, [UserProfileController::class, ‘createSeminar’]); Route::put(‘/{seminar}’, [UserProfileController::class, ‘updateSeminar’]); Route::delete (‘/{seminar}’, [UserProfileController::class, ‘deleteSeminar’]); }); }); And a controller public function createSeminar(User $user, Request
Continue readingHow to monitor SignalR ConnectionState in Angular 11 after SignalR connection is established continously
Issue I am trying to find a way to monitor a SignalR connection continuously like say every minute or every 3 minutes. Trying to find a way to check the connection state. Do I need to set up an observable
Continue readingDisplay relationship api data in html table – Angular
Issue Basically i have a relationship data in educational_awards and has a field award Im trying to display that data to my html table but it wouldn’t show. <tr *ngFor="let item of data; let i = index"> <td> {{ item.year
Continue readingCannot read properties of undefined reading base64 – Angular
Issue I have input field to upload image <div class="form-group"> <label for="exampleFormControlInput1"> Upload Image </label> <input #imageInput type="file" accept=’image/*’ class="form-control" (change)="onChange($event)" /> </div> <div class="pb-4 form-group float-right"> <button class="btn btn-primary btn-main" (click)="saveImage()"> Save </button> <button class="btn btn-primary btn-cancel"> Cancel
Continue readingshow 1 data instead of all ngFor – Angular 11
Issue Im trying to display total counts of enrollment with item.male_students & item.female_students UPDATE remove the ngFor now it works as expected. here’s my component.html <thead class="thead-zircon"> <tr> <th> Total Enrollment Quick Count </th> </tr> </thead> <tbody class="list"> <tr> <td>
Continue readingLogic not evaluating correct – Angular11
Issue I got method to setRemark to display message passed or failed based on grade Elementary grade = 75 is passed College grade = 3 is passed private getFinalGrade(studentId: number, gradingSections: IGradingSection[], transmutation: ITransmutation) { let finalGrade: number = 0;
Continue readingDropdown (select option) not getting data – Angular 11
Issue Here is my model.ts export interface IUserEducationalBackground { id: number; user_id: number; studies_type: string; year: number; course: string; } I have a dropdown like this. <div class="col-5"> <ng-select bindLabel="name" bindValue="name" [items]="studiesType" [(ngModel)]="studiesType.name" (Change)="searchStudies(studiesType.name)"> </ng-select> </div> whenever this value is
Continue readingAngular Material elements are not known element error
Issue I have a dashboard component in an Angular project that utilizes Angular Material elements like so: <mat-card fxFlex fxFill> <mat-card-title fxLayout="column" fxLayoutAlign="center center"> <span class="mat-title">My Dashboard</span> </mat-card-title> </mat-card> And all the Angular Material components are giving me this error
Continue readingHow to convert base 64 to byte Array?
Issue How to convert base64 to byte Array in angular. I am trying it but it doesn’t work. // file upload handleUpload(event) { if (event.target.files[0]) { this.file = event.target.files[0].name; } const file = event.target.files[0]; const reader = new FileReader(); reader.readAsDataURL(file);
Continue readingProgress bar with breaks in angular
Issue I am working on angular app and want to have a progress bar as shown in attached image. I have seen many progress bar online but I am not able to find progress bar of this type. How I
Continue readingDon't cancel the first observable if the second fails, how to keep it (forkJoin, zip). Angular 11
Issue I have parallel API calls. How to continue getting data from one of them if second one failed? forkJoin([a,b]) .subscribe({ next: ((data) => { const [first, second] = data; }) Solution It seems to me that combineLatest is what
Continue readingHow to assign the length of an array to a number type variable in Angular 11?
Issue So here is my problem, I have this going on my app.component.ts : @Component({ selector: ‘sa-app’, templateUrl: ‘./app.component.html’, }) export class AppComponent implements OnInit, AfterViewInit { numberEditing: number = 0; constructor( private measureService: MeasureService, ) {} ngAfterViewInit() { this.editing()
Continue readingHow to assign the length of an array to a number type variable in Angular 11?
Issue So here is my problem, I have this going on my app.component.ts : @Component({ selector: ‘sa-app’, templateUrl: ‘./app.component.html’, }) export class AppComponent implements OnInit, AfterViewInit { numberEditing: number = 0; constructor( private measureService: MeasureService, ) {} ngAfterViewInit() { this.editing()
Continue readingHow can I use the data I have stored in a method after subscribe in Angular? [Angular 11]
Issue I have the following chart, which I want to use data that I have stored in some methods, the code for context: … charts: any … constructor( private measureService: MeasureService, ) { } … ngOnInit() { this.getPublished() this.getEdits() this.chart
Continue readingHow can I use the data I have stored in a method after subscribe in Angular? [Angular 11]
Issue I have the following chart, which I want to use data that I have stored in some methods, the code for context: … charts: any … constructor( private measureService: MeasureService, ) { } … ngOnInit() { this.getPublished() this.getEdits() this.chart
Continue readingHow can I use the data I have stored in a method after subscribe in Angular? [Angular 11]
Issue I have the following chart, which I want to use data that I have stored in some methods, the code for context: … charts: any … constructor( private measureService: MeasureService, ) { } … ngOnInit() { this.getPublished() this.getEdits() this.chart
Continue readingAngular11 update, ng2-charts, Error: Can't import the named export 'Chart' from non EcmaScript module (only default export is available)
Issue I am currently working on updating the angular version of a project. It was v10 and I updated to v11. Fixed many errors, but ng2-charts keep throwing these errors on ng serve. Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:39:21 – error TS2694: Namespace ‘”E:/projects/Credo/kratos/node_modules/@angular/core/core”‘
Continue readingAngular11 update, ng2-charts, Error: Can't import the named export 'Chart' from non EcmaScript module (only default export is available)
Issue I am currently working on updating the angular version of a project. It was v10 and I updated to v11. Fixed many errors, but ng2-charts keep throwing these errors on ng serve. Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:39:21 – error TS2694: Namespace ‘”E:/projects/Credo/kratos/node_modules/@angular/core/core”‘
Continue readingPass Boolean value in a component call from index.html
Issue I have created a component and trying to pass boolean value inside it as @input which will help me to show/hide a div. But it is giving me undefined. can anyone please point out what is wrong in this?
Continue readinghow to download PDF from byteArray in angular 11?
Issue I have byte array and I want to download pdf without any library, for example file-saver. service.ts return this.http.get(`${this.invoiceUrl}/GenerateInvoice`, { responseType: "arraybuffer", observe: "response", params } ); component.ts file(byte) { var byteArray = new Uint8Array(byte); var a = window.document.createElement(‘a’);
Continue readingerror 502 bad gateway when download file angular 11?
Issue I work on download zip file from angular 11 . I face issue when download Large files but small files not have any issue . Large file i download have size 2.397 kb. it will take 7 minutes to
Continue readinghow to disabled angular material menu if modal is opened
Issue I use angular material menu, for header menu. It is nested menu and open on hover. There is a link of code. https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html when I open angular material dialog component header is also active and I can on hover
Continue readingAngular how to combine local function return value with runtime call back http request
Issue I have local function to check some validation which returns true/false. I also have runtime callback function which is an async function ie. http call. Note: This checkPermission function is happening inside a for loop. I want to check
Continue readingAngular 11 – text-decoration: line-through does not work properly with class binding
Issue So I am making a todo app and I want to add stroke to the done tasks but the problem is that it is not working properly. my .css file .stroke{ text-decoration: line-through } and the element in the
Continue readingAngular SSR – Cannot read properties of undefined (reading 'unsubscribe')
Issue I just convert my angular web app to ssr for SEO purposes. I succeeded to correct main issues, but this last one i don’t know how to deal with. I have a service sqs.service.ts with the body import {
Continue readingCors Issue in Angulaar 11 with HttpClient
Issue this is my service file code. getSearchValue() { let headers = new HttpHeaders({ ‘Accept’: ‘application/json’, ‘Access-Control-Allow-Origin’: ‘*’, ‘Access-Control-Allow-Headers’: ‘Content-Type’, ‘Access-Control-Allow-Methods’: ‘GET,POST,OPTIONS,DELETE,PUT’, ‘Authorization’: ‘Bearer Key[enter image description here][1]’, }); let options = { headers: headers }; return this.http.get(this.baseUrl, options) }
Continue readingCors Issue in Angulaar 11 with HttpClient
Issue this is my service file code. getSearchValue() { let headers = new HttpHeaders({ ‘Accept’: ‘application/json’, ‘Access-Control-Allow-Origin’: ‘*’, ‘Access-Control-Allow-Headers’: ‘Content-Type’, ‘Access-Control-Allow-Methods’: ‘GET,POST,OPTIONS,DELETE,PUT’, ‘Authorization’: ‘Bearer Key[enter image description here][1]’, }); let options = { headers: headers }; return this.http.get(this.baseUrl, options) }
Continue readingAngular 11: Wrong Typecheck for UnitTest Spy on HttpClient.get()
Issue When unit testing Angular’s HttpClient.get(…) function, it seems that TypeScript cannot check types correctly when spying on HttpClient.get(…) with given responseType. This error appeared after upgrading to Angular 11. beforeEach(async () => { await TestBed.configureTestingModule({ imports: [HttpClientTestingModule], declarations: [AppComponent],
Continue readingWhat is the reason that my game board element can not be displayed in my html file?
Issue I have a loop in my Angular html file: <div class="board" #board> <div class="row" *ngFor="let row of this.board; let i = index"> <div *ngFor="let box of row; let j = index" id="columns"> <div class="cell" [style.backgroundColor]="box.color" #cell (mouseleave)="resetElement(cell)" (mouseover)=" hoveredElement(
Continue readingangular v11 + Scss failed to compile
Issue We have an existing angular project with scss setup architecture like this but after upgrading to angular v11 with angular cli v11, we are facing this issue, not able to find what is causing it can someone help us?
Continue readingAngular 11 (or 9+) I18n set Locale at startup
Issue I have an old angular project (v8) where i have used i18n to tag all my translations. I have 2 xlf files one for en and one for fr – and at runtime choose which file to use. This
Continue readingExtending Angular DatePipe errors in Angular 11, worked in Angular 10
Issue Originally, I had a simple extension to the DatePipe to transform a date value from our standard (YYYYMMDD format) so that the DatePipe in Angular could then use it. export class SlsDatePipe extends DatePipe implements PipeTransform { constructor(Locale:string) {
Continue readingAngular http post and wait for multiple results
Issue I am using Angular 11 and I need to make a http call to an api that will execute a process. So if I execute this call: processData(data) { return this.httpClient.post(‘https://myurl/api/process’, { data: data }, { headers: this.headers() });
Continue readingHow can I switch the openAll() or closeAll() (button) from Angular Material expansion panel?
Issue I want to switch between 2 buttons: OpenAll and CloseAll. Can I read a boolean of mat-accordion if it’s all opened or closed? <div class="row"> <mat-icon *ngIf="accordion.open()" (click)="accordion.openAll()">open_in_full</mat-icon> <mat-icon *ngIf="!accordion" (click)="accordion.closeAll()">close_fullscreen</mat-icon> </div> <div class="message-box row" *ngIf="notes.length; else noResult"> <mat-accordion
Continue readingAngular Material Tooltip not working after upgrade to Angular 11
Issue I have been using the Angular Material tooltip in my application, but when I recently upgraded to Angular 11, it has stopped working. I created a test component with the following code in the template, which I copied directly
Continue readingangular CLI 11 version is not working in Internet explorer 11
Issue Angular CLI 11 not working in IE 11 I have used import ‘zone.js/dist/zone’; // Included with Angular CLI. import ‘web-animations-js’; // Run npm install –save web-animations-js. import ‘classlist.js’; // Run npm install –save classlist.js. Solution Here, I assume that
Continue readingExpressionChangedAfterItHasBeenCheckedError when using scroll event
Issue In my website, the logo rotate when user scroll in the page. The code is very basic : Component @HostListener(‘window:scroll’, [‘$event’]) scrollPos(){ if (typeof window !== ‘undefined’) { return Math.round(window.scrollY); } } HTML <img src="assets/logo.svg" [ngStyle]="{ transform: ‘rotate(‘ +
Continue readingAngular: Reference singleton in validator from library
Issue I have multiple Angular applications which all reference the same GraphQL API (using Apollo) and decided to migrate the API service layer to a shared library. As part of this service layer, I am exporting a validation function called
Continue readingHow to get value from selected radio button from Angular 11 Form using Vanilla JavaScript
Issue So I am trying to capture the value of my radio button whenever I submit my Bootstrap-based form. I have tried to use vanilla JavaScript to extract this value in my component.ts file, but I get a compile error
Continue readingDate validation so that no next date is selected angular
Issue I want to write aboute angular’s datepicker I want to write date validation so that no next date is selected angular example: today is date 17/12/2020 you can pick date 17 or 16 or more than 17 but you
Continue readingAngular activate @HostListener in ngAfterViewInit or ngOnInit
Issue I have a component that is listening for the height and width of the component. @HostListener(‘window:resize’, [‘$event’]) onResize(event) { this.thewidth = event.target.innerWidth; this.theheight = event.target.innerHeight; } My issue is that I’m not getting any changes until the window is
Continue readingAngular Get Height and Width of the component
Issue I have a component which is manually resized so I’ve added a listener: @HostListener(‘window:resize’) public detectResize(): void { // get height and width of the component this.theHeight = // the coponent height this.theWidth = // the coponent height }
Continue readingAngular overlay not displaying properly with a bootstrap sidebar template
Issue I tried to add an overlay to a component when i click a button like this example : https://stackblitz.com/edit/overlay-demo-fv3bwm?file=app/app.component.ts but after adding it to my component the overlay elements ( in my case just a textarea element ) is
Continue readingError: 'ngb-tab' is not a known element. Angular 11
Issue I am upgrading my application to angular 11 and facing issue with bootstrap tab Error: ‘ngb-tab’ is not a known element: If ‘ngb-tab’ is an Angular component, then verify that it is part of this module. ‘ngb-tabset’ is not
Continue readingUpgrade from angular 7 to angular 8 or 10 causing issues
Issue I recently upgraded from angular 7 to angular 8 and In am getting an error when I run my code. The code compiles successfully but on the browser I get the error below. anyone know how I can fix
Continue reading404 not found (API url not found even though it 100% exists)
Issue I’m trying to get a product by id. Now when I tried this with postman it worked perfectly fine no problems whatsoever. But, when I tried to get the data with Angular it didn’t work it keeps saying 404
Continue reading@ngrx/store asking to install @angular/core@^10.0.0 however we have "@angular/core": "^11.0.5"
Issue When trying to latest ngrx/store in angular 11, it is giving warning to install angular 10. @ngrx/store@10.1.2 requires a peer of @angular/core@^10.0.0 but none is installed. You must install peer dependencies yourself. Following is package json "dependencies": { "@angular/animations":
Continue readingHow to resolve error pipe could not be found in angular 11
Issue I’m not using pipes for the first time, but now I’m trying to use safe pipe which I created in a separated folder "pipes" with PipesModule as below this is the pipe class: safe.pipe.ts import { Pipe, PipeTransform }
Continue readingAngular 11 Generic type 'HttpRequest<T>' requires 1 type argument(s).ts(2314)
Issue I’m practicing Angular JWT Authentication and Authorization. This is my auth.interceptor.ts file: import { HTTP_INTERCEPTORS, HttpEvent } from "@angular/common/http"; import { Injectable } from "@angular/core"; import { HttpInterceptor, HttpHandler, HttpRequest } from "@angular/common/http"; import { Observable } from "rxjs";
Continue readingESLint Lint Indent Config for dropped lines
Issue So, with Angular 11 deprecating TSLint, I made the switch to ESLint (not too happy with it so far). Right now I have this annoying spacing issue I’m trying to work out in the .eslintrc.js config. Take these lines
Continue readingObject is possible undefined?
Issue I don’t understand why I’m getting the ‘Object is possibly undefined error’ on this.selectedBugReport. I make sure that it can’t be undefined and store the result in a constant. But that, is a problem for Angular? Error const test
Continue readingAngular 11: formatted date is set always to 1970
Issue After upgrading to Angular 11 the date pipe does not any longer display properly. If I try date to display {{1610038272|date:"medium"}} === Jan 07, 2021, 16:51:12 but instead it displays Jan 19, 1970, 16:13:58 Is there any breaking change
Continue readingLazy Loaded Routing Problem after Upgrade to Angular 11
Issue I have a top-level router that lazy loads child-routed feature modules, that has stopped working properly after upgrading to Angular v11.0.1. Logging out at the Router events in ng11, the feature module is loaded, and RouteConfigLoadStart and RouteConfigLoadEnd are
Continue readingERROR ReferenceError: Q is not defined in Angular 11 project
Issue I have added a custom javascript file in my Angular 11 project (myCustomJS.js) that utilizes Q library. However, I am getting "ERROR ReferenceError: Q is not defined" at below line of code in my javascript file. Error: "ERROR ReferenceError:
Continue readingHow to properly use default values for properties on Angular 11 / TS 4?
Issue I researched a lot but couldn’t find out what happened with default properties on angular 11/TS4. For example, on Angular 10 / TS 3, this worked just fine: export class MyDirective { @Input() isRange = false; } Consumer TS
Continue readingUpdate property binding from within a component
Issue I have a simple custom dropdown component that I use in another (parent) component. It all renders fine. But whenever I change the value of the dropdown by selectiing another option, then the value that is bound to the
Continue readingESLint – Only Allow Absolute Import Paths Not Relative
Issue I’m working in an Angular 11 project. A lot of the imports in this project are using a relative path or an absolute path. I have ESLint set-up for this project, I want to prevent relative import paths, and
Continue readingNavigate to anchor, preserve queryparams and dont reload page
Issue My current url is: /home/project?id=3 and I want to go to /home/project?id=3#anchorTest without reloading the page. So basically I’d like to scroll down to the anchor. How to best do this? public gotoAnchor(anchorName: string): void { this.router.navigate([this.router.url], {fragment: anchorName});
Continue readingDockerise Angular 11 – i18n SSR (cannot find module express)
Issue I have followed this tutorial and it works well but when I try to dockerize, the build is ok but when I run the image an error appears : Error: Cannot find module ‘express’ DockerFile FROM node:12 as buildContainer
Continue readingCan't execute function inside custom form validation.. why?
Issue I have a Reactive Form in Angular 11 and I’m trying to execute a date parsing function inside the custom validator of my form but, I get an error on my browser terminal that says that the function is
Continue readingHow to use multiple formgroup inside the form array
Issue <div formArrayName="partners" style="margin-top:15px;" *ngIf="partner"> <div *ngFor="let partner of partners().controls; let i = index" [formGroupName]="i"> <div class="partner-background"> <div class="row"> <div class="col col-12"> <h6 style="padding:5px;">Manage Partner <button id="remove" class="btn" style="float:right;" *ngIf="partners().length > 1 && i>0" (click)="removePartner(i)"><i class="fas fa-minus-circle"></i></button></h6> </div> <div class="col
Continue readingAngular issue displaying subitems with ngFor
Issue I have some data which I need to display in the component html and consists of folder names and the files inside the folders. Here is the data: data = [ { "name": "folder1", "files": [ { "name": "file1.txt",
Continue readingAngular 2+ (v11) automatically encode fragment hash (#) in URL into %23
Issue My Angular app has to automatically scroll (only Y-axis) to a certain component when a corresponding hash exists in the URL. E.g. url.com/page1#element1 should make the browser automatically scrolls to Element 1, naturally with #element1 inside the HTML tag.
Continue readingAuthGuard wait for API call
Issue I’m trying to block access to the admin dashboard itself for non-admin users. For this, I have to check in the back-end if the token is valid and if so, that the user is actually an administrator. I seem
Continue readingAngular 11: Why can't the compiler find 'GeolocationPosition' during compiling? "Cannot find name 'GeolocationPosition'"
Issue Why does the angular compiler can’t find GeolocationPosition and GeolocationPositionError? VSC doesn’t give an error and only during compiling it gives me an error. Error: src/app/modules/shared/services/position.service.ts:10:46 – error TS2304: Cannot find name ‘GeolocationPosition’. 10 private positionSource = new ReplaySubject<GeolocationPosition>(1);
Continue readingAngular module created twice using forChild
Issue I have a module, LoginModule, that needs some configuration provided to it, so it provides forRoot. I use this forRoot() in my AppModule. Now I have another module, Module2, that itself is imported by AppModule. I need a component
Continue readingAngular 11 share data between unrelated components which a service
Issue I am using Angular 11 and I have lots of methods in componentB (to call it one way) I now have to make the calls to lots of methods that live in componentB from componentA. I know that I
Continue readingTypeError: Cannot read property 'of' of undefined
Issue I have updated the Angular CLI to version 11.1.2, however after successful build, I have the following error in the browser console. I honestly can’t figure out what the problem is, if anyone happened please help me. Solution If
Continue readingAngular 11 : multiple fields form in stepper
Issue So I’m using angular 11 and struggling to get the following behavior : A stepper, with two inputs in a single steps, that are a datepicker and a select (a dropdown menu). Then I want the stepControl to validate
Continue reading@ngrx/store@11.0.0 Error during template compile of 'StoreModule'
Issue so I’ve update @ngrx to its latest releases this morning: – "@ngrx/effects": "10.1.2", – "@ngrx/router-store": "10.1.2", – "@ngrx/store": "10.1.2", + "@ngrx/effects": "11.0.0", + "@ngrx/router-store": "11.0.0", + "@ngrx/store": "11.0.0", @angular/core has already been migrated to @^11.0.0 before, everything worked well
Continue readingangular useFactory return async Function in module
Issue I am trying to figure out how to use useFactory as an async function in Angular 11. Right now I have this: import { ApolloClientOptions } from ‘apollo-client’; import { FirebaseService } from ‘./firebase.service’; // other imports here… export
Continue readingngx-translate not working on production after upgrade to Angular 11
Issue I recently upgraded to angular 11 and for some reason my translations stopped working in production mode. After the upgrade when I open my app in debug, all of my translations are empty but I do have some errors.
Continue readingHttpErrorResponse {headers: HttpHeaders, status: 415, statusText: "Unsupported Media Type"
Issue Hi I tried to upload a csv file and convert it to json array and pass to the web api. But when I click the submit button I am getting this error. Anyone who can help to fix this?
Continue readingMerge two observables to get the value of two different Dto
Issue I have two observables, each one you get the value of a Dto: this.about.aboutHeInfo().subscribe((heInfo: HemDto) => { this.uiUtils.openDialogResizable({ hem: heInfo }, true, AboutComponent).subscribe(); }); this.about.aboutPeInfo().subscribe((peInfo: PeoDto) => { this.uiUtils.openDialogResizable({ peo: peInfo }, true, AboutComponent).subscribe(); }); The problem is that
Continue readingNG8003: error NG8003: No directive found with exportAs 'ngForm'
Issue I got an issue No directive found with exportAs ‘ngForm’ on my first project angular 11. I’m already import FormsModule and ReactiveFormsModule in app.module.ts but I still get this error. Here’s my code: This my product.component.html code : <form
Continue readingMat-select input composed object
Issue I am struggling to input a composed value into a select. Let’s say our object only contain an ID and a name, an usual way to have a working select would be to do : <mat-form-field> <mat-label>Placeholder</mat-label> <mat-select> <mat-option
Continue readingAngular 11 CORS issue proxy port being incremented
Issue I’m witnessing something that I really don’t like and that I think is the root of my issue : Access to XMLHttpRequest at ‘https://localhost:5001/calls/api/Auth/register’ (redirected from ‘http://localhost:4200/calls/api/Auth/register’) from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight
Continue readingRemove hash(#) in URL Angular 11
Issue I want to remove the # from the URL, but when I remove it, there will be a problem when I deploy it to the server. When the page is refreshed, will get a status of 404. example https:
Continue readingTypeError: Cannot read property 'commit' of undefined Angular
Issue I have an Angular project that picks up the parameters from a Spring Boot project. In the back I have a DTO that contains the information and from the front I access that information to display it on the
Continue readingHighlight the sidebar item according the progress
Issue I have a sidebar to display the job progress. Now I have three phases. At the beginning the project has not started yet, so I want all sidebar items are greyed out. I want the current phase is based
Continue reading"owl-carousel-o" not proper working with model in angular 11
Issue I’m using <owl-carousel-o> with bootstrap model. here problem like below When click on image , model will be open but data not display properly at first time after pressing f3,f10,f11,f12 data will be displayed successfully. it is working properly
Continue readingProblem when binding to 'formGroup' on Angular11
Issue I’m developing a Angular11 project for homework, and I’m trying to save data to my Cloud Firestore with a form using some bootstrap, but when I launch the app, it says the following: error NG8002: Can’t bind to ‘formGroup’
Continue readingAngular11 chip prevent user from inputing wrong values
Issue I want to implement the "chips component" of angular materials. I wanted to use the chip material with autocomplete but i would like to make sure that the value used exists in a given list before adding it. For
Continue readingHow can I select data from multiple JSON files and relate them?
Issue I have a project in Angular11 in which I have included two JSON files, one with the provinces and the other with the municipalities, both files related by the Id, (the Id of the provinces is concatenated to each
Continue readingBest practice for getting an immutable item to edit in a component from an RXJS/NGRX store in Angular
Issue This week we’ve upgraded our Angular v9 app to v11 and RXJS v6.6. For the most part this has gone really smoothly but because the store is now in freeze mode we’re getting a few errors where the code
Continue readingAngular Pipe: Convert string into Json and get member value
Issue Is there an Angular pipe which takes a String text, and lets user get an actual value? String: {"ProductId": "1234", "ProductName": "Computer"} Expected Pipe: (item | pipe).productName ===> results in ‘Computer’ (item | pipe).productId ===> results in 1234 Resource:
Continue readingAngular Test enabled button by selectedRowIndex
Issue i’m trying to test to enabled or disabled button by selection of rowIndex in angular 11, it fails in expect(component.deleteRoleButtonDisabled).toBeFalse(); and goes always true! have any one of you any idea? HTML: <tr class="roles-list" mat-row *matRowDef="let row; columns: displayedColumns;"
Continue readingAngular: Validator Alphanumeric or Whitespace in Formbuilder
Issue I am want to write an Angular FormBuilder validator that only allows alphanumeric characters, empty string, or whitespaces. (no symbols), The following is not working, none of the three solutions, How can I get it working in Angular? https://stackoverflow.com/a/36717690/15288973
Continue readingReturn false instead of undefined
Issue On an Angular 11 / Typescript application I have: authorize(policy: Policy) : Observable<boolean> { switch(policy) { case Policy.Admin: return zip(this.authenticationService.isSignedIn(), this.user$).pipe( map(([isSignedIn, user]: [boolean, UserModel]) => isSignedIn && user?.claims?.some((claim: Claim) => claim.value === ‘Admin’)) ); user is of type
Continue reading