Just starting out with Angular and curious about the alternative for $filter('orderBy') that is used in an AngularJS controller. AngularJS example: $scope.itemsSorted = $filter('orderBy')($scope.newFilteredData, 'page_index&apos ...
this is the example data I am working with id: 5 isAchievementEnabled: false isTargetFormEnabled: true name: "NFSM - Pulse" odiyaName: "Pulse or" when using ng-multiselect-dropdown, it currently displays the "name" key. However, I want ...
I have a unique approach for managing errors: private handleErrors<T>(operation = 'operation', result?: T) { return (error: any): Observable<T> => { console.error(error); this.record(`${operation} failed: ${error.message}`); ...
My Angular application has a variable called modelResponse that gets updated with new values and prints them. However, in the HTML, it also displays all of its old values along with the new ones. I used two-way data binding on modelResponse in the HTML [( ...
I've been working on creating a progress bar in Angular using the mmat-stepper. Here's a snippet of my code: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component ...
Having trouble validating a dropdown select box, possibly due to a CSS issue. Any suggestions on how to fix this validation problem? Check out the demo here: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.compo ...
I'm experimenting with using ng-template in a separate component and referencing it in other parts of the html. Is this possible? I've tried different approaches but seem to be missing something. Can you help me understand where I might be going ...
https://i.stack.imgur.com/OHL0A.png I attempted to access the following link http://jsfiddle.net/jlspake/v2L1ny8r/7/ but without any success. This is my TypeScript code: var viewModel = function(data){ var self = this; self.orders = ko.observableArr ...
Here is an example of how my service is structured: export class UserService { constructor() {} coords: Coordinates; getPosition() { navigator.geolocation.getCurrentPosition(position => { this.coords = [position.coords.latitude, posit ...
Since migrating from Angular 4.4 to Angular 8.0, I encountered the following issue: ERROR in ./src/attributes/import/import.component.ts Module not found: Error: Can't resolve 'dropzone' in 'C:....\src\attributes\imp ...
Our list of document numbers is completely unique, with no duplicates included. I am attempting to implement a feature in Angular Material that automatically selects the unique entry when it is copied and pasted. https://i.stack.imgur.com/70thi.png Curr ...
Seeking guidance in Angular 8 - looking for advice on converting screen recorded video chunks or blogs into a multipart format to send files via API (API only accepts multipart). Thank you in advance! ...
I encountered an issue while working with an object of a class that retrieves data from an API. When trying to access this object in the HTML, I'm receiving error TS2532. Here is the relevant code snippet-- export interface TgtInfo{ Month: s ...
Recently, I started working with Angular 8 and faced an issue while trying to pass an array of objects to my component for displaying it in the UI. parent-component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: ...
I am having trouble setting default selected values for the multi-select. Despite trying various methods such as initializing the ngModel to bind the variable and using [selected] = "selectedSegment == 'S1'", none of them seem to be effective for me. &l ...
I have an item stored within two other items called formKeyValues and form formKeyValues https://i.stack.imgur.com/nRfiu.png form https://i.stack.imgur.com/eDpid.png I am looking to extract only the keys and values from formKeyValues and place them in ...
I tried researching on SO for a solution to the following query, but I am having trouble understanding how to implement it correctly. The goal is to display a delete icon when hovering over a mat td cell, but this icon should only appear for newly added va ...
I am attempting to retrieve an object from Firebase using AngularFire and angularfirelist. However, the returned object is not what I expected. Here is my code: export class AdminProductsComponent implements OnInit { products$ : AngularFireList<unkn ...
I've got this code snippet that I'm working on. I want to incorporate a Carousel feature using Angular 9 without relying on any external libraries. Currently, all the data items are appearing in a single row (they are exceeding the specified bor ...
In my component, I am using the following code: this.frmGroup.controls['dorms'].setErrors({'incorrect': true}); For debugging purposes, I have added the following to my template: {{this.frmGroup.controls['dorms'].invali ...
Currently facing an issue with the select all functionality. I found a code snippet on this link but it's not exactly what I need. I want to modify the select all feature so that it is based on the search value. For instance, if I have a set of data ...
I am facing an issue where the data returned from the reducer is an object instead of an array. Despite trying to return action.recentSearches, it doesn't seem to work as expected. The data being returned looks like this: { "loading": false, "recent ...
I am puzzled by the fact that PatchValue does not seem to work properly with FormBuilder. While it shows data when retrieving the value, it fails to set it in the FormBuilder. Does anyone have an idea why this might be happening? I am utilizing UpdateValue ...
I am currently learning Angular 8 and I am looking to globally set the minimum and maximum dates for a datepicker in my application. I would like to accomplish this by using format-datepicker.ts. Any suggestions on how I can achieve this? Min date: Jan 1, ...
This query has been raised multiple times in the past and I have reviewed all the suggested solutions. However, I am encountering a common issue - how to retrieve data from the parent component to the child component. I'm unsure of where I'm goin ...
Here is a simplified code snippet that highlights the issue I am facing: class Test { prop1 : boolean prop2 : string method() { } static create(prop1 : boolean, prop2 : string) : Test { let item : Test = { prop1: prop1, prop2: pro ...
In my HTML form, there are two fields called Year and Week. When the user chooses a Year and Week from the dropdowns, I would like to show the corresponding Month Name for that specific year and week. Is there anyone who can assist me in retrieving the m ...
After trying to build the production version, I encountered an error message stating that Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it.. Please refer to the screenshot of the error attached b ...
Hello there. I'm using an API that gives me the following data: (4) [{…}, {…}, {…}, {…}] 0: dueDate: "2018-03-26T00:00:00" priority: {priorityId: 1, priorityName: "Critical", priorityColor: "red"} statuses: Array(1) 0: ...
Currently, I am implementing Mat tabs (vertical) in one component and Mat expand/collapse functionality in another component. Upon clicking on a tab, the corresponding Mat expand should be displayed. You can view the progress of my work on this Stackblitz ...
Hey there! I am just starting out with angular 8 and have a java project where I'm using JDBC to connect to my beloved MySQL database. I have some valuable data stored in a MySQL table that I access in java and store in strings (or even a list). Now, my ...
Take a look at the stack blitz example where min and max validation is triggered: https://stackblitz.com/edit/angular-mat-form-field-icrmfw However, in the following stack blitz with an array of the same controls, the validation does not seem to be worki ...
I need assistance creating a table with dynamically generated columns and using the PrimeNg library for the grid. Despite asking several questions, I have not received any responses. Can someone please help me achieve this? To generate table column heade ...
My current task involves working with the Mat date picker, specifically focusing on setting up validation rules for start and end dates. One important rule to note is that the end date should always be after or equal to the start date. For instance: If th ...
Currently, I am working on integrating zip file upload feature into my Angular 8 application. There are 3 specific requirements that need to be met: 1. Only allow uploading of zip files; display an error message for other file types 2. Restrict the file s ...
I have a intricate object structure JSON{ alpha{ array1[ obj1{}, obj2{} ] } } In addition to array1, I need to include another array: array2 that will only consist of strin ...
I am currently developing an Angular app that involves working with two images: X.png and Y.png. My goal is to copy these images from the assets folder to a specific location on the C drive (c:\users\images) whose path is received as a variable. ...
While undergoing the tutorials and reviewing the documentation, I encountered the concept of `Template reference variables`. Despite my understanding of `NgModel` for two-way binding, I'm perplexed about the usage of `Template reference variables` in ...
Here is the code snippet from my TypeScript file: this.store.pipe(select(subscribe.getRegCategories)).pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => { if (data && data.length) { this.allRegCategories = data; ...
app.module.ts getHttpParams = () => { const httpParamsInstance = new HttpParams(); console.log(this.userForm.controls) Object.keys(this.userForm.controls).forEach(key => { console.log(this.userForm.get(key).value) const v ...
After setting up a fresh module in my Angular 8 project and adding a new directive to it, nothing seemed to happen at runtime (although the compilation was successful). I even added console logs to the directive to check if it was being executed different ...
timers: Observable<ITimer>[]=[]; Here is the template: <div *ngFor="let item of timers | async"> {{ item.time }} <div (click)="remove(item.index)">Remove</div> </div> I am encountering an error, why? The issue arises w ...
Hey there, good morning everyone! I'm currently working on an Angular 8 app that showcases a table filled with data from a database. This table comes equipped with a search box and a pagination feature using the "Ng2SearchPipeModule" and "JwPaginatio ...
After developing a custom Tabs component, I have implemented it in the following way (StackBlitz example): <tabs> <tab title="Tab 1"> <div toolbar> <message><span>Message 1: </span></message> &l ...
After upgrading from Angular 7 to Angular 8, I observed a downgrade in my webpack version from 4.33.0 to 4.30.0. With the new support for dynamic importing in angular8, I wanted to utilize webpack "magic comments" to customize the chunk name of my angula ...
I am working with a class that includes the following properties: export class Model { public id: number; public name: string; } Is there a way to make this class observable, so that changes in its properties can be listened to? I'm hoping for som ...
Can Angular bind a click event dynamically from a component to another existing component on the page? Check out this image for reference. In my app, I have 4 simple components - a shell component that defines the layout, a header component (blue outline) ...
I am currently developing an application using jhipster, Spring Boot, and Angular. One challenge I am facing is setting up different public keys based on whether the app is running in a development or production environment. I have spent a considerable a ...
I am currently faced with a scenario where the back end is returning the value as follows: 123222_D1.123 However, I need to display the date from the database (12-Jun-2020) as 2020-D1.123 in a drop-down menu. Currently, I am displaying the above value i ...
Our team is currently working on developing an app that will interact with the Horizon Stellar Server. As newcomers in this area, we are exploring the use of Angular 8 and Ionic 4 frameworks. However, we have encountered difficulties when trying to import ...
Trying to execute the command ng test, I encountered an error message. How can this issue be resolved? I am unsure of its meaning. ERROR in Must have a source file to refactor. To eliminate this warning, use "ng config -g cli.warnings.versionMismatc ...
I have successfully implemented a mat dialog table with 3 columns - name, email, and delete icon. When the user clicks on the delete icon, it prompts a confirmation message to confirm the deletion. Upon confirming, the item is removed from the database. Ho ...
I need the Submit button in my form to only be enabled when there is a change in the input. If the values in the form controls remain unchanged, the Submit button should be disabled. Initially, I attempted to utilize the FormGroup.pristine flag for toggl ...
In my Angular 8 project, there is a service function responsible for copying data. However, I encountered an issue where if I copy the data on a page, navigate to another page, and then return to the original page to copy the data again, it ends up duplica ...
Here is the content of my package.json file: "@agm/core": "^1.1.0", "@angular/animations": "^8.2.14", "@angular/cdk": "^6.4.7", "@angular/common": "^8.0.0", "@angular/compiler": "^8.2.14", "@angular/core": "^8.2.14", "@angular/forms": "^8.2.14", "@angular ...
Having previously utilized fuse.js in a JavaScript project, I am now navigating the world of Angular. Despite installing the necessary module for fuse.js, I'm encountering difficulties implementing its search functionality within an Angular environment. A ...
I am having trouble with this particular HTML code. <ngx-datatable-column name="Option" prop="option" [draggable]="false" [resizeable]="false [width]="250"> <span> <button class="optionButton" type="button" data-to ...
Currently, I am in the process of developing an Angular 8 application. In this app, when a user clicks on a button, they should be redirected to a vendor portal that is hosted on a different web application with a different URL. When the user lands on the ...
Incorporating both the Google Places and Distance Matrix API into my Angular 8 application has been a key aspect of its functionality. Initially, I attempted to limit access to the API by specifying the application URL () on the Google Cloud Platform. Su ...
let information = { headerFields: { noKey: [{ key1: { name: "test1" }, key2: { name: "test2" }, key3: { name: "test3" } }], hasKey: [{ key1: { name: "test4" } ...
Within an overarching HTML structure, I have various components like chart 1,2,3,4,5. Whenever the date is altered, I need to transmit that selected date to all the components. The following code represents the implementation of the event emitter between p ...
Here is the code snippet for my HTML routerLink: <a [routerLink]="['create']">Create</a> - it's working just fine. When I try to call the same on a button click, it doesn't work.. navigateTo(page) { this.router.na ...
Currently I am working on a material tab feature where I aim to dynamically generate tabs based on the values from my JSON data. Below is the JSON data: [ { "regionName": "EMEA", "regionCurrency": "USD", "organizationName": "XYZ", "orga ...
Following the update of my project from Angular 7 to Angular 8 and resolving all errors caused by breaking changes, I am encountering a new issue: <div fxFill ngStyle.xs="overflow:auto"> This line is resulting in the following error: ERROR Type ...
In my Angular project, I am working on a home component that contains a specific method. This method is defined in a service file called service.ts and imported into the homecomponent.ts file. The method is named filterClicked with a condition within the s ...
Is it possible to enhance the text with some CSS styling to make each item stand out like in this example: https://i.stack.imgur.com/kSyZE.png I prefer not to include a cross button or provide users with the option to add tags. The data is coming from a R ...
My custom angular reactive form includes a ng-select component along with other elements. I have implemented the following code to validate the form: private validateCustForm() { this.validation.touchFormControls(this.appointmentForm); if (this.ap ...
Within my application, I have a parent component and a child component responsible for adding and updating tiles using a pop-up component. The "Add" button is located in the parent component, while the update functionality is in the child component. When ...
My search page is equipped with numerous filter options, all of which are included as parameters in the URL for easy sharing. When moving from the search results to a detailed view of an item, I pass the complete search result URL as a parameter (detail/1? ...
Currently, I am working on integrating a credit card payment method and formatting its number through specific methods. Here is how it is done: HTML <div class="form-group" *ngFor="let formField of cardFields; let cardFieldIndex = index;"> ...
Consider the TypeScript interface below: export interface Model { numberValue: number; dateValue: Date; } I have initialized instances of this interface by setting the properties to empty strings: let model1: Model = { numberValue: +'', ...
Encountered an issue in ../node_modules/@angular/http/src/backends/jsonp_backend.d.ts:1:28 - error TS2307: Module 'rxjs/Observable' not found. 1 import { Observable } from 'rxjs/Observable'; ~~~~~~~~~~~~~~~~~ ../node_mod ...
Encountering a peculiar issue with the translate service. Here's how I set it up: export class AppComponent implements OnInit { constructor( private translateService: TranslateService, angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics, ...
I need help with redirecting to another component in my Angular application. Currently, I have the following code: HomeComponent checkUrl(reference) { if (reference != this.ref) { this.router.navigate(['/еrror']); } } This is how m ...
When applying the class name like this: <tr *ngIf="crud.isCreate" [ngClass]="{'create' : crud?.isCreate}"> The class name is not being added correctly. In HTML, it appears as: <tr _ngcontent-yql-c9="" ng-reflect-ng-class="[object Object]"> - ...