Issue I want to organise my all tabs components dynamic components. I am using primg ng for ui tabs. Currently my code is allTabs.component.html Before <p-tabPanel header=”Contracts”> <app-a [arrId]=’parrangementId’ *ngIf=”tabIndex==1″></app-a> </p-tabPanel> <p-tabPanel header=”Allocations”> <app-b [arrId]=’parrangementId’ *ngIf=”tabIndex==2″></app-b> </p-tabPanel> </p-tabView> Here each
Continue readingTag: angular7
Accessing formgroup in custom validator
Issue I’m trying to add custom validator to my component.ts customvalidatorFile: import { FormGroup, ValidationErrors } from ‘@angular/forms’; export class ProfileCustomValidators { static validateTime(fg: FormGroup): ValidationErrors { const staffForm = fg.get(‘staffForm’) const fromTime = staffForm.get(‘fromTime’).value; const toTime = staffForm.get(‘toTime’).value; if(fromTime
Continue readingHow to make asyn false like ajax in angular 7
Issue In my project, i have a full calendar with loading events dynamically from database. When i try to add events into the calendar.But it did not works for me because of httpget method synchronize problem i think. I cannot
Continue readingDelete empty row created by subscription to service on ngOnInit()
Issue I have a Material Data table, which the user can fill and empty by himself. The data, which gets into the table gets triggered by a service, which I initialized in the table component with ngOnInit(). Code: ngOnInit() {
Continue readingDelete empty row created by subscription to service on ngOnInit()
Issue I have a Material Data table, which the user can fill and empty by himself. The data, which gets into the table gets triggered by a service, which I initialized in the table component with ngOnInit(). Code: ngOnInit() {
Continue readingSubject not triggering when being called from parent component in ngOnInit
Issue I’m using Rxjs and Angular 7. I have a parent component and a child component. I have a method to invoke a Subject on my child component: updateSubject(text: string) { this.subject$.next(text); } And I’m calling this from my parent
Continue readingOnly getting the URL in the console.log() when I fetch API
Issue I am getting this in console.log(arrayCalendar) where I am expecting it to return JSON data! This console.log shows like this one! This is coming from the api! { “_isScalar”: false, “source”: { “_isScalar”: false, “source”: { “_isScalar”: false, “source”:
Continue reading`Can't bind to 'eventList' since it isn't a known property of 'header-nav'.`
Issue I am getting above error on async value added with my template. how to fix this for pass out my testing? here is the template: <header-nav [eventList]=”eventList$ | async” [eventListSize]=”(eventList$ | async).length” (selectedEvent)=”eventSelected($event)” (setLang)=”langChanged($event)” [currentLang]=”currentLang$ | async” [langList] =
Continue readingAngular material datatable checkbox keep value in array when Select all or select single item and remove if unselect
Issue When user select master checkbox all values must be push to array. Value must splice from array when user unselect specific checkbox and push again to array if select again. Here is my sample code in stackblitz. Thank you
Continue readingAngular Datatable not able to assign the data from variable
Issue i am trying to assign data to dtOptions – but not works. what is the correct way to do it? here is my function: getDatas(){ this.datas = this.http.get(‘data/data.json’).subscribe(values => values);//values available here } ngOnInit() { this.categoryListCopy = this.categoryList; this.getDatas()
Continue readingAngular Datatable not able to assign the data from variable
Issue i am trying to assign data to dtOptions – but not works. what is the correct way to do it? here is my function: getDatas(){ this.datas = this.http.get(‘data/data.json’).subscribe(values => values);//values available here } ngOnInit() { this.categoryListCopy = this.categoryList; this.getDatas()
Continue readingHow to set row id in Angular-7 data-table?
Issue I’m using the angular 7 and I can’t seem to find where you set the id for the rows (row id, not whole table id). Overall, it seems a bit odd, as it works with , rather than rows.
Continue readingERROR TypeError: "_co.bankId is undefined" (Angular 7)
Issue I have a subproject in my angular app. In this subproject I want to create a form with input fields. These fields need a validation and need to show an error optionally, if the field is invalid (e.g. required).
Continue readingHow to set "At least one field should be filled out" validation in Angular 7 with reactive forms?
Issue I have one reactive form in angular 7 which has three fields email, phone and pager. My requirement is that at least one of them should be filled out by user otherwise we should throw error like this “Please
Continue readingChange the colour of printed value in angular 7
Issue I am trying to call an API and display the json in my front end. I wanted to change the color of a particular value called {{status}}. When the status is available i want it as green, and when
Continue readingAngular 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 readingAngular 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 readingCan't configure ngx-ui-loader from app.module.ts file
Issue I am using the ngx ui loader for my angular 7 project. In the app.module.ts file, I have imported the ngx-ui-loader package like this:- import { NgxUiLoaderModule, NgxUiLoaderHttpModule, NgxUiLoaderConfig, SPINNER, POSITION, PB_DIRECTION } from ‘ngx-ui-loader’; Then I created a
Continue readinghow to deny the route to switch until has data in store with ngrx and resolve?
Issue i want to deny the user from getting to route until i have data in my store. i tried with resolver but it still go to the route and im getting an error because im using this data in
Continue readingangular 7 is blocked when save
Issue I’m with version 7 of angular and from time to time, the compiler is “stuck” and I have to close the terminal and reopen it (no matter time you expect). Do you know if it has a solution? I
Continue readingConditional script inclusion depending environment
Issue I would like to know if there is a way to configure the scripts section of the angular.json file depending on the environment. I would like to include a specific script(Myscript.js) only when I’m in the production environment. “scripts”:
Continue readingWhat are the possible causes for my application having slow built on ng serve?
Issue I am having a very slow compiling and outputting result on changes. My current ng serve runs an update after a simple text change in a file in around 20 seconds. (Actually compilation time is short, within 3 –
Continue readingAngular 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 readingThe serve command required to be run in an Angular project, but a project definition could not be found
Issue I downloaded Angular Formio project. The project is in angular 6 version. I want to completely migrate this project into angular version 7 and use this features in my project which is on angular version 7. but before I
Continue readingAngular 7 Jasmine and Restangular: Cannot get proper testing module configuration
Issue Given, a front-end component which imports RestAngular, declares it in CTOR and uses it in ngOnInit as shown here: import { Restangular } from ‘ngx-restangular’ constructor( private Restangular: Restangular, private ChangeDetectorRef: ChangeDetectorRef, ) { } ngOnInit() { this.Restangular.all(“Person”) .all(“Kind”)
Continue readingGet data from another component in the route tree
Issue For example you have the components A, B and C and this route direction: A -> B -> C I can retrieve data from the previous component (got to C and get data from B) with these lines: Component
Continue readingAngular 7, Enum and Input property binding
Issue The issue is when binding an enum with a view template using @Input, the enum is being resolved to undefined. The component: enum FormAction { Insert, Update } @Component({ selector: ‘app-member-editor’, }) export class MemberEditorComponent implements OnInit { modes
Continue readingWhat can be used instead of $sce in angular 7?
Issue We were using $sce in angular 1 to show html tags like this > <p><strong>xyzz</strong> yttryrtyt <span > style=”color:#e74c3c”>abc</span>.</p> in user readable form. What is substitute for same in Angular 7. Can anybody answer this and how to use
Continue readingError NativeScript- empty app is shown instead of content
Issue I created a web app with Angular v7 and now I want to migrate my web app to a NativeScript mobile app. I followed the instruction from the official site of NativeScript and everything worked perfectly until I adjusted
Continue readingHow to attach input filed to another in Angular 2 only if it's pristine?
Issue I have two input fields: <input type=”text” [(ngModel)]=”title” name=”title”> <input type=”text” [(ngModel)]=”og_title” name=”og_title” value=”{{ title }}”> I want to make the og_title field to equal to title until og_title is pristine. How can I do this in Angular 2
Continue readingHow to programmatically scroll to the end of scroll-viewport?
Issue I would like to scroll programmatically to the end of a the cdk-virtual-scroll-viewports after adding new elements. I am trying to use the method: this.viewport.scrollToIndex(…); but it does not seem to work as expected: https://stackblitz.com/edit/angular7-virtual-scroll-oqrbjv What am I doing
Continue readingangular 7 does not ask if to use routing when i create a new project
Issue I was formerly using Angular version 6, now I have upgraded to 7. But when I try to create a new project in CLI using ng new [app-name] it just starts without asking if I want to include routing
Continue readingAngular SSR First Paint appears after styles.css being loaded
Issue I implemented angular universal for my app and served it on a server. But after index.html was loaded browser didn’t display any content until styles.css being downloaded. index.html from server contains required HTML and styles. On the screenshot you
Continue readingAngular 7 ERROR in node_modules/graphql-tag/lib/index.d.ts(2,57): error TS1005: ',' expected
Issue Hi I am facing issue while running ng serve command. My package.json file is { "name": "Myapp", "version": "7.0.0", "scripts": { "ng": "ng", "local-dev": "ng serve –progress –port 4200", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },
Continue readingupdate value in subscription
Issue I have a service periodical api call that changes the url if this is the first time it’s called. It has a interval subscription for generating api call, I can’t use a global variable because it’s a service that
Continue readingAngular Material Snackbar not shown correctly
Issue Stackblitz example Hi community I implemented a global error handler and a global loading component (angular material spinner) to my angular 7 project. When detecting a HttpErrorResponse the loader should be removed and an angular material snackbar should be
Continue readingAngular Material Snackbar not shown correctly
Issue Stackblitz example Hi community I implemented a global error handler and a global loading component (angular material spinner) to my angular 7 project. When detecting a HttpErrorResponse the loader should be removed and an angular material snackbar should be
Continue readingupdate value in subscription
Issue I have a service periodical api call that changes the url if this is the first time it’s called. It has a interval subscription for generating api call, I can’t use a global variable because it’s a service that
Continue readingWhy does Angular httpClient returns an Observable instead of a Promise?
Issue I made a spring reactive backend which returns Flux<> object. When I call the service with angular httpClient and subscribe to the observable returned. The result is never triggered. So why Observable is returned rather than a Promise if
Continue readingWhy 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 readingHow to submit reactive form with input type as a File with data for that file?
Issue I need to save a CSV files’ content in my Reactive Form as an input value for the Form Control. Currently only file name is selected by default and I need to save File data for that Form Control
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 readingRouting for Angular with common layout for some feature modules
Issue I have an Angular 7 app with 3 user roles, A, B & C. A & B share the same visual layout but the menu items change (theme and structure are the same, data is different). C has a
Continue readingHow to pass data from component to ngBootstrap modal in Angular 7?
Issue I have a table with data displayed using ngFor. I need to display an individual row data in a modal on click. i can log it in console by passing the row as click argument but not able to
Continue readingngClass works only once based on a condition, how to apply a class using a continuous changing value
Issue I am trying to apply a conditional class based on child value which is continuously changing. This class is working fine based on default value but if value is changed I wanna change class also.<div [ngClass]=”{‘myClass’: applyClass== true” >
Continue readingAngular html select issue
Issue As you can see from the links below, when loading the page the first time, the first select uses its first option to display “select street”. Then I select a city and the first select shows the corresponding streets.
Continue readingHow to call lifecycle hook with API getting data from a server and also not affect other services
Issue //by using lifecycle hook I am getting data but another method is not working on signing ngDoCheck() { this.FetchUsersInQueue(this.commonService.getUser()); } onSignin() { this.serverService.LoginMobileUser(this.modelSignIn).subscribe(data => { }, error => { }); } Solution thanks to all, I got the solution
Continue readingSorting Data in Angular in Ascending/Descending on click of a button
Issue I have a (click) that calls a sortUser() function that sorts the data. My HTML looks like this. let isAscendingSort: Boolean = true; sortUser() { console.log(‘sorting!’); //just to check if sorting is beng called this.items.sort((item1: any, item2: any) =>
Continue readingNext callback function in angular 7
Issue As a beginner i was going through the difference between observables and promise, one says that once a subscriber is subscribed it can get a callback to its next method everytime data(Observable) is returned from the http request. I
Continue readingRadio button disable and enable depends on values angular 6
Issue I am trying to disable and enable radio button depends on values. In my code, if I enter “yes” in the text box then clicked ok button radio button one is disabled. But if I type no radio button
Continue readingAngular 5 project is unable to upgrade in to Angular 7
Issue My current Angular cli Version is 1.6.6 and Angular Version is 5.2.2 I am trying to update it to Angular 7 and new angular cli version is 7.3.6 When I try to upgrade using ng update @angular/cli, an error
Continue readingWhat Is difference between angular 7 and 8?
Issue Actually, I want to know the actual differences of angular versions – 8 and 7 which were recently release the beta version. I researched on the same but not able to understand the exact differences on these versions –
Continue readingForm 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 readingHow 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 readingHow to handle response from slow server
Issue I have to get some data from a server .The response from server comes very slowly. I want store the response in a an array so that it can display in template . The aim is to delay the
Continue readingChild component transmit parameter to parent
Issue I want NodeComponent to transmit the parameter to the LayoutComponent. const routes: Routes = [{ path: ”, component: LayoutComponent, children: [{ path: ”, component: IndexComponent }, { path: ‘node/:nodeId’, component: NodeComponent }] }]; Solution I assume your LayoutComponent has
Continue readingHow to wait till i get a response from backend spring boot api in angular 7
Issue I wanted to navigate from one route to another route with the result of http post method. But the navigation is happening without the response from http post. The response is getting later when i debugged the code How
Continue readingHow to add mutiple class name ngClass in angular 2
Issue I am trying to add multiple class name in ngclass but not working.I do not know how to add multiple css class name in angular 2. classname3 is not adding properly. If any one know please help me to
Continue readingHow to search multiple fields in ng-select?
Issue I want to merge two API fields “code and name” in ng-select dropdown. For example:- Code : MI name : MI 3sPrime Format : MI – MI 3sPrime I used the below code for dropdown Component.Html <ng-select [items]=”products” bindLabel=”code”
Continue readingAngular: Weird behavior of [style.display] in IE 11 – Two way binding not working
Issue Hi i am developing a web application and the target browser is IE-11 and above. I am using [style.display] to hide or show an element in one of my component. The code is as follows <cm-configure-add-cart class=”configure” [style.display]=”(configWorkflowComp.visible ==
Continue readingHow to transfer data between component Angular?
Issue How to transfer data between component Angular when they are more than one nesting? For example: <router-outlet> </router-outlet> <filter-mobile></filter-mobile> I need pass outcome data from component filter-mobile to any component inside <router-outlet> </router-outlet> it can be also nested component.
Continue readingAngular 6 directive attribute not changing dynamically
Issue I have a component A, which has custom directive on the page: View: <warning [details]=’details’></warning> Component: export class AComponent implements OnInit { details: ConfirmDetails = { header_class: “” }; languageChanged(newLang: string) { this.currentLanguage = newLang; this.ngOnInit(); } ngOnInit() {
Continue readingHow 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 readingAngular multiple http post requests give me error: "net::ERR_INSUFFICIENT_RESOURCES"
Issue I am importing an .xlsx file, which has 6000 customers inside and I am trying to loop throught customers and make an http post request foreach customer, but I get this error: net::ERR_INSUFFICIENT_RESOURCES. How can I insert these customers?
Continue readingWinston logger in angular-electron application
Issue I am working on angular + electron application. I am using angular version 8. I am trying to add logger to my application and for logging on electron part I am trying to use winston logger. Once I add
Continue readingangular 6 or 7: How to import RequestOptions and ResponseContentType in '@angular/common/http'
Issue I have migrated angular 4 code to angular 6 and I want to know how to import below code in angular 6 or 7? import { RequestOptions, ResponseContentType } from ‘@angular/common/http’; Solution Pass this way … import { HttpClient,
Continue readingAngular 6 and bpmn-properties-panel
Issue I am trying to use bpmn.io in my project. So i tried to integrate bpmn-properties-panel with Angular. I had installed all the modules and imported them. But i am not getting all the properties what they are showing. What
Continue readingHow to add mat-paginator for mat-cards?
Issue I’m new to Angular and I’m looking for pagination on mat-cards. The examples I’ve seen has only pagination for tables. I have hundreds of code and would like to restrict it to 8-10 cards per page. How to acheive
Continue readingAngular 7 – Error when building component library with ngTemplateOutlet
Issue I’ve just upgraded to Angular 7 and I’m struggling to get my component library to compile correctly. I have the following code: auto-complete.component.html: <li *ngFor=”let item of items; let index = index;”> <ng-container *ngTemplateOutlet=”listItemTemplateRef.template, context: { $implicit: item, index:
Continue readingTwo 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 readingUncaught 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 readingAngular 6-7 ViewEncapsulation.emulated prefix
Issue Is it possible to prefix or postfix the tags generated when ViewEncapsulation.Emulated is enabled in an angular 2-7 component its now like [_ngContent-C0] is there a setting to let it do something like [_ngContent-C0-myApp] so adding a custom string
Continue readingIs it okay to mark a @ViewChild as private?
Issue Is it okay to mark a ViewChild as private, if it’s not being referenced in the template? I have been able to do this, then build and serve with the ‘–prod’ flag, and encountered no errors. I’m currently using
Continue readingAngular http request return null in chrome but works in firefox
Issue I have faced a strange problem. I have been working for two months with this angular 7 project. Everything was working fine. But suddenly all my HTTP returns null. But it works as expected in Firefox. i reinstall chrome
Continue readingTypescript / Angular 7: How can I iterate over Object matching my Interface with Object.keys?
Issue I am pretty new to Javascript and Typescript/Angular.. I am getting data / game stats from a website to make my own stats app. I have created an Interface with defined Key/Values to match the data that I want
Continue readingHaving issues getting @ContentChild working with Directive
Issue I’ve been trying to get ContentChild with Directive working in a demo/example and I keep running into the directive not working. No errors being thrown. I’ve replicated the scenario on StackBlitz and I’m getting the same problem: https://stackblitz.com/edit/angular-contentchild-directive-etktcd Why
Continue readingAuto-importing from a local Angular library includes "public-api" and breaks application
Issue I have an Angular 7 library that is to be used by my application, both in the projects folder. When I auto-import from the compiled library, Visual Studio Code uses the path of the public api surface in the
Continue readingHow can I use get parameter from URL with router in Angular 7
Issue I am really confused by the Angular 7 router. I want to use the get parameter “token” from any place in the URL. I use the following code to define several routes. const myRoutes: Routes = [ { path:
Continue readingHow to decide when to give the header, footer correct the route in Angular 7?
Issue could you help me with the following situation: I need to go from a login to the dashboard using the app.routes, but the dashboard uses other tags like the app-header, when the login does not, for example in app.component.html
Continue readingmodify component view based on url difference
Issue Basically I wish to have only one view to list blog posts on my angular app. So to have the list of blog posts for all, recent and category wise, I will be using only one component. http://localhost:4200/blog/category/technology http://localhost:4200/blog/recent
Continue readingIonic 4: How to set navigation direction (backward/forward) using routerLink?
Issue Ionic 4 now uses Angular router. Altough it still has its own NavControler, which helps to simulate push / pop navigation style though the navigateBackward and navigateForward methods. So that ion-back-button is shown it is necessary to use navigateForward
Continue readingJump to route without loosing data from current Observable
Issue I’m a little confused on how to do this. I keep losing any changes I make. I have this as my route navigation declaration: const route: Routes = [ … { path: ‘configs’, redirectTo: ‘configs/entry1’ }, { path: ‘configs/:name’,
Continue readingAngular 7 Url changes but nothing else happens
Issue This is the first time I post here, I’m quite desperate. Im using Angular 7. The problem is that when I manually type the desired url, it works well, but when I press a button and use RouterLink, the
Continue readingAngular. 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 readingHow to concatenate two property values into a single data table column for Angular 7 data table? (Ex: first name and last name into one column)
Issue I want to concatenate first name and last name of a person and display it as a Name in a column in my table using Angular 7 data table. Here first name and last name are two different properties.
Continue readinghow to access matTabNavBar.updateActiveLink method
Issue MatTabNav Docs show a method that can be used to update the active links for a mat-tab-nav. No examples of how to implement this seem to exist and the source code does not give any better insight into how
Continue readingAngular CDK Drag and Drop boundary
Issue I have a question about Angular 7 CDK drag & drop feature. What I want is the following: I need a resizable rectangle div inside a container which I want to use as the boundary element (cdkDragBoundary) for my
Continue readingCan't change the color of bootstrap-datepicker
Issue I’m using a date input with bootstrap-datepicker to show a calendar for the user to pick a date. I’m trying to change the background and head’s color, and it is not working Here is my HTML code: <div class=”row
Continue readingError 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 readingHow to handle nested HTTP requests in Angular 7?
Issue I have a generic service for get data from server. When response received, I’m using a mapper function to map pure JSON data to required model. For some class type in mapper function, I need to get some additional
Continue readingmat-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 readingNode app fails to hit API after Deployment to Heroku. It says err::Connection Refused
Issue I’ve deployed my Node app to heroku. It worked all good and fine but later it failed to hit any api end point. The console has an err::connection refused. Here’s the screenshot I tried re-deployment but still the problem
Continue readingIn an Angular 7 application, with reactive forms, how can i modify this method so that it will clear only invalid form controls within a form group?
Issue I need to modify this method, so that when a user clicks on a button, all invalid form controls within the form group they are on, have their values reset or set to null. The current method consists of
Continue readingAngular 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 readingHow to filter a mongoDb collection based on a foreign key in MEAN stack app?
Issue In my MEAN stack app, I have a Venue-Detail component, I am trying to display all upcoming events associated with this venue. Below is an example of what the venue collection in my mongoDb looks like: { “_id” :
Continue readingHow to set multiple locations in Outlook compose form?
Issue I am currently working on an Angular outlook addin using Microsoft Graph API. I have to set and get Outlook item data in compose form. I referred the link Get and set data items in outlook compse form for
Continue readingHow to skip a row from sort using MatSort?
Issue I am aware that to use the sorting functionality of MatTable you use mat-sort-header But is there a way to skip a row when sorting? Basically from the sample table above I just want to sort the data in
Continue readingImport 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 readingUncaught TypeError: core_1.style is not a function
Issue I transformed my code from Angular 4 to Angular 7 and compiled it successfully. But when I try to run it, in the console of the broser it gives the following errors. Uncaught TypeError: core_1.style is not a function
Continue readingReact form initialization with data in Angular 7
Issue I have edit reactive-form. In ngOnInit() I’m trying to initialize the form with server data. First I will call api and then the data is set. But what is happening is that before array receives data from api, the
Continue reading