Angular ngClass not working when using enum values

Issue I am using Angular 7. I got this HTML: <section class=”carddiv”> <section class=”gameMessages”> <p [ngClass] =”{‘messageMiddleOfGameNoPairs’ : gameModeVar === GameMode.NONE_SELECTED || gameModeVar === GameMode.ONE_SELECTED, ‘messageSuccess’ : gameModeVar === GameMode.TWO_SELECTED_SUCCESS || gameModeVar === GameMode.GAME_OVER, ‘messageFailure’ : gameModeVar === GameMode.TWO_SELECTED_FAILURE}”> {{currentMoveMessage}}

Continue reading

Angular 7 – ng build –prod TypeError: Cannot read property '1' of undefined

Issue When build my Angular project for production ng buid –prod I am getting the following error: 10% building modules 3/4 modules 1 active …/client/src/styles.sass/media/client/node_modules/clean-css/lib/optimizer/level-1/optimize.js:429 context.warnings.push(‘Invalid value token at ‘ + formatPosition(value[0][1][2][0]) + ‘. Ignoring.’); TypeError: Cannot read property ‘1’

Continue reading

Angular build for production fails

Issue When I try to build for production my angular application with the following command ng build –prod –build-optimizer I get the following output: Date: 2019-01-29T08:39:12.193Z Hash: 05648c76cf91b1245f68 Time: 27920ms chunk {0} runtime.1eee2a92f0ed121267d0.js (runtime) 2.22 kB [entry] [rendered] chunk {1}

Continue reading

Why my min and max validation is not firing?

Issue I have the template like below: <form class="form" [formGroup]="configWeightage"> <div class="example-container"> Enter value in between 0 to 100 <mat-form-field> <input matInput type="number" min="0" max="100" class="example-right-align" [formControlName]="weightageValue" id="weightage" required /> </mat-form-field> <mat-error *ngIf="weightageValue.hasError(‘min(0)’)" style="color: red" >Please enter greater than 0</mat-error

Continue reading

*cdkVirtualFor is not working in my application, it's in Angular 7.2.0

Issue <ul class=”list”> <cdk-virtual-scroll-viewport style=”height: 500px” itemSize=”90″ > <div *ngFor=”let n of numbers” style=”height:130px;”>{{n}}</div> </cdk-virtual-scroll-viewport> </ul> <!–app.module.ts–> import { ScrollingModule } from ‘@angular/cdk/scrolling’; @NgModule({ imports: [ ScrollingModule ] }) <!–app.component.ts–> import { Component } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl:

Continue reading

Form validation error message in angular 2

Issue Custom input box validation error message not working in angular2 and required also not working.How to resolve this issue.Anyone know please help me. Demo:https://stackblitz.com/edit/angular-7-template-driven-form-validation-kkqcwh?file=app%2Fapp.component.html <div class=”form-group”> <label for=”firstName”>First Name</label> <app-textbox type=”text” name=”firstName” [(ngModel)]=”model.firstName” [(inputModel)]=”model.firstName” #firstName=”ngModel” required></app-textbox> <div *ngIf=”f.submitted &&

Continue reading

How to validate custom input textbox in angular 7

Issue I am trying to show template driven validate error message for custom textbox in angular 7 but not working.Anyone can find the issue?how to resolve this issue? Demo:https://stackblitz.com/edit/angular-7-template-driven-form-validation-yzcwqc?file=app%2Fapp.component.html app.component.html: <div class=”form-group”> <label for=”firstName”>First Name</label> <app-textbox type=”text” name=”firstName” [(ngModel)]=”model.firstName” #firstName=”ngModel”

Continue reading

How to get access to child component object in Angular

Issue I have parent component id=”componentOne” where is included another child component <app-buttons>: <div id=”componentOne”> <app-buttons [component]=”‘WeeklyScheduleComponent'” [buttonTypes]=”[‘add’, ‘filter’]” [position]=”‘right-bottom'” ></app-buttons> </div> Inside component app-buttons there is: ngOnInit() { this.buttonUsage = new ButtonUsage(this.component, this.buttonTypes); } So, how to get access

Continue reading

Two ngcontent on a Angular component

Issue I created a Tabs component (https://stackblitz.com/edit/angulartabs) used as follows: <tabs> <tab title=”tab 1″>Content 1</tab> <tab title=”tab 2″ active=”true”>Content 2</tab> </tabs> The Tabs Component HTML is as follows: <div class=”head”> <ul class=”tabs”> <li *ngFor=”let tab of tabs” (click)=”select(tab)” class=”tab” [class.active]=”tab.active”>

Continue reading

Uncaught ReferenceError: for onclick

Issue I am getting the Uncaught ReferenceError: for onclick event handler <ng-conatiner *ngIf=”x else y” > <div onclick=”x()”> {{x.getText()}} </div> </ng-conatiner> <ng-template #y> <div>{{y.getText()}}</div> </ng-template> export class A implements OnInit { ngOnInit() { console.log(“in ngOnInit”); } x(){ console.log(“clicked”); } }

Continue reading

Angular. Url changes without redirect (angular material)

Issue I am implementing the user interface for the web api project. I have a table which displays companies from api request with help of angular material: <div class=”example-container mat-elevation-z8″> <div class=”example-loading-shade” *ngIf=”isLoadingResults”> <mat-spinner *ngIf=”isLoadingResults”></mat-spinner> </div> <div class=”mat-elevation-z8″> <table mat-table

Continue reading

Error while compiling angular project in module class

Issue My app.module.ts class is: import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { FormsModule } from ‘@angular/forms’; import { HttpClientModule, HTTP_INTERCEPTORS} from ‘@angular/common/http’; import { AppRoutingModule } from ‘./app-routing.module’; import { AppComponent } from

Continue reading

mat-select returns undefined on SelectionChange()

Issue I have mat-select on (selectionChange) event I’m receiving undefined as a value of $event.value. It returns correct value for first mat-option.mat-option with value ‘All’ it gives undefined <mat-form-field> <mat-select [(value)]=”regionOption” (selectionChange)=”regionSelectionChange($event)” placeholder=”Region”> <mat-option *ngFor=”let region of regions” [value]=”region.location_name”>{{region.location_name}}</mat-option> <mat-option

Continue reading

Angular 7 and IE

Issue I’m getting this error in IE 11 when viewing the angular app SCRIPT445: Object doesn’t support this action zone.js (199,1) if (this._zoneDelegate.handleError(this, error)) { throw error; } Using Angluar Core 7.2.15 and my polyfills I use import ‘core-js/es6/symbol’; import

Continue reading

Import excel in angular 7 and save into database using node js

Issue I have a page to uploaded excel <div class=”form-group”> <label>Select file to upload.</label> <input type=”file” class=”form-control” (change)=”onFileChange($event);”> </div> <button type=”button” (click)=”Upload()” class=”btn btn-success pull-right”><i class=”fa fa-save fa-fw”></i> Upload File</button> Below is my upload() function and onFileChange() in component.ts onFileChange(event)

Continue reading

Conditionally change date format of owl-date-time picker in angular

Issue I using owlDateTime(https://daniel-projects.firebaseapp.com/owlng/date-time-picker) picker in may project. After date selected it shows the mm/dd/yyyy format but I want to change this format to dd/mm/yyyy conditionally. bellow are my code .component.html <input [max]=”max” [owlDateTimeTrigger]=”dt_date_time” [owlDateTime]=”dt_date_time” formControlName=”date_time” id=”date_time” type=”text” class=”form-control date-picker

Continue reading