TypeError: this.restoreDialogRef.afterClosed is not a function

Issue I am getting the following error Should open confirmation dialog ConfigurationRestoreComponent TypeError: restoreDialogRef.afterClosed is not a function at ConfigurationRestoreComponent.openConfirmationDialog (main.js:16303:22) at ts file looks like follows openConfirmationDialog() { const restoreDialogRef = this.dialog.open(RestoreConfirmationComponent, { restoreFocus: false, width: ‘37.5rem’, }); const

Continue reading

How to reset form after submit using angular?

Issue signup.component.html <form (ngSubmit)="submitSignup()" #signupForm="ngForm"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name" [(ngModel)]="form.name" [ngModelOptions]="{standalone: true}" required> <small class="text-danger" [hidden]="!error.name"> {{error.name}} </small> </div> <div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" name="email" [(ngModel)]="form.email" [ngModelOptions]="{standalone: true}" required> <small class="text-danger"

Continue reading

How to disable submit button until form is valid in angular 12?

Issue login.component.html <form (ngSubmit)="submitLogin()" #loginForm="ngForm"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="email" name="email" [(ngModel)]="form.email" [ngModelOptions]="{standalone: true}" required> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="password" name="password" [(ngModel)]="form.password" [ngModelOptions]="{standalone: true}" required> </div> <button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid">Submit</button> </form>

Continue reading

Error on validating JWT token IDX12741. JWT: must have three segments (JWS) or five segments (JWE)

Issue I’m trying to implement token refresh feature in angular 12 and .net core 5. this is my JWT service registration: startup.cs: services.AddAuthentication(options => { options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme; options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme; options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme; }).AddJwtBearer(options => { options.SaveToken = true;

Continue reading

How to Subscribe to some event of component using a Directive

Issue This is my components Pagination. <pagination [boundaryLinks]="true" [(ngModel)]="currentPage" [totalItems]="100" previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" (pageChanged)="pageChanged($event)" [maxSize]="5" my-pagination="tableTwo" ></pagination> And this is my Directive @Directive ({ selector: "pagination[my-pagination]" }) export class MyPagination { constructor( private el: ElementRef){ console.log(this.el.nativeElement.getAttribute(‘my-pagination’)) } ngOnInit(){ }

Continue reading

Angular/TypeScript treats array as object and throws an Error: Cannot find a differ supporting object

Issue My code is the following in my component, I defined this: public outputFormats = ["pdf", "png32", "png8", "jpg", "gif", "eps", "svg"]; In my template: <div ngbDropdownMenu aria-labelledby="polylineStyleDropdown"> <button class="dropdown-item" *ngFor="let format of outputFormats" (click)="onOutputFormatChanged(format)">{{format}} </button> </div> But I get

Continue reading

Angular Form onSubmit() is called by other button

Issue I am doing an Angular 12 Material App. I have a simple Form like this <form [formGroup]="form" class="normal-form" (ngSubmit)="onSubmit()"> <mat-grid-list cols="2" rowHeight="300px"> <mat-grid-tile> <div class="controles-container"> <input type="hidden" formControlName="Id"> <mat-label><strong>Active</strong></mat-label> <mat-slide-toggle formControlName="IsActive" [checked]="checked"> </mat-slide-toggle> <textarea matInput hidden></textarea> <mat-form-field> <input formControlName="Name"

Continue reading

ng serve "Cannot GET /"

Issue After upgrade to Angular 12, i can not serve the dev server on localhost:4200. There are only one error if i run ng serve: Error: /var/www/html/stuff2angular/assets/css/style.scss:10:32: Unknown word You tried to parse SCSS with the standard CSS parser; try

Continue reading

compilation.errors.push(new webpack_1.WebpackError(message))

Issue After upgrade to Angular12 facing an issue like compilation.errors.push(new webpack_1.WebpackError(message)); Inside node_modules@ngtools\webpack\src\webpack-diagnostics.js:17 TypeError: webpack_1.WebpackError is not a constructor at Object.addError (\node_modules@ngtools\webpack\src\webpack-diagnostics.js:17:29)) at \node_modules@ngtools\webpack\src\ivy\diagnostics.js:19:39 at AngularWebpackPlugin.updateAotProgram(\node_modules@ngtools\webpack\src\ivy\plugin.js:342:17) Solution I had the same issue and found out that the peer dependency of

Continue reading

Change label background of selected radio in Angular 12

Issue Whats the best approach to detect which radio has been selected in the following example? <label for="apple"> <input id="apple" type="radio" name="fruits" value="apple" class=""/> <span>Apple </span> <SomeComponent> </label> <label for="mango"> <input id="mango" type="radio" name="fruits" value="apple" class=""/> <span>Mango </span> <AnotherComponent> </label>

Continue reading

Convert Array to Interface Array

Issue On an Angular 12 application I have the following environment: export const environment = { production: false, applications: [ { name: "Api", url: "https://localhost:5001" }, { name: "Bot", url: "https://localhost:5003"} ], } And I create an Application interface and

Continue reading

Angular: Problem accessing array of objects in *ngFor loop while string interpolation displays data in html but with error ctx is undefined in console

Issue .HTML FILE <span class="total">Available Vaccines:</span> {{ vaccinationData?.sessions[0]?.center_id}} // This displays data on html with //ctx.vaccinationData.sessions is undefined <ng-container *ngFor="let data of vaccinationData.sessions" > <!– This does not loop –> <mat-card class="card"> <mat-card-header> <!– <mat-card-title>{{ data?.center_id }}</mat-card-title> <mat-card-subtitle>{{ data?.address }}</mat-card-subtitle>

Continue reading

Angular12 – Issues in bootstrap dropdown

Issue I am trying this sample bootstrap dropdown code. There is no error but my dropdown is not working I have installed jquery-popper, jquery and bootstrap 5 <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria- expanded="false"> Dropdown button

Continue reading

Reflect-metadata errors after upgrade to angular 12

Issue Angular 12 autoupdate removes "emitDecoratorMetadata": true property from tsconfig.json and dev-version (ng serve) of app has error: ERROR Error: Uncaught (in promise): TypeError: can’t access property "name", d is undefined at vendor.js file at this place: … d=Reflect.getMetadata("design:type",e,r),v=!!d.name&&d.name.toLowerCase()===t.Array …

Continue reading

Change route inside component according to its state. Is this possible?

Issue On an Angular 12 application I have the following component: export class SignUpComponent implements OnInit { form: FormGroup; result: boolean; constructor(private formBuilder: FormBuilder, private userService: UserService) { this.form = this.formBuilder.group({ email: [”, [Validators.required, Validators.email]], password: [”, [Validators.required, Validators.minLength(8)]], });

Continue reading

How to Create Date Count timer selecting date from the date picker input and show the difference of selected date to current date

Issue ** This is My Typescript file ** import { Component, OnInit } from ‘@angular/core’; import { interval, Subscription } from ‘rxjs’; @Component({ selector: ‘app-timer-app’, templateUrl: ‘./timer-app.component.html’, styleUrls: [‘./timer-app.component.css’] }) export class TimerAppComponent implements OnInit { model = new Date()

Continue reading

can't run ng serve in development mode

Issue I can’t run ng servein development mode. I’ve upgraded Angular v11 to v12. Since then, I have compiling delays and development mode appears to not be enabled. I’m always getting this warning: **************************************************************************************** This is a simple server for

Continue reading

Angular CityList With CountryName

Issue In myI have cities withidandnameandcounteyidand countries withidandnamehow to iterate thisresponse.valueto get a list havingcityid,name,countryid`? Solution you can use map function I guess, here some example with your code. I extend your list like that and result shown below const

Continue reading

Angular12/rxjs: updating observable data in template and showing changes in template

Issue So I have a livesearch going, fetching data based on the user input. Example: export class MyComponent implements OnInit { constructor(private httpHandler: HttpHandlerService) { } defaultSearchParams: SearchParams = { search: ‘bla’ } searchParams = new BehaviorSubject<SearchParams>(this.defaultSearchParams); myData$?: Observable<PageObjects<MyDataObject>>; ngOnInit():

Continue reading