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": […]

By Fahad Subzwari
Published
Categorized as angular, mdbootstrap Tagged ,

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] – […]

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
Published
Categorized as angular, typescript Tagged ,

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
Published
Categorized as angular, netlify Tagged ,

Why 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
Published
Categorized as angular, angular-material Tagged ,

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
Published
Categorized as angular, angular-routing Tagged ,

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
Published
Categorized as angular, typescript Tagged ,

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
Published
Categorized as angular, typescript Tagged ,

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
Published
Categorized as angular, typescript Tagged ,

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 { […]

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq