Issue I am building a form in angular which is used to upload a file and I have a third party API that I need to call which accepts Multi part form data and file as blob. Can you please
Continue readingTag: angular10
I am getting " net::ERR_INTERNET_DISCONNECTED" error after implementing post method in angular
Issue This is My Code. This is Service Code in which I created a method for post method Service Code import { HttpClient } from ‘@angular/common/http’; import { Injectable } from ‘@angular/core’; import { Observable } from ‘rxjs’; export interface
Continue readingAngular function shows updated value first time only
Issue html <input type="file" [(ngModel)]="profile.myFile1" (change)="handleFileInfo($event.target.files, ‘myFile1’)"> <div *ngIf="filesExists(‘myFile1’)"> <span>Size: {{getFileSize(‘myFile1’)}}</span> </div> <input type="file" [(ngModel)]="profile.myFile2" (change)="handleFileInfo($event.target.files, ‘myFile2’)"> <div *ngIf="filesExists(‘myFile2’)"> <span class="photo-size">Size: {{getFileSize(‘myFile2’)}}</span> </div> ts file code handleFileInfo(files: FileList, fileTypeName: string) { // Other code …. let fileObj: FileObj = {
Continue readinghow to loop class name by *ngFor using angular10
Issue columnClass: string[] = [‘name’, ’email’, ‘phn’, ‘city’, ‘state’, ”, ‘w-40’]; <td *ngFor="let col of columnClass" class="pr-20 {{col}}"> string[] is in one component.ts and html is in another component.html Solution You need to bind to the class to use variables
Continue readingHow can I change a body tag class in Angular 10 (best practice)?
Issue I want to switch between two classes (light and dark) at TAG Body. What I did? I created a service: import { Injectable } from ‘@angular/core’; @Injectable({ providedIn: ‘root’ }) export class ThemeService { body = document.body; constructor() {
Continue readingHow can I change a body tag class in Angular 10 (best practice)?
Issue I want to switch between two classes (light and dark) at TAG Body. What I did? I created a service: import { Injectable } from ‘@angular/core’; @Injectable({ providedIn: ‘root’ }) export class ThemeService { body = document.body; constructor() {
Continue readingHow can I change a body tag class in Angular 10 (best practice)?
Issue I want to switch between two classes (light and dark) at TAG Body. What I did? I created a service: import { Injectable } from ‘@angular/core’; @Injectable({ providedIn: ‘root’ }) export class ThemeService { body = document.body; constructor() {
Continue readingAngular 9 : Use component as directive
Issue Recently Im reading source of nebular, an angular ui framework, I have questions about the following code: @Component({ selector: ‘[nbMenuItem]’, templateUrl: ‘./menu-item.component.html’, animations: [ … ], }) export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy { @Input() menuItem = <NbMenuItem>null;
Continue readingnavigate to another angular page 10
Issue I’m studying angular and would like to navigate to another page when I click on the button. it happens to me that when I click they add the component of the second page under the button. I followed a
Continue readingSubject instantiation error in Angular 10
Issue I have an Angular application that works fine via the ng serve. The application also builds correctly via ng build –prod, but when I run the generated sources in the browser I get a following error: TypeError: $m.Subject is
Continue readingAngular 10/Ionic 5 – Passing input data from a modal to a parent component
Issue I am trying to pass data from an ionic modal with an <ion-input></ion-input>. The data returned is then sent to a firebase backend. More specifically, I am looking to, on a button press, create a new ‘workspace.’ This workspace
Continue readingAngular Material Snackbar: Add Icon Without Creating Another Component
Issue Is there method to Add Material Icon (Checkbox) Without Creating Another component in snackbar. Maybe through PanelClass or API style parameter? We have 100s of different snackbars with simple text. Trying to refrain from creating 100 additional components if
Continue readingAngular add and remove classes triggered by method without jquery
Issue I have some code which I want to use with animate.css to add and remove a class in a div. Here is the code: app.component.html <button (click)="toggleMethod()">Toggle Classes</button> <div class="myDiv"> // Stuff here </div> app.component.ts toggle = false; toggleMethod()
Continue readingAngular compiler is slow between two identical model laptops
Issue Coworker and I are trying to figure out why compilation times are different. We have the same exact Dell Laptop 7030 model, same SSD, same hard drive, same memory, specs. Our task manager process look similar. Corporate orders the
Continue readingAngular: Change field of parent component from route
Issue everyone! I need your help. I have a component in my Angular 10 application, let’s name it A. In this component I have <router-outlet> and also routes described in routes.ts file. What I need is to change variable (field)
Continue readingAngular PrimeNg Using autocomplete and passing REST object
Issue I have an issue with PrimeNg autocomplete : When i type any research, I obtain [Object Object] in the input text. First I have an API call for getting a data set : ngOnInit(): void { this.getCategories(); } private
Continue readingGetting a blank page after starting Angular 10.0.3 app on localhost before deploying to Heroku
Issue I’m getting a blank page on testing my Angular 10.0.3 app. Here the server.js: const express = require(‘express’); const app = express(); app.use(express.static(‘./src’)); app.get(‘/*’, (req, res) => res.sendFile(‘index.html’, {root: ‘./src’}), ); app.listen(process.env.PORT || 8080); package.json: { "name": "fsdoblakoangular", "version":
Continue readingDisplaying data from a JSON file with Angular
Issue As all questions look like they are outdatet i’m asking this Question. First of all I need to mention that I just started Angular 4 days ago, so please explain everything like you would to your child ( or
Continue readingAmbassador Edge Stack : Working with sample project but not with my project
Issue I am trying to configure Ambassador as API Gateway in my kubernates cluster locally. Installation: installed from https://www.getambassador.io/docs/latest/tutorials/getting-started/ both windows and Kubernetes part can login with >edgectl login –namespace=ambassador localhost and see dashboard configure with a sample project they
Continue readingAngular RouterLink Open Hyperlink in New Window, Not Tabs
Issue How do I open Angular routerLinks in New Windows, Not New Tabs? <a target="_blank" [routerLink]="[‘/product/’,productData?.productId]" > This is not working in the latest Chrome per 2020 (still opening tabs) Solution You can achieve it using window.open method. Below is
Continue readingAngular: NgStyle Highlight Words in a Textbox using input::first-line?
Issue How do I highlight the contents of a textbox in Angular? the following is not working. Currently using Material textbox. Need to apply it conditionally, based on boolean variable highlightTextFlag, maybe with ngstyle . Sample: input::first-line { background-color: green
Continue readinghow to initialize a @angular-material-components/color-picker side .ts with string (fomat hex)
Issue i try to convert Hex string to Color (import of @angular-material-components/color-picker) or instantiate color and set my value hex stock en my data base from the side .ts <!– begin snippet: js hide: false console: true babel: false –>
Continue readingDisplaying content of Component that i fetched with @ContentChildren or @ViewChild
Issue So I’m trying to display child components at specific locations in my Component. I have the following: @Component({ selector: ‘app-item-list’, template: ` <p *ngFor="let item of items"> {{item.order}} <!– display content of child component here –> </p>` }) export
Continue readingAngular directive query sibling HTML
Issue Using Angular 10 I want to query a sibling element. Essentially I have something like this: <label myDirective for="foo" … <input id="foo" formControlName="xyz" … In myDirective I can easily get the value of for via a @HostBinding. In my
Continue readingAngular: Material Button follow the Header Size
Issue How do I make a mat-icon adhere to the header size? This is not working, the arrows are still very small. <h1> <button mat-icon-button (click)="testEvent()"> <mat-icon>keyboard_arrow_up</mat-icon> <mat-icon>keyboard_arrow_down</mat-icon> </button> </h1> SCSS: h1 { @include font(400,40px); } Solution Apply below css
Continue readingVisual studio 2019 Cannot use imports, exports, or module augmentations when '–module' is 'none'
Issue After I upgraded my project from Angular 9 to Angular 10 the project is showing many errors that I can’t resolve like the following (TS) Cannot find module ‘@angular/core’. (TS) Cannot find module ‘@angular/forms’. (TS) Cannot use imports, exports,
Continue readingAngular 10: How to export multiple components in a module
Issue I am using Angular 10 version. There are some similar questions but they didn’t solve my problem. In my Angular project , I have made two modules named post and static. The post module have 10 components. and i
Continue readingAngular issue : error TS2554: Expected 0 arguments, but got 3
Issue I know there is some issue with the constructor or with the class but i am not sure what’s the issue. My recipe model class looks like this : export class Recipe{ public name : string; public description :string;
Continue readingJavascript / Typescript: Compare Date, string, and Moment variables
Issue I am comparing two date variables. For whatever reason, from C# API to Javascript, they sometimes convert as 1) string or 2) Date or even 3) Moment due to previous company code. Typescript states they are Date in interface
Continue readingWhy is the mat-autocomplete not displaying the searched options?
Issue This is the form that I am using: <form [formGroup]="searchForm" id="searchForm"> <mat-form-field> <input matInput type="text" name="awesome" id="awesome" [formControl] = "formCtrl" [matAutocomplete] = "auto" value="{{ awesomeText }}" [matAutocomplete]="auto"> <mat-autocomplete #auto = "matAutocomplete"> <mat-option *ngFor = "let res of result |
Continue readingAngular: Performance issue to calculate Button Disable with Function or Component Method?
Issue Is it good/bad practice to disable an Angular button with a component method? Specifically, Would this be a performance issue in Angular? It seems like Angular would have to continuously calculate. Is it better to use a static variable
Continue readingAngular undefined value of @input variable
Issue I’m new to Angular and I have some issues , hope you’ll help me. so I’m trying to share a value of a variable from a ProjectComponent to an AcceuilComponent , the value of this variable is displaying correctly
Continue readingAngular 10: CommonJs and AMD Dependencies can cause optimization bailouts, hotkeys.js depends on 'mousetrap'
Issue We are receiving this build warning in Angular 10. How can this be fixed? Is there an alternative NPM like Lodash-es ? hotkeys.js depends on ‘mousetrap’. CommonJs and AMD Dependencies can cause optimization bailouts Error Message Resource: Upgrading to
Continue readingAngular array filter is not working on a list of string
Issue I have an array of string, and want to filter out a particular string after some operation. But, it seems I am doing something wrong there. this.displayUser.followers.filter(userId=>userId !== this.loggedUser.userid); Here, followers is an array of string -> string[] and
Continue readingAngular 10: Set IFrame URL Input with Variable
Issue I am trying to set the IFrame Source Input with a component below. Its not working for some reason, showing no wepages. How can I set the input source properly? Calling Method: <app-viewer-iframe-two [url1]="’http://www.food.com’" [url2]="’http://www.car.com’" > </app-viewer-iframe-two> Typescript: export
Continue readingHow to display different components recursive?
Issue I have a app-document-form-node component that recursive builds components. Component app-document-form-node: <ng-container *ngIf="block.type === fielType.Block"> <app-adresat-list *ngIf="block.tag === ‘ADRESATS’" [list]="block?.children"></app-adresat-list> <app-word-settings *ngIf="block.tag === ‘WORD_SETTINGS’" [element]="block"></app-word-settings> <app-parameters *ngIf="block.tag === ‘PARAMETERS’" [element]="block"></app-parameters> <app-document-parameters *ngIf="block.tag === ‘GENERICPARAMETERS’" [element]="block"></app-document-parameters> </ng-container> <!—–> <ng-container *ngIf="block.type
Continue readingDuplicate ID generation in ngForOf – Angular
Issue I am using ngForOf to list dates, each date is represented by id property which is actually its index + 1. All the dates are present in form of object in an array. Also, each date is a component
Continue readingAngular ngIf check if variable starts with a specified character in component html
Issue I currently have this: <div *ngIf="name !== ‘@name1’> Show something </div> But I would like to change it to check if var name value starts with a specific character for example @. How can I do this? Solution Use
Continue readingHow to use fully functioning JsonPath in angular 2+?
Issue I followed https://www.npmjs.com/package/jsonpath. Tried a way to include external js file, but no luck. Solution import jsonPath worked after – import * as jsonPath from ‘jsonpath/jsonpath’; JsonPath plush also worked JSONPath-plus which is same as of Jsonpath. I have
Continue readingMoment Timezone in Angular 9
Issue Currently, I upgrade my Angular project form 8 to 9. The project’s using a "@types/moment-timezone": "^0.5.30" in package.json Now this package has been deprecated. https://www.npmjs.com/package/@types/moment-timezone When I run the project ng serve, it shows up this error message user.model.ts:3:25
Continue readingWhy DragDrop does not work in Material Dialog?
Issue I use Drag and Drop inside Material Dialog. <div mat-dialog-content> <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let movie of movies" cdkDrag> {{movie.title}} <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title"> </div> </div> </div mat-dialog-content> I use this example for drag/drop So, when I
Continue readingHow to make 1:N relationship by reference type using Angular 10 and Cloud Firestore
Issue We are looking for a mechanism that allows users to purchase digital content using Angular 10. I’m thinking about how to create 1:N relationship with reference type using Angular 10 and Cloud Firestore by referring to the following in
Continue readingHow to make 1:N relationship by reference type using Angular 10 and Cloud Firestore
Issue We are looking for a mechanism that allows users to purchase digital content using Angular 10. I’m thinking about how to create 1:N relationship with reference type using Angular 10 and Cloud Firestore by referring to the following in
Continue readingAngular router: named outlets does not seem to work with relative routes nor in lazy loaded modules
Issue I have some problems with the angular router and named outlets. I have a list of members, and want to edit a clicked member on the same page in a named router outlet. And I would like to have
Continue readingWrong action type or wrong reducer is getting called in Angular 10 & RxJs
Issue I have created two states using RxJs in angular 10 application. The problem I am facing is Wrong action type or the wrong reducer is getting called. I have explained the issue in the image below. I am not
Continue reading@Input Vs Dependency Injection in Angular 10
Issue I know that we use @Input decorator to pass the values from parent component to the child component. But, I am wondering instead of doing this, if we can create an instance of the Parent class in the constructor(Dependency
Continue readingAngular ESLint : Any Data Type Warning
Issue I am using Angular 10. We have lot of developers using : any date type when they shouldn’t be. Is there a way to flag a warning in ESLint/TSLint, if a person utilizes this datatype ? How can this
Continue reading@output not emitting result in Angular 10
Issue Here is my code below. topbar.component.ts import { Component, OnInit, AfterViewInit, Output, EventEmitter } from ‘@angular/core’; @Component({ selector: ‘app-topbar’, templateUrl: ‘./topbar.component.html’, styleUrls: [‘./topbar.component.scss’], }) export class TopbarComponent implements OnInit, AfterViewInit { @Output() OnCancelss: EventEmitter<any> = new EventEmitter<any>(); //my output
Continue readingAngular 10 adding numbers
Issue loadingPercent: number = 0; ngOnInit(): void { window.setInterval(function() { console.log(loadingPercent + 10); }, 1000); } I am trying to simply add 10 every second but I get the answer NaN. I am using typescript in Angular 10. Why is
Continue readingThe Component 'TopSearchBarComponent' is declared by more than one NgModule – Angular 10
Issue I am new to angular. I have Component like TopSearchBarComponent. I need to use this same component in all module. I have following modules app.module.ts a.module.ts b.modules.ts If i declare TopSearchBarComponent in both ngModule i receive the error like
Continue readingShow loading animation while retrieving data (Angular 10)
Issue I am trying to show a loading animation in Angular 10 while I am retrieving data. I can show the loading animation if I use a specific time value but I cannot get it to show just while the
Continue readingType 'Element' is missing the following properties from type 'Group': children in Kendo UI Charts Drawing at e.createVisual()
Issue I used the function below in Angular 10 for Kendo Charts drawing on Donut Chart public visual(e: SeriesVisualArgs): Group { // Obtain parameters for the segments this.center = e.center; this.radius = e.innerRadius; // Create default visual return e.createVisual(); }
Continue readingcdkFocusInitial attribute not focusing the DOM element
Issue In Angular 10 project, I have a form with 2 inputs named Username and Password. I am using cdkFocusInitial attribute on username field, however it’s not focusing on page load. Here is a StackBlitz example that shows the issue
Continue readingDynamically add button to the mat-table angular material
Issue How can I add action column with edit and delete button dynamically. I have the below setup Data source in the parent component columns: MatTable[] = [ { columnDef: ‘position’, header: ‘No.’, cell: (element: any) => `${element.position}` }, {
Continue readingHow to input an observable into an Angular web component
Issue Please note that this question is NOT about regular Angular components. I’m specifically asking about a reusable custom element created with Angular also called an Angular web component. I have a reusable Angular 10 web component being hosted inside
Continue readingAngular 10 scrollTo from parent component to an element in child component html
Issue parent html: <div> <button type="button" (click)="scroll(childelementTwo)">TO CHILD</button> </div> <div> <app-child> </div> child html: <div> <div #childelementOne> lot of stuff </div> <div #childelementTwo> another lot of stuff </div> </div> if all this html code were in the "same" component.html I
Continue readingAngular Kendo Grid keeps details of removed master row visible
Issue I am using an angular-kendo-grid (version 6.14.5) in angular 10.0.3 with a kendoGridCellTemplate to show details. <kendo-grid #KendoGrid [data]="gridSettings.gridView" (…) > <kendo-grid-column field="code" title="code" > (…) <ng-template kendoGridCellTemplate let-dataItem> <details-component [id]="dataItem.Id" (onDelete)="onDelete($event)"> </details-component> </ng-template> (…) </kendo-grid> The details component
Continue readingType 'Observable<Observable<Response>>' is not assignable to type 'Observable<Response>'
Issue Using Angular 10 I have the following method: private getUser() : Observable<Response> { return this.authenticationService.getClaims(‘sub’).pipe(map((claims: Claim[]) => { let request: Request = { userId: 1 }; return this.userService.getByUserId(request).pipe( map((payload: Payload<Response[]>) => payload.result[0]) ); })); } I am getting the
Continue reading`SCSS` doesn't work after Updating from Angular 9 to Angular 10
Issue I updated my Angular application from version 9 to 10. Before updating it was working correctly. Now it’s getting this error: ERROR in ./src/assets/scss/argon.scss (./node_modules/css-loader/dist/cjs.js??ref–13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref–13-3!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ref–13-4!./src/assets/scss/argon.scss) Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js): SassError: File to import not found or unreadable: custom/alert.
Continue readingFirst value after subscribing observable is always null
Issue I have the following ProfileService: export class ProfileService { private user: BehaviorSubject<User> = new BehaviorSubject<User>(null); constructor(private userService: UserService) { this.userService.getUser(1) .pipe(map((payload: Payload<Result>) => payload.result)) .subscribe((User: user): this.user.next(user)); } public getUser() : Observable<User> { return this.user.asObservable(); } } On a
Continue readingConsole.Log is not executed when inside the RXJS Tap operator
Issue I have the following observables: this.authenticationService.isSignedIn() -> Observable<Boolean> this.user$ -> Observable<UserModel> I need to check a condition based on both so I tried: zip(this.authenticationService.isSignedIn(), this.user$).pipe( map(([isSignedIn, user]: [boolean, UserModel]) => isSignedIn && user.claims)) ); Because I am getting an
Continue readinggeographicToWebMercator and Projected polygon in Angular ArcGIS esri-loader
Issue How to use ‘geographicToWebMercator’ in Angular 10 to draw a polygon with rings values. I am referring the example provided In the documentation, https://developers.arcgis.com/documentation/core-concepts/features-and-geometries/#polygons and trying to use the functionalities in Angular with ArcGIS esri-loader. Here is the documentation
Continue readingHow to make Angular Client to inform Identity Server which login method to use?
Issue I am using IdentityServer 4 with an Angular 10 client that uses OIDC Client JS: To redirect a user for signin I am calling signinRedirect on the Angular’s client: UserManager.signinRedirect(args) That redirects to IdentityServer 4 AcccountController’s Login action: [HttpGet]
Continue readingAngular 10 is not working with windows 10
Issue Error when ( ng serve ) As it is shown in the picture thanks advance Solution This is the issue with the visual code terminal. Windows system is not allowing the vcode to run scripts in it’s terminal. To
Continue readingwhat is best way to reuse components in multiple projects in angular?
Issue What is best way to reuse components or modules in multiple projects in angular? Thanks for your answers and have a great day Solution I was looking for the same topic and came across this: https://blog.bitsrc.io/how-to-share-angular-components-between-project-and-apps-5eb0600d99d2 To me this
Continue readingJDNConvertibleCalendarDateAdapter library is not compatible in angular 10
Issue I’m developing an angular project and my current angular version is 9. I have got some peer dependency warnings related to ‘JDNConvertibleCalendarDateAdapter’ library when I try to update @angular/material to angular 10. Is there any way to fix this
Continue readingHow to pass back data from parent component to child component in angular
Issue I’m using Google Place Autocomplete in my child component, but when each input is filling with data, the parent component does not get the change, so i can’t post to server valid data. I have a child component that
Continue readingAngular 10 upgrade messed up ag-grid-angular dropdown look-n-feel
Issue My ag-grid-angular version has been upgraded to 24.0.0. as a process of Angular 10 upgrade (npm update –all). Everything works fine in terms of functionality, angular material components look-n-feel, and third party libraries I am using (e.g. ag-angular-grid, Highchart,
Continue readingUnable to process HttpClient in Angular 10
Issue When I try to do ng build , I get an error saying ERROR in node_modules/@angular/common/http/http.d.ts:81:22 – error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class. This likely means that the
Continue readingDisable a button based on condition
Issue I am getting data from a server and I want to filter out a particular column. What I want is that if a column bought(boolean) says true I must disable the edit button sideby if its false the edit
Continue readingHow to check selected time is less than current or greater than current time using angular 8
Issue Im working on appointment project in that i want to check appointment time with current time this.appointmentFromTime <= this.timeNow && this.appointmentToTime >= this.timeNow but in this condition time is getting as string so code is not working as expected
Continue readingUsing Agm mps and i want to get the lat lng on map click in angular 10
Issue Here is my code but it is not working. when I click on the map it displays error: Cannot read property ‘lat’ of undefined <agm-map style="height: 700px" [latitude]="lat" [longitude]="lng" [zoom]="zoom" (mapClick)="placeMarker($event)" > Ts file placeMarker($event) { console.log($event.coords.lat); console.log($event.coords.lng); }“`
Continue readingtrouble connecting Angular 10 with Spring security to use custom login page
Issue I have been working on a web application using Spring boot and spring security with frontend controlled by angular 10. I have implemented backend for security and created a login page also. But, on running on local host it
Continue readingAngular 10 get webservice status with Await?
Issue Just before login in the user, I need to test if the WebServce respond then if the system is in maintenance. On the WebService part (core3 .net) I got 2 functions: HeartBeat that return: return Ok("OK"); MaintenanceInfo that return
Continue readingAngular: Find Full URL String of Sibling Component in Routerlink
Issue How do I find the full Url from a Router Link in Angular? I know how to navigate to a sibling component, however looking for the full url string, to store in variable . Resources: how to navigate from
Continue readingRefreshing Layers on an Angular 10 ESRI Map Without Refreshing the Entire Map
Issue I have created an Esri Map in Angular 10. The user can select the layers on the map from a group button. So the input will be an array eg: [‘0′,’1′,’2’]. The numbers are the map layer number. All
Continue readingAngular Routerlink : Concatenate Parent Route String with Variable
Issue How do I add string interpolation/concatenation to router link below which goes to parent route, and then variable link? <a routerLink="../account-information/" + "item.productId"> Solution String Interpolation routerLink="../account-information/{{item.productId}}" Attribute Binding Syntax: [routerLink]="’../account-information/’ +item.productId" or [routerLink]="[‘../account-information/’, item.productId]" Answered By – Muni
Continue readingGet the details of the layer and its details when click on the map in Angular 10
Issue How do we get the details of the layer when clicking on the ArcGIS map in angular 10. The click event is triggering on the map. Eg: A map showing house numbers. How do we get the house number
Continue readingCannot find control with name: 'idTypesAccepted'
Issue I am using a form builder to group form and form array as below this.$form = this.fb.group({ email: [step2.email || ”, [Validators.required, Validators.email, Validators.pattern(‘^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$’)]], phone: [step2.phone || ”, Validators.required], configuration: this.fb.group({ idTypesAccepted: this.fb.array([this.fb.group({ passport: [”, [Validators.required]], nationalId: [”, [Validators.required]],
Continue readingAngular Use Multiple Instances of Service In Parent to Child Components
Issue I have a Parent Component calling the two same Child components. The child component contains a SearchForm and Grid. The two search grids are shown side by side, in iframe format. Allow users conduct two searches. When doing a
Continue readingng test for Angular 10 hangs out in gitlab ci
Issue I’m configuring gitlab ci to run Angular 10 tests. But they hang out (run longer than 10 minutes). Why does it happen? How could it be fixed? Application used has been created by ng new <app-name>. .gitlab-ci.yml image: node:14.13.1-alpine3.12
Continue readingOn table cell click, change to select box
Issue I’m trying to change a table cell to a select box on click. This is what I have so far but it seems very, very clunky. Am I missing something in Angular2 that will better serve my needs? account-page.component.html
Continue readingHow to catch input comma key event in Angular 10
Issue I want to catch the event when a user presses comma (‘,’) in an input. I have tried this but it didn’t work: <input (keyup.comma)=”doSomething()” /> So how do you catch a comma inserted event? I know I can
Continue readingArcGIS 4.16 popup template custom function for content in Angular
Issue I am trying to add custom content in the popup template from a service returned results. The service function is working in the ngOninit() or in a custom function which is not a part of the popup template function.
Continue readingGet Image from APi
Issue I’m trying to implement this code for making API call for image without success: <kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" [image]="mainImage(product.productImage)" [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16> </div> Component: mainImage(productImage: number) { this.productService.getProductImage(productImage); } Service: getProductImage(imageId) { return this.http.get<any>(environment.apiKey + ‘/engine/product/files/’ + imageId) }
Continue readingAngular 10 matcher children not showing children
Issue I’m trying to create a route pattern like this: /element << — show list of elements /element/1 <<– show detail of element 1 /element/1/child <<– show list of children of element 1 I tried the path property ":id" and
Continue readingPrevent Popup template to shows multiple feature in ArcGIS 4.16 Angular 10
Issue I have integrated a popup on the map for a specific layer. Some time the poup shows pagination (featureNavigation) multiple data. Sometimes it fails to show the data, or mismatch in the data that actually the service returns. var
Continue readingng serve hangs up forever at 92% while processing additional asset using copy-webpack-plugin (Android OS / termux)
Issue I was trying to run a regular angular 10 web application using my android smartphone when i came across blocking issue while ng serving the application: the ng serve is hanging on copying assets showing: "92% process additional asset
Continue readingIs my Angular code for correct? (event binding)
Issue app.component.html <input (keypress)="degistir($event)" /> <div> {{isim}} </div> app.component.ts isim: string = ""; degistir(event:any){ this.isim = event.target.value; } Preview: Solution Your code is working fine, but whether it is right or wrong depends on how explicit you want your code
Continue readingPUT and POST methods work in Postman but only POST works in Angular 10
Issue This in my "edit-continent.component.ts" addContinent(continentData) { this.continent.name = continentData.name; this.continentService.addContinent(this.continent).subscribe((response) => { (data) => (this.continent = { id: (data as any).id, name: (data as any).name, }); this.ngOnInit(), this.continentForm.reset(); }); } editContinent(continentData) { this.continent.id = this.continentId; this.continent.name = continentData.name; console.log(`${this.continentId}`);
Continue readingConvert Markdown to HTML without allowing HTML Tags
Issue I’m trying to build a textarea that supports markdown. I’ve succeeded in converting the markdown to HTML in order to present a preview, Using the following pipe: import { Pipe, PipeTransform } from ‘@angular/core’; import * as marked from
Continue readinggit new branch without npm update Angular 10
Issue I created a new Angular 10 app on a git feature branch. I set up the basic framework for it, then merged that feature branch into release. I created a new feature branch from release to start working on
Continue readingCreate multiple dynamic stacked chart using chart.js in Angular 10?
Issue I am trying to create multiple chart in angular but I am not sure the way I try to implement will is correct or not and I am unable to create multiple charts it replacing one with another <div
Continue reading"Can't resolve all parameters for service: (?)" when I try to use service from library in Angular 10
Issue In my library I have a service with this code: import { Inject, Injectable } from ‘@angular/core’; import { HttpClient } from ‘@angular/common/http’; import { DataInjectorModule } from ‘../../data-injector.module’; // @dynamic @Injectable() export class RemoteDataService<T> { @Inject(‘env’) private environment:
Continue readingAngular universal throwing "Error at XMLHttpRequest.send"
Issue I recently upgraded the project to Angular 10 and added angular universal. There are no issues in building the application but when I run my application on the development environment it throws me the following error ERROR Error at
Continue readingAngular 10 Child Component only be used in Parent Component
Issue I need to configuration on component to be used only inside another component. How can I do that? Components: @Component({ selector: ‘app-menu[id]’, templateUrl: ‘./menu.component.html’, styleUrls: [‘./menu.component.scss’] }) export class MenuComponent { … } @Component({ selector: ‘app-sub-menu[id]’, templateUrl: ‘./sub-menu.component.html’, styleUrls:
Continue readingHow to add Angular 10 Component to an Ag-Grid cell
Issue I have an Angular10 component (toggle switch) that I need to include in a specific column of my ag-grid (cell). At the moment I have a standard html checkbox as follows: colDefs: ColDef[] = [ { field: ‘Name’, headerName:
Continue readingUsing QueryList gives the first HTML element
Issue I’m using Angular 10, and trying to use QueryList, with the code below (just like many examples on the web) HTML <div *ngFor="let i of [1,2,3,4]" #someID>some content</div> TS @ViewChild(‘someID’) someIds: QueryList<ElementRef>; When running console.log(this.someIds) in the component, after
Continue readingUsing Angular custom web component throws error: The selector "app-root" did not match any elements
Issue I have a normal Angular 10 application with lazy loaded modules and routing. However, I have a special requirement I need to fulfill. On most pages I want to initialize the full application with routing etc. by embedding the
Continue readingangular 10 'oidc-client' / IdentityServer4 .netCore 3.1
Issue I have issues calling api rest from client webSite angular 10, can’t call request with Authorize attribute (get a 401 Unauthorized). Environment : – IdentityServer4 mvc .netCore 3.1 – Web.Api mvc .netCore 3.1 – client webapp, angular 10 with
Continue reading