Questions tagged [angular-2+]
Use this tag on posts involving code written with versions 2 & above of Angular, the web framework from Google. Use the 'angular.js' tag for posts involving the older AngularJS (1.x) framework.
143 questions
1
vote
0
answers
22
views
Real-time data functionality using SubjectBehaviour in Angular v18
I'm building a personal finance app in angular v18 https://github.com/sumaya-aj/personal-finance-app
I started with "Pots" section.
The code I shared has two components and a service.
The ...
0
votes
0
answers
23
views
Angular HTTP Interceptor with token auto refresh
Its purpose is to put the access token (if it's present) into all requests towards my backend, and if it detects that the access token has expired, to refresh it and retry the request.
Here is the ...
1
vote
0
answers
16
views
Loading Spinner Implementation
I've recently implemented a loading spinner for my web application and would greatly appreciate your feedback on the code. The spinner is supposed to display while data is being fetched from the ...
1
vote
0
answers
94
views
Angular Lazy Loading Component into HTML template
I want create a generic component for lazy loading other component
Demo online (click on load button)
https://stackblitz.com/edit/angular-v7xfwb
this is the code
...
0
votes
1
answer
205
views
Check if string starts with vowel
I am using a template for a text inputs and feedback messages to simplify my html code. This passes in variable string called label and populates the placeholder ...
2
votes
0
answers
249
views
Set-new-password form, including validation
I've got to make a form using Bootstrap and Angular, which validates the following requirements:
Old password, new password and confirm password are mandatory fields.
New password has to be equal ...
2
votes
0
answers
180
views
Angular: ViewModel for safe two-way binding & MVVM
Introduction: Any angular dev should know that Angular tends to provide multiple ways of doing things. When it comes to forms, I tend to prefer to rely on forms of the template-driven variety, and ...
-1
votes
1
answer
35
views
A better way to write if this then this = this / number or * number [closed]
Im wondering if there is a better way to write these expressions in Angular 13, They dont fit most of my more senior compatriots code, And i'd like to not add messy conditionals if not needed. They ...
3
votes
1
answer
154
views
Angular - Contact manager component with API
I am starting with the Angular and I need some support. I have watched some of the tutorials and lot of them are using things differently. I upgraded some tutorial with my own idea, but I am not sure ...
0
votes
1
answer
33
views
Validating with both a field validator and a form valdator
This (minimal demo) code obviously works, but I am a bit taken aback by the hoops I needed to jump through (and little to no mention in Angular (v13) documentation about the technique). I'm still ...
1
vote
1
answer
134
views
Convert from get response to array of type
I would like to know if this is the best/most efficient/industry standard way of converting from the http response to an array of typed values:
Type class:
...
0
votes
1
answer
84
views
Simple refactor of value changes typescript
Hello all I am using some typescript reactive forms, like this
...
-1
votes
1
answer
1k
views
If condition in combineLatest observables [closed]
I have many observables so I use combineLatest in RxJS. After get all results I need to check one of value by using if condition. If the condition meets then call ...
1
vote
1
answer
82
views
Typescript error handler
I wrote a function in Typescript which takes required parameters, optional parameters and parameters with default value. I want to use this function for error handling of http requests. I am not sure, ...
6
votes
1
answer
3k
views
Custom RxJS operator to prevent duplicate API calls in Angular
I have a usecase where I want to prevent unexpected duplicate Http calls. I'm wondering if I can have a custom operator which can be used in pipe for any API as shown in below ...
1
vote
1
answer
232
views
Should I use standalone service for angular custom APP_INITIALIZER
I'm working on a Angular Electron application where we display loading screen while the application is starting up. This means we have to do couple of BE requests and only remove the loader when we ...
0
votes
1
answer
821
views
Angular and Typescript page with for loop and array
I have a page that shows the result of a quiz and depends on the number of right answer, the user get some rewards. So, if the user get just one right answer, he will get one reward, the others will ...
1
vote
1
answer
105
views
Sort an object array with two variable based on the language
I'm trying to sort a Sector array and a Province array based on the language.
sector.ts:
<...
1
vote
1
answer
121
views
Hidden html elements after search click
I want to:
Hide areas of my template after search click.
Return its original state with the cleaning of the input related to each button.
I don't know if my code exploits all the resources of ...
0
votes
1
answer
62
views
Typescript angular queryparams
I have some code like this
...
4
votes
2
answers
145
views
Are there technical issues/disavdantages on this BaseService that aims to simplify calling API endpoints
I have created an angular BaseService that aims to simplify calling API endpoints
I would like to know if you see any code smells, bad patterns or architecture issues.
What disadvantages could this ...
0
votes
1
answer
408
views
Unit Test case for services method in angular
I want to write the test case for Service class.
My Service Class dynamic-form.service.ts
...
2
votes
1
answer
186
views
Rxjs search in Angular
I created an rxjs search for a hiring company, but I got rejected for the following reason:
-performance issue on a bigger data set.
-bugs
My question is how can I make this code better for the next ...
0
votes
1
answer
308
views
RxJs - Flat nested swithMaps and pass variables on Http interceptor
How can the following method be flattened? I tried to pipe all the operators to the first pipe (from(this.fireAuth.currentUser)) but I lost access to the previous ...
0
votes
2
answers
58
views
Verify application configuration from JSON file with matching type using TypeScript in an Angular project
To bootstrap our application we have a configuration stored in a JSON file. This config holds different settings, like definition of endpoints (e. g. an API or SMS gateway etc.) or some default values ...
0
votes
1
answer
1k
views
Handling a spinner for multiple REST calls
Context
In an Angular application, I have three <select> boxes that are fed from the database with a relatively small data set. These boxes are part of a ...
2
votes
0
answers
93
views
what should be the best approach to follow DRY principle here
My first component
...
1
vote
1
answer
79
views
Is it possible to make a re-usable icon component that doesn't create duplicate TemplateRefs
I have attempted to create an IconComponent that shows a different SVG icon depending on the string that is passed in.
Example:
...
0
votes
1
answer
73
views
Refactor dynamic filter functions
I create this menu filter component:
with this menu, in practice, you can filter on a cards list feeling free to choose different filters at the same time; the cards list returned will be the results ...
0
votes
1
answer
59
views
Angular observables piping
I wanted to check and see if this was as efficient as can be. The goal is to get a user's data from a group of documents that contains references to users in Firestore.
ngOnInit
...
4
votes
2
answers
3k
views
Angular10 RxJS - Interceptor to add/refresh JWT Token
I have a project, for which I use Tokenauthentication with JWT Tokens. I am relatively new to Angular Development and rxjs in particular, so there are a lot of concepts I am likely not yet familiar ...
3
votes
1
answer
665
views
How to approach separation of layers mapping response to model in Angular app?
I want to organize mapping for my Angular app so that code structure would clear for other developers and I want to have as less code as possible.
I have an api service that is responsible for ...
2
votes
1
answer
2k
views
Rewrite BehaviorSuject that takes either localStorage or Observable in Angular
I have this code
...
4
votes
2
answers
400
views
Angular Frontend login logic
This is a follow-up to this question Node.js backend login logic. I wrote the following login Angular frontend logic for my Node.js Backend (see the previous question above). Is it any good in terms ...
2
votes
0
answers
66
views
The best way to handle many, different requests with custom query params
I have a list of products, I would like to filter that products e.g. by number, price, type etc. using checkboxes, selects and inputs. I get my data from REST API - using query params in GET method. ...
2
votes
0
answers
272
views
Storing localStorage data as part of rxjs reducer?
I use ngrx in my Angular app to state management. At a certain time I was asked to save some variable to local storage and retrieve it with first load.
That made ...
4
votes
0
answers
77
views
Is my Angular Material MessageBox component well build?
My angular knowledge is limited, so I don't know much yet about it's garbage collection etc to make sure my component can be used without any strange side effects or memory leaks.
I've created a ...
3
votes
0
answers
23
views
Simple Effects in Angular 2+ application using Firebase, NGRX and RXJS
Made an Angular app using Firebase, RXJS and NGRX.
...
2
votes
0
answers
41
views
3
votes
0
answers
31
views
Alternative Way of comparing multiple variable's to multiple variables
Hi guys Im very very new To Angular/Typescript Im teaching my self section by section by just messing around and figuring things out.
Currently im just doing loop's and outputs so I decided to write a ...
3
votes
1
answer
54
views
Iterating an Array Object & Assigning the Attributes Values to those that Match the Condition
Is there any approaches to reduce the below coding snippet in Angular 2+ with few lines of code by making use of ECMA Script or by some other ways
...
2
votes
0
answers
39
views
Switching article states using state pattern
The Article model supports a bunch of transitions. Only two are shown below: star()/unstar()....
4
votes
0
answers
1k
views
RxJS - Prevent valueChange of one form control if another form group is dirty OR an HTTP error has occurred
I've recently started working on an Angular 7 project (I'm pretty new to Angular and RxJS), and I was requested to implement this new functionality:
The Problem
I have to implement a component to ...
6
votes
1
answer
79
views
Code Refactoring for Dynamic List in Angular 8
With a specific requirement of showing/hiding the pages, the following implementation has been carried out.
The pages which needs to be hidden will be provided through an array
...
2
votes
1
answer
34
views
Javascript: Mapping combinations of input and possible suffix arrays leads to repetitive if statements
I am writing a program to combine the basic form of a word with suffix arrays following the choices from a form group (Angular 9) to receive the declination.
This is the flow:
The user inputs a word....
2
votes
0
answers
174
views
NativeScript - Angular Service to watch iOS keyboard event listeners
I'm writing an app with NativeScript 6.4.1 and Angular version 8.
There are a series of UI events in iOS that you can watch to see what the keyboard is doing:
https://developer.apple.com/...
2
votes
0
answers
29
views
Actions component in Angular
I have an action bar component. It helps do the CRUD operation for different component. Its only job is emit events. The emitted events are listened by the caller component. I am using a switch case ...
2
votes
0
answers
86
views
Group data based on dates to populate a Material Angular table with rowspans
I have this method that attaches the year and year's rowspan for a TD and Quarter and a Quarter's rowspan for the TD.
Year and Quarter are 2 columns in an Angular Material Table which are calculated ...
2
votes
1
answer
744
views
Subscribing and manipulating data from API in Angular
I'm trying to display the fetched data on a table. I structured the data based on the columns table in the UI and stored them in an array, then *ngFor on the table ...
5
votes
0
answers
645
views
IndexDB (RxJs) - Angular Service
Inspired by Wrapping IndexDB with RxJs.
(Edit - Added a Stackblitz example).
My use case is a simple, on-disk temporary cache. No errors are propagated, null ...