Questions tagged [angular7]

Are you looking for answers regarding Angular version 7? This tag is exclusively for questions related to this particular release of the web framework developed by Google. If your question pertains to any other versions, please use the general "Angular" tag instead.

How to Use ngFor to Create a Link for the Last Item in an Array in Angular 7

I need help with adding a link to the last item in my menu items array. Currently, the menu items are generated from a component, but I'm unsure how to make the last item in the array a clickable link. ActionMenuItem.component.html <div *ngIf="expa ...

Tips for sending back a response after a request (post | get) is made:

In the service, there is a variable that verifies if the user is authorized: get IsAuthorized():any{ return this.apiService.SendComand("GetFirstKassir"); } The SendCommand method is used to send requests (either as a post or get request): ApiServi ...

TypeScript: Error - .map() is an Invalid Function

I have come across numerous questions similar to mine, but the vast majority of them pertain to an Observable, which is not the issue I am facing. The code snippet in question looks like this: selectedItems: Item[] = null; selectedDate: Date = null; subm ...

Upgrade from Angular 7 to the latest version, Angular 8

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 ...

Transferring pictures between folders

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. ...

The Angular 7 template falls short of occupying the entire page

I am currently working on converting an HTML page into my Angular project. While it functions correctly in the HTML version, it does not fill up the entire page when transferred to Angular. You can view an example of this issue on StackBlitz at the followi ...

Unable to initialize default values on Form Load in Angular Reactive Forms

My goal is to make an HTTP request by passing an ID, then take the response and assign the values to form fields. I attempted using setValue and patchValue methods, but they did not yield the desired results. spService itemData = new ItemData() getIte ...

Upgrading from Angular 5 to Angular 7: A seamless migration journey

Following my migration from Angular 5 to Angular 7, I encountered an issue with RxJs operations such as observables and @ngrx/store. Here is the error message I received: ERROR in node_modules/@ngrx/store/src/actions_subject.d.ts(2,10): error TS2305: Mo ...

Using the map operator in an Angular 7 application with rxjs

Despite successfully compiling my code and having everything work perfectly, I encountered an error message in my IDE (Visual Studio Code) that is preventing me from deploying my app using ng build --prod: ERROR in src/app/training/training.service.ts(6 ...

synchronize the exchange of information and events between two components

Just joined this platform and diving into Angular 7 coding, but already facing an issue. I've set up two components along with a service. The data is fetched by the service upon clicking a button in the searchbar component, and I aim to display it i ...

What could be causing angular-datatable to not properly fill columns in Bootstrap 4?

I have been attempting to create a responsive table using angular-datatables (for angular 7) and bootstrap 4, but I am encountering issues with the current appearance of the table: Current HTML code: <div class="row"> <d ...

The input in the schema fails validation against the Angular 7 schema with the following data: {"name":"testng7"}

After updating the Angular CLI to the latest version on my Mac OS, I encountered an issue when trying to create a new project using the command ng new testng7. The error message displayed was: Schematic input does not validate against the Schema: {"na ...

Trouble encountered when utilizing [ngClass] - Error occurred due to changes in expression after it has been checked

I keep encountering an error when attempting to utilize [ngClass] in my Angular project. The specific error message I receive is as follows: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ' ...

What is the method for determining if an ngModel input field has been modified?

I'm currently working with this HTML template: <input type="text" ngModel #myValue="ngModel" name="{{ fieldName }}" id="{{ fieldName }}" value="{{ myVal }}" class="form-control" (change)="checkDirty(myValue)"> How can I determine if t ...

Ways to dynamically display or hide content in Angular 7

>when an English button is clicked, its corresponding div should be shown. If another button is clicked, its div should also show without closing the previous one. I want each div to close only when its respective button is clicked again. >Please not ...

The MatTableDataSource provides a promise that includes approximately 7000 rows of data

When attempting to load a large amount of data into a MatTableDataSource, I am facing an issue. I would like to display a loader until the data is fully set, but I am unsure of when that happens. I attempted to use a promise like this: return new Promise(r ...

Is there a substitute for $sce in Angular 7?

Previously, in Angular 1, we utilized $sce to display HTML tags like this: > <p><strong>xyzz</strong> yttryrtyt <span > style="color:#e74c3c">abc</span>.</p> in a user-friendly format. I am now curious about th ...

What is the best way to remove all validators from a different component in Angular 7 using reactive forms?

I need to find a way to clear all validation in a form group on a sibling component when a boolean value is selected on another component within the same application. Is there a solution for achieving this? We have implemented a method in our application ...

Unexpected behavior observed with field alignment

I've been attempting to align the field in an Angular HTML page, but it's not working out as I expected. Here's how the HTML file looks: <div id="report-prj-search"> <div class="dx-fieldset flex-column"> <div class="flex-row-container ...

Guide on sending JSON object to Angular custom components

I have implemented a custom element in Angular 7 using the CUSTOM_ELEMENTS_SCHEMA. My app.module.ts code is as follows: export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { this.registerCustomElements( ...

Access information from a different component within the route hierarchy

Suppose you have three components named A, B, and C with the following routing direction: A -> B -> C To retrieve data from the previous component (going from C to get data from B), you can use the following lines of code: In Component C: private ...

When incorporating leaflet-routing-machine with Angular 7, Nominatim seems to be inaccessible

Greetings! As a first-time user of the Leafletjs library with Angular 7 (TypeScript), I encountered an error while using Leaflet routing machine. Here is the code snippet that caused the issue. Any ideas on how to resolve this problem? component.ts : L. ...

The form data consistently replaces existing values with each new entry added

I am struggling to persist all the form values that are entered in my component using local storage. Despite setting and pushing the form values, I noticed that each time I push the data, it replaces the previously entered form data. My goal is to retain a ...

Modifying Array Values in Angular 7

I am currently dealing with a complex array where questions and their corresponding answers are retrieved from a service. Upon receiving the array, I aim to set the 'IsChecked' attribute of the answers to false. The snippet of code I have written for this ...

Guide to summing the values in an input box with TypeScript

https://i.stack.imgur.com/ezzVQ.png I am trying to calculate the total value of apple, orange, and mango and display it. Below is the code I have attempted: <div class="row col-12 " ngModelGroup="cntMap"> <div class="form-group col-6"> ...

What is the best way to implement NgClass on a single iteration within NgFor while utilizing parent/child components?

My goal is to toggle the visibility of tiered buttons when a parent button is clicked. I am using ngFor to generate three buttons on tier 1, but I'm struggling to select only the desired tier when clicked instead of affecting all of them. I've managed to ...

Encountered an unhandled promise rejection: TypeError - The Form is undefined in Angular 6 error

Whenever I attempt to call one .ts file from another using .Form, I encounter the following error: Uncaught (in promise): TypeError: this.Form is undefined The file that contains the error has imported the .ts file which I intend to pass values to. ...

Utilize Angular roles to sort and organize website data

Exploring the utilization of login roles in my Angular SPA application which operates solely on the client side, integrated with Spring Security and Spring Boot. I have concerns about potential unauthorized access by a skilled developer who could manipula ...

Tips for concealing information within the column labeled company Name with respect to the field designated as Company Name

I am currently working on an Angular 7 app and I am facing an issue: I cannot hide the data in the column for Company Name. The field "Name" in the report control JSON is labeled as Company Name. The report control is a table that contains various fields ...

The NullInjectorError has occurred due to the absence of a provider for the InjectionToken angularfire2.app

I am currently working on inserting form data into a Cloud Firestore database. Below is my x.component.ts file where I encountered an error in the constructor section: private firestore: AngularFireStore import { Component, OnInit } from '@angula ...

"Implementing material-ui in Angular 7: A Step-by-Step Guide

I am looking to integrate material-ui into my Angular 7 project. While I know that Angular Material is available, I prefer using ui-material over it. However, I am unsure about how to implement ui-material in an Angular environment. ...

Requesting access with Angular

Hi there, I'm currently getting started with Angular and I am eager to create a login feature. However, I am unsure of how to send a login request. Despite my efforts to find similar inquiries, the only information available pertains to older question ...

Please come back after signing up. The type 'Subscription' is lacking the specified attributes

Requesting response data from an Angular service: books: BookModel[] = []; constructor(private bookService: BookService) { } ngOnInit() { this.books = this.fetchBooks(); } fetchBooks(): BookModel[] { return this.bookService.getByCategoryId(1).s ...

Upgrading from Angular 6 to Angular 7

After upgrading my Angular 4 app to Angular 6, I'm now looking to make the jump to Angular 7. According to a recent article, running the command below should only take around 10 minutes for the upgrade process: ng update @angular/cli @angular/core F ...

Angular 7: Utilizing ngModel to check a checkbox within the ngOnInit lifecycle method

I am experiencing an issue with the function I am calling below in ngOnInit. I am trying to bind a checkbox value using ngModel, but for some reason the default checkbox is appearing as checked even though it should be unchecked. Can't seem to figure out w ...

How to use jsZIP in angular to bundle several CSV files into a single zip folder for download

I have a code snippet below that demonstrates how to create data for a CSV file and download the CSV file in a zip folder: generateCSVfiles() { this.studentdata.forEach(function (student) { this.service.getStudentDetails(student.studentId).subsc ...

Retrieving Child Route Parameters in Angular 7

Fetching the parameter 'id' only from the corresponding page component seems to be a challenge. The params id cannot be accessed from other individual components such as the header component. //The code snippet below works only in the corresponding compon ...

Changing the color of a Chart.js chart in Angular: A step-by-step guide

I've been struggling to change the color of my chart without success. Any assistance on this matter would be greatly appreciated. Despite trying to assign color values to datasets, I am still unable to achieve the desired result. This is a snippet f ...

Exploring the Method of Utilizing JSON Attribute in typeScript

How to access JSON attributes in TypeScript while working on an Angular Project? I'm currently in the process of building an Angular project and I need to know how to access JSON attributes within TypeScript. test:string; response:any; web_as ...

What could be causing the issue: Unable to locate or read the file: ./styles-variables?

I'm currently following a tutorial on how to create responsive layouts with Bootstrap 4 and Angular 6. You can find the tutorial here. I've reached a point where I need to import styles-variables.scss in my styles file, but I keep encountering the followi ...

Troubleshooting NativeScript 5: Uncovering the iOS Memory Woes of Crashes and Le

Check out this link for more information: https://github.com/NativeScript/NativeScript/issues/6607 Software Stack: NativeScript 5 Angular 7 Demo repository: https://github.com/reposooo/ns-out-of-memory This issue is based on a similar problem i ...

Require that the parent FormGroup is marked as invalid unless all nested FormGroups are deemed valid - Implementing a custom

Currently, I am working on an Angular 7 project that involves dynamically generating forms. The structure consists of a parent FormGroup with nested FormGroups of different types. My goal is to have the parentForm marked as invalid until all of the nested ...

Trouble with retrieving header after implementing logic in Angular 7

Here is the code snippet: app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'PUT, GET, DELETE, POST, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Origin, Accept, Con ...

CDK virtual scroll problem occurs when scrolling down, items are displayed slowly and occasionally blank for a few seconds

In my project, I am utilizing Angular's virtual scroll feature. However, whenever I scroll down, the items load but flicker momentarily. I have attempted to use maxBufferPx and minBufferPx as well as adjusting positions to resolve this issue, but so far n ...

Angular 7 error: No provider found for PagerService causing NullInjectorError

I have been struggling to get pagination working properly in my project. Below is the code I have written: pager.service.ts: import * as _ from 'underscore'; @Injectable({ providedIn: 'root', }) export class PagerService { ...

Switch between classes when hovering over / exiting ngFor elements

Displayed below is an element created using ngFor <span *ngFor="let picture of pictures; let i = index"> <a target="_blank" href="{{picture.image}}" class="thumbnail-display image-overlay"> <span class="overlay-icon hide"> ...

What is the best way to include a mat-paginator with mat-cards?

Just starting out with Angular and trying to implement pagination for mat-cards instead of just tables. I have a lot of code and want to display only 8-10 cards per page. How can I achieve this? Below is my HTML and TypeScript code. .html file <div cl ...

Why is Angular ng-block-ui not functioning properly in Angular 7?

Within my app.module.ts file import { BlockUIModule } from 'ng-block-ui'; imports: [ BrowserModule, BlockUIModule.forRoot(), ] Inside the dashboard component: import { BlockUI, NgBlockUI } from 'ng-block-ui'; export class Da ...

Tips for concealing error messages in Angular 7 when an input field is in focus

Is there a way to hide the custom validation message div when the input field is in focus? I'm looking for a solution to this issue. <div class="form-group"> <label class="col-sm-4 control-label">Password</label> <div class="col ...

Testing Your Angular 7 Code: Unit Testing Made Easy

I am currently working on developing unit tests for this angular script: export class DataService { private csrfToken: string = ''; private isContentShown: BehaviorSubject<boolean> = new BehaviorSubject(true); constructor(private http: HttpC ...

Tips for converting file byte code to file form data

From one folder I am retrieving a file and uploading it to another server. However, when I extract the file from the first folder, I receive a byte code representation of that file. The API for uploading the file to the second folder requires FormData as a ...

Getting the local path of a file from an input file in Angular 7

Is there a way to retrieve the local file path from an input field in HTML? After running the code below, I obtained 'C:fakepathfileTest.txt' I am looking for a method to get the local path so that I can pass it on to my controller in .netcore web ...

Build an Angular wrapper component for the phone textbox functionality

Looking to transform the Phone Mask solution below into an Angular component. Does anyone have a method to accomplish this? * Any solution that results in a similar component for a Phone textbox will suffice. Mask for an Input to allow phone numbers? ht ...

An effective way to apply Bootstrap styles to projected content within an Angular 7+ application

Although Angular content projection documentation is lacking, I have successfully implemented content projection. However, I am unsure of how to pass Bootstrap classes down to the projected content <ng-content></ng-content> in the child compone ...

How can I show distinct values in the Angular Material dropdown menu?

I am currently working on implementing a feature where I need to show unique options for the select using angular material. Below is what I have so far: where appitem is an array of items. <mat-form-field> <mat-select placeholder="Select app ...

Angular 8: How to dynamically assign formControlName in HTML according to the component

Within my database table, I have a field named "key_name" which is successfully being returned through the API and working as expected. My goal is to set the value of these fields as a formControlName in the HTML. In the component, I am using a reactive f ...

Error in Angular 7: ActivatedRoute paramId returns null value

On page load, I am trying to subscribe to my paramsID, but when I use console.log(), it returns null. I am currently working with Angular 7. Here is my TypeScript code: import { Component, OnInit } from '@angular/core'; import { Activat ...

SSR Angular application facing compatibility issues with Plotly.js

I'm facing an issue while developing an Angular app with server-side rendering (SSR) related to plotly.js functionality. The error message I encountered is as follows: C:UsersxDesktopAngularapp gseodistserver.js:351783 var style = document.get ...

The environment production variable is perpetually set to true within the app.module.ts file

I'm currently facing an issue with setting a configuration in my app.module file that should differ based on whether I'm in production or not. Within my environment.ts file, I have the following: export const environment = { production: false ...

Bootstrap 4 and Angular 7 application experiencing issues with toggle button functionality in the navigation bar

I am currently working with Angular7 and Bootstrap4. I am attempting to integrate a navbar into my application, but I am facing an issue where the toggle button does not work when the navbar is collapsed. It is important for me to mention that I do not wa ...

Add the component view to the webpage's body section

Using Angular 7 and ngx-bootstrap 4.0.1 Dependencies: "bootstrap": "3.3.7", "bootstrap-colorpicker": "2.5.1", "bootstrap-duallistbox": "3.0.6", "bootstrap-markdown": "2.10.0", "bootstrap-progressbar": "0.9.0", "bootstrap-slider": "9.8.0", "bootstrap-tags ...

Issue with Angular 7 Universal: components inside are failing to display

I have successfully implemented Angular 7 Universal with dynamic server-side rendering. However, I am facing an issue where dynamic components within the main component being rendered on the server are not rendered themselves. Here is an example of the re ...

Prepending the emulated prefix to Angular 6-7 ViewEncapsulation

Can we customize the tags generated when using ViewEncapsulation.Emulated in an Angular 2-7 component? Currently, it generates tags like [_ngContent-C0], but is there a way to add a custom string to the generated tag, such as [_ngContent-C0-myApp]? Thank ...

Tips for testing FormGroupDirective within a component

I am facing difficulties in testing a component with FormGroupDirective in the viewProviders section. I am unable to create a mock of the parent and set an empty formGroup. The component code is as follows: @Component({ (...) viewProviders: [ ...

Verify if the Contact Number and Email provided are legitimate

Is it possible to determine if the phone number or email entered by a user is valid or not? Using Angular 7 and Firebase? ...

Cannot utilize the subscribed output value within the filter function

I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...

Identifying Scroll Events with Ionic 2+ and Angular 2+: A Beginner's Guide

Is there a way to detect scrolling of the window? I attempted to use HostListener: @HostListener("window:scroll", []) onScroll() { console.log('scroll'); } I also experimented with using Renderer2: this.renderer.listen( 'window&apo ...

Angular 7 error: Form control with name property does not have a valid value accessor

Currently, I am utilizing angular 7 and have a parent and child component set up as demonstrated in the Stackblitz link provided below. Strangely enough, when I assign the formControlName from the child component using "id", everything functions flawlessly ...

Navigating through pages: How can I retrieve the current page value for implementing next and previous functions in Angular 7?

Greetings, I am a new learner of Angular and currently working on custom pagination. However, I am facing difficulty in finding the current page for implementing the next and previous functions. Can anyone guide me on how to obtain the current page value? ...

Merge two observables together to create a single observable that emits values from both sources. Only one observable will emit values

I am looking to combine two observables of type T[] obtained from httpservice. I have tried using forkJoin and zip, but they both return an Observable of type [T[], T[]]. However, I want to receive an object of type T[] as shown in the following code snip ...

The webpage contains duplicate ID attribute value "x" that has been identified

In my Angular 7 project, three components (a, b, c) all use an input element with the same id of "x". However, component b has 4 input elements all using the id "x" as well. This poses Accessibility Issues as ids must be unique. The test cases utilize &apo ...

Problem with loading image from local path in Angular 7

I'm having trouble loading images from a local path in my project. The images are not rendering, but they do load from the internet. Can someone please help me figure out how to load images from a local path? I have already created a folder for the images ...

The title tag's ng-bind should be placed outside of the element

When using ng-bind for the title tag inside the header, it seems to produce unexpected behavior. Here is an example of the code: <title page-title ng-bind="page_title"></title> and this is the resulting output: My Page Sucks <titl ...

The ngxpagination template is currently experiencing issues with filtering and pagination functionality

I have encountered an issue with my custom pagination template using ngx-pagination. Everything works fine until I introduce a filter pipe alongside the pagination. The problem arises when the filtered data set is not properly paginated - instead of displa ...

Add new data to an existing array in Angular 7 without overwriting it

After clicking a button, I'm retrieving data from the WordPress API: <a (click)="initGetComments()">Get comments</a> This is the code snippet: export class AppComponent { commentsResults: CommentsItem[] = []; ...