By Fahad Subzwari
PublishedCategorized as angular, mdbootstrap
Mdbootstrap5(v12.1.0) is not working in my angular12 project
I have installed mdbootstrap5 using ng add angular-bootstrap-md in my angular12 project. package.json { "name": "client", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build –watch –configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "~12.0.0", "@angular/cdk": "^9.0.0", "@angular/common": "~12.0.0", "@angular/compiler": "~12.0.0", "@angular/core": "~12.0.0", "@angular/forms": "~12.0.0", "@angular/platform-browser": […]
Why i am getting can’t find module "typescript" when creating an application inside nx workspace in angular?
I have created an nx workspace which is successfully generated. Now i am generating a micro-front-end app inside that nx workspace using this command npx nx g @nrwl/angular:app opShell –mfe –mfeType=host –routing=true So i am getting this error Cannot find module ‘typescript’ Require stack: – D:[email protected][email protected] – D:[email protected][email protected] – D:[email protected][email protected] – D:[email protected]ication.js – D:[email protected] – […]
By Fahad Subzwari
PublishedCategorized as angular, micro-frontend, nomachine-nx
Why my global loader interceptor is not working correctly in angular12?
I have an interceptor whose job is just to show loader when http request starts and hide when http request ends. So for that I tried this so far loader.interceptor.ts @Injectable({ providedIn: ‘root’ }) export class LoaderInterceptor implements HttpInterceptor { constructor(private _us: UtilService) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { this._us.showLoader(); return next.handle(req).pipe( finalize(() […]
By Fahad Subzwari
PublishedCategorized as angular, typescript
Angular app apis get blocked by netlify hosting?
I have an angular12 app which was hosted on netlify and it was working fine. Just from today morning it stopped working and giving this error Mixed Content: The page at ‘https://gallant-rosalind-f69832.netlify.app/login’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://my.url.com/api/Account/Login’. This request has been blocked; the content must be served over HTTPS. […]
By Fahad Subzwari
PublishedWhy angular material datepicker is showing behind the modal and in inappropriate way in angular12?
I just installed latest material in my angular12 app in which i have to display datepicker on the field which is inside of modal. component.html <div class="form-group"> <label for="">DOB</label> <input type="text" class="form-control" [matDatepicker]="picker" (click)="picker.open()"> <mat-datepicker #picker></mat-datepicker> </div> style.scss @import ‘[email protected]/material/prebuilt-themes/indigo-pink.css’; ::ng-deep .cdk-overlay-container mat-datepicker-content{ z-index:20000 !important; } But the problem is that when modal is opened […]
By Fahad Subzwari
PublishedCategorized as angular, angular-material
Why Lazy load routing is not working in angular12?
I have modules which i want to lazy load. But when i defining their lazy load routes so these routes are not working and not loading in browser. When i try to navigate to their route by browser so it takes me to dashboard every time. app-module.routing.ts import { NgModule } from ‘@angular/core’; import { […]
By Fahad Subzwari
PublishedCategorized as angular, angular-routing
How to focus next input when limit reaches but if input is nested within Html li tag in angular?
I have my 6 inputs beside each other in one row like this component.html <li *ngFor="let i of [1,2,3,4,5,6]"> <input class="form-control" placeholder="0" type="text" maxlength="1" (keyup)="onDigitInput($event)"> Now i tried this in my controller to focus next input element when maximum length limit reaches automatically. onDigitInput(event: any) { let element; if (event.code !== ‘Backspace’) element = event.srcElement.nextElementSibling; […]
By Fahad Subzwari
PublishedCategorized as angular, typescript
How to toggle Admin LTE 3 sidebar manually in angular12?
I have implemented Admin LTE 3 theme in my project and implemented. layout.html <div class="wrapper w-100"> <!– Navbar –> <app-header></app-header> <!– /.navbar –> <!– Main Sidebar Container –> <app-sidebar></app-sidebar> <!– Content Wrapper. Contains page content –> <div class="content-wrapper"> <router-outlet></router-outlet> </div> <!– /.content-wrapper –> <!– Control Sidebar –> <app-control-sidebar></app-control-sidebar> <!– /.control-sidebar –> <!– Main Footer –> […]
By Fahad Subzwari
PublishedCategorized as angular, typescript
Why ngx-doc-viewer is not displaying pdf file(file is on local disk) in angular10?
In my angular10 in which i have to display a PDF file as a preview. So for that i am using ngx-doc-viewer. My component is look like this component.html <ngx-doc-viewer [url]="inputFile.filePath" viewer="google" style="width:100%;height:80vh"> </ngx-doc-viewer> my url is forming like this http://localhost:PORT/documents/bids/bidId704/proposalDoc_Monday_June_28th_2021_8_49_01_PM.pdf When i load just this url so that it loads PDF file in chrome […]
By Fahad Subzwari
PublishedCategorized as angular, typescript
Is it possible to assign formControlName dynamiclally based on api response in angular10?
I have an angular reactive form in which i have a scenario in which i have to assign formControlName conditionally based on api response. I have form field like this <input type="number" min="0" [formControlName]="amountControl" class="form-control" placeholder="Bid Amount"> component.ts ngOnInit(){ getApiData() } getApiData(){ // all code goes here. this.masterObj.paymentTerms = response.paymentTerms; } get amountControl(): string { […]
By Fahad Subzwari
PublishedCategorized as angular, angular-reactive-forms
