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 readingTag: angular11
how 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 readingdxi-Item Disable/Enable on button Click event
Issue I’ve set a dx-form that has multiple dxi-item. when I change the value of isDisabled (bool) on the button click event, it disables all the buttons on my forms. What i’d like to do is on click of new
Continue readingHow to set a variable type but without giving it a value?
Issue On and Angular 11 project using Typescript with Strict Mode I have: export class AvatarComponent { @Input() user: UserModel = null; } I am getting the compilation error: Type ‘null’ is not assignable to type ‘UserModel’. Where UserModel is:
Continue readingtwo method make it in one single method – angular
Issue As I have two methods I want to make it one single method. For example I have two color palates one is for background color change and another one is for shape color. What I am thinking is instead
Continue readingAngular Form dynamic field
Issue I am wondering how to make an angular form with a dynamic step. I have the following form (TS) : this.registerForm = new FormGroup({ role: new FormControl(”, [ Validators.required, ]), firstName: new FormControl(”, [ Validators.required, Validators.minLength(2), Validators.maxLength(20), ]), lastName:
Continue readinggetting error as Cannot read property 'key' of undefined angular
Issue I am getting error for my below code error TypeError: Cannot read property ‘key’ of undefined at EditorComponent.push.xD4D.EditorComponent.setFillColor (editor.component.ts:634) ts setFillColor(swatch: any): void { this.palettes.selected = swatch; this.props.fill = swatch.key; this.setFill(); if (!this.props.canvasImage) { console.log(‘say hi’) this.canvas.backgroundColor = this.props.canvasFill;
Continue readingIs there any way of removing header from SSR page serverApp-state before it is inserted in HTLM using Angular?
Issue I need to remove specific header (Date) from the Angular Universal SSR page, so that final HTML won’t have this value in file. Considering that I cannot remove this header from API server response, is there any way to
Continue readingAngulare Fire, extending AuthGuard and redirect url
Issue Anguar Fire comes with an own set of guards (AngularFireAuthGuard): https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md However, when using them I can no longer store the redirect url. Storing the redirect url within the Auth Guard is incredibly handy, as you can simply use
Continue readingSubscribing to authState changes in Angular Fire
Issue Currently I listen to auth state changes in my ngOninit of my AppComponent: export class AppComponent implements OnInit { constructor(public fireAuth: AngularFireAuth) { } ngOnInit(): void { this.fireAuth.authState.subscribe(user => { if (user) { //logged in logic } else {
Continue readingAngular 11 with rxjs issue – TS2769: No overload matches this call
Issue I would like to subscribe to NavigationEnd events in Angular 11, while using filter from rxjs. The part of subscribe((event: NavigationEnd) … causes the following issue Current solution: TS2769: No overload matches this call. Overload 1 of 5, ‘(observer?:
Continue readingWhat is the best approach to implement multi language app using angular and yii2
Issue I’m using yii2 restful api for the backend, and angular for the frontend. I want to ask about the best approach to implement multi-language feature that can manages both frontend an backend in the same place (db table, file).
Continue readingFailed to execute 'setAttribute' on 'Element': Angular 11
Issue I’m getting following error in my new Angular 11 app. Could not found any syntax errors. core.js:6156 ERROR DOMException: Failed to execute ‘setAttribute’ on ‘Element’: ‘ng-reflect-Dev Portal’ is not a valid attribute name. at EmulatedEncapsulationDomRenderer2.setAttribute (http://localhost:8080/admin/vendor.js:62217:16) at setNgReflectProperty (http://localhost:8080/admin/vendor.js:38053:26)
Continue readingHow to create folder structure for modules in angular10
Issue I have two modules like education and transport. I want to create modules and components for these. How to create a perfect folder structure for these. If anyone knows please help. education ->school –> 1std component –> 2std component
Continue readingAngular IE11 file upload Cancel event
Issue We have an application where we need to support IE11 with file upload functionality. The version of angular is Angular 11. There is file upload control, which is working fine in all browsers except IE11 where we are having
Continue readingionic 5 unit test with popover controller
Issue I am trying to spy popover present method in my ionic 5 / angular 11 project but getting an error Unhandled Promise rejection: Cannot read property ‘then’ of undefined Here is unit test code describe(‘LoginPage’, () => { let
Continue readingWhere to initialise a FormGroup in Reactive forms?
Issue Using Angular 11 with Typescript 4 in Strict Mode I have: export class ContactComponent implements OnInit { form: FormGroup; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.form = this.formBuilder.group({ email: [”, [Validators.required, Validators.email]], name: [”, [Validators.required, Validators.maxLength(40)]], }); }
Continue readingHow to initialise an empty ComponentRef?
Issue Using Angular 11 and Typescript Strict mode I have: export class ModalService { renderer: Renderer2; component?: ComponentRef<any>; element: HTMLElement | null; modal: HTMLDivElement; constructor(private componentFactoryResolver: ComponentFactoryResolver, private application: ApplicationRef, private rendererFactory: RendererFactory2, private popupService: PopupService) { this.renderer = rendererFactory.createRenderer(null,
Continue readingAngular 11 wait until subscribe finishes getting data
Issue I have a auth.service and data.service. auth.service getting data from data.service but it checks before data arrives. So it returns undefined. auth.service getting data like this; get isLoggedIn(): boolean { const user = JSON.parse(localStorage.getItem(‘user’)); const emailVerify = this.dataservice.userStatService(user.uid); console.warn(emailVerify)
Continue readingprimeNg : get value of all the p-dropdown on change event of one drop down
Issue I have a situation were on my html page is have 5 primeNg p-dropdown and I want to read the values of all the 5 dropdown on change event of any of the p-dropdown so that I can apply
Continue readingSelect items per page into Angular and send param to Spring
Issue I’m trying to implement Spring pagination with Angular. I tried this code: Search DTO: public class ClassCategoriesSearchParams { private String title; private String type; private LocalDateTime publishedAt; } Endpoint: @PostMapping("/find") public Page<ClassCategoriesFullDTO> search(@Valid ClassCategoriesSearchParams params, Pageable pageable) { Page<ClassCategoriesFullDTO>
Continue readingIn angular 11 material UI I am getting error TS2531: Object is possibly 'null' in my html template
Issue I am using material UI and reactive form. My application is running properly and I am able to login but in my terminal window i am getting error TS2531: Object is possibly ‘null’. I have attache the error screen
Continue readingwhen i use router.getCurrentNavigation() inside ngOnInit() it gives me type error but when i use it inside constructor it works fine, why?
Issue Starter – export class HeaderComponent implements OnInit { constructor(private route: ActivatedRoute, private router: Router) {} onClick() { const navigationExtras: NavigationExtras = { state: { transd: ‘TRANS001’, workQueue: false, services: 10, code: ‘003’, }, }; this.router.navigate([‘/auth’], navigationExtras); } } AuthComponent
Continue readingIn Typescript, how do I convert a string of strings as an array of strings?
Issue Probably similar to other questions. My example string looks like this: "[‘one’, ‘two’, ‘three’]" Can I do it without resorting to Regex or so? Thanks! Solution your example string is almost valid JSON, so smth like playground Answered By
Continue readingUnable to patch the state with update to the store using NGXS. I keep seeing type error: cannot freeze
Issue I’m working with a basic Angular 11 application which has authentication implemented (using AWS Cognito & Amplify). What I’m trying to do here is quite simple. I am using builtin AWS Amplify methods to do the authentication. I am
Continue readingBrowser sees old version of Angular app after new version is deployed, even after clearing cache
Issue I have an Angular 11 app that I’m building for deployment in production with the following commands: npm install npm run build — –prod –outputHashing=all The problem I am having is that, once deployed, when I go the app’s
Continue readingHow to implement search functionality in multi select drop down of angular material
Issue I am working on a project where I need to implement search with multi select drop down. When I added below code, I am able to search but my previously selected value is disappearing after new search. Below is
Continue readingHow can I separate components within the same html in Angular material?
Issue I have a project in Angular material in which I have a component.html in which I define a form and a table with data. In my project (first image) I have the title of the tab, a form to
Continue readingCould not find my typescript property under the interface folder in the component.ts file
Issue My code is something like that:- I am creating an book.ts(property) under the interface folder, I am here created a book.ts file.but my book.component.ts doesn’t find my book.ts property.but if I using an interface(book.ts) in the book.component.ts. then it’s
Continue readingWhy is the property added outside his parent in Object?
Issue I have an Interface declared like this: Sejour.ts import { SejourItem } from ‘./SejourItem’; export interface Sejour { dsAdvSejour: DsAdvSejour; } interface DsAdvSejour { ‘prods:hasChanges’: any; ttSejour: SejourItem[]; ‘prods:before’: any; } which contains an Array of SejourItem : SejourItem.ts
Continue readingAngular Material UI Error in MatSidenav : Cannot set property 'fixedTopGap' of undefined
Issue I was trying to create an angular material toolbar and sidenav using Angular 11.But when i try to set the property of sidenav as shown below, its giving the following error in. console, and it is causing the first
Continue reading