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.

Filter by
Sorted by
Tagged with
10
votes
1answer
21k views

Angular 2 clock with RxJS Observable

I'm fairly new to Angular 2 and I started off with creating a clock for my app. I tried to stick to the official documentation tutorial. Folder structure: The CSS file is still empty and the HTML is ...
8
votes
1answer
2k views

Angular directive to disable a button when clicked, allowing re-enabling as needed

I have written an Angular Directive that disables a button after it has been clicked, to prevent double posting / saving of data. This works fine in most of our use cases. However, in some situation ...
8
votes
1answer
382 views

Lightweight Angular tooltip component

I made a small Popup component to show different error/success...etc. messages. Template: ...
7
votes
3answers
8k views

Counting characters inside of a textarea using Angular

I have a textarea and need to calculate how many characters have been typed into it. Both of the following solutions work correctly—which would be preferable,...
6
votes
1answer
12k views

Audio player in Angular 2

I just built an audio player in Angular 2 using a player component and a player service. It's all working fine, I just feel like there is a much better way to do this. Should the audio object be in ...
5
votes
1answer
8k views

RxJS Observable with initial value

Is it possible to get rid of the BehaviourSubject to have an Observable with an initial value? Another thing I don't like is that I'm using getValue() and then modify this value and push it with next ...
5
votes
1answer
4k views

Making multiple http request Angular2

I need to get some ids from contacts and contactgroups to be able to collect the data. My example works but i dont know if this is the way to go. ...
5
votes
1answer
34 views

Merging client names into orders using RxJS

I have an API which I can't modify. I have to use data as it is. I want to join data from two separate requests where the second request is based on data from the first one. I have a working ...
5
votes
1answer
99 views

Angular component for a system to store student test scores

I am designing a system and in it there is a view where teachers can see a summary of test data on students. Here is the component of it: ...
4
votes
1answer
3k views

Filtering objects according to required and preferred attributes

This my opportunity object which is a part of my angular app.component.ts file. In my template(HTML of this component) I want to ...
4
votes
1answer
210 views

Simple Cookie Service - Returns value of cookie based on cookie name passed in

Introduction So I have written a simple service that, when loaded, reads all of the cookies in the document, reduces them to a simple object where the cookie name is the key, and the cookie value is ...
3
votes
1answer
154 views

Angular service for fetching and passing data with observables

I have an Angular service consisting of three methods: This method makes a call to my server to get a URL ...
3
votes
2answers
304 views

Quiz component with different but similar data models

I have a component with this template: ...
3
votes
3answers
157 views

Angular, sort objects by their keys

I had to sort a list of objects - {name:'name', email:'email} by their keys, ex. by email, so they all be rendered with ...
3
votes
1answer
295 views

Angular + Redux app organization and initialization: transfer from a PHP-driven website

Our system is largely a PHP-driven system. We're not doing the full split back/front-end. Most pages are plain HTML served directly by PHP. However, a few parts of the system are very dynamic and ...
3
votes
1answer
58 views

API calls organization in Ionic (Angular) application

I'm doing a prototype of server API calls in my Ionic (Angular) application. I'm considering this use case: ...
3
votes
1answer
1k views

Angular 2 service to upload a batch job and poll for results

I have to write a web interface for one of my homebrew projects. Since I'm not familiar with HTML and CSS I've decided to take heavy duty framework such as Angular 2. This is my first experiment - I'm ...
3
votes
1answer
3k views

Chaining 3 dependent HTTP request subscriptions one, which is polling

Here is a function that triggers after selecting from a dropdown to choose the floor. As you can see, there are 3 levels of API calls (regular HTTP GET requests with JSON responses) that chain ...
3
votes
1answer
3k views

Best solution for returning results from a generic Typescript service

I am beginning to develop a common data service that can be used by other services. Specifically, this service will be injected into a generic abstract application service. I am trying to figure out ...
3
votes
2answers
569 views

Angular Guards - Firebase loggedInAndVerified

I have an app that I want to limit to both logged in and verified users. I was able to make two separate guards (logged-in.guard.ts and ...
3
votes
1answer
61 views

Separating items into ordered and unordered lists

I'm trying to group all the types which have ordered-list-item & unordered-list-item into new object. How can I simplify the function and reduce multiple return statements? ...
3
votes
0answers
103 views

Fetching user information along with user posts in Angular

Here is my code with 2 services, one is messageService which is used to get user messages: ...
3
votes
0answers
2k views

Angular async pipe with loading spinner and manual refresh

I have an Angular 6 app with the following requirements: Get data from a web service. Load the data when the page is displayed. Reload the data when the user requests a reload by through some UI, ...
3
votes
0answers
148 views

Build dynamic HTTP service with Angular

I have an Ionic application, this application contains set of pages and services. Since I'm working with Ionic and Angular I decided to build reusable code for different projects, for example: HTTP ...
3
votes
0answers
208 views

Vehicle price calculation Angular service

I have written a service which can generate prices from inputs. However, I feel that this can be "refactored" because it is not flexible enough. The code "works" however I feel if I could make this ...
2
votes
3answers
6k views

Angular2 Route Interceptor

WARNING: Please see @MgSam's answer for a fatal bug in my original code. He has a revised version that fixes the bug. I have made a route interceptor service that has an API to hook into every event ...
2
votes
1answer
80 views

List component using RXJS Angular

I have a small angular project, where I have an Article component to list articles with pagination system. The default page The placeholder loader page The main objectives are: Display the ...
2
votes
1answer
531 views

Storing a fetched list of printers in Angular

I have a need to store data retrieved my ASP.NET Web Api to stop making redundant API calls for the same data when I navigate through my Angular page. On my API I have a database which stores a list ...
2
votes
2answers
129 views

Filter ads according to the URL

I'm building an app in angular 4. Have a listing page which shows all ads. I want to reuse same HTML/ JS for this page for all my needs. My needs are: All ads should be shown in this page; Those ads ...
2
votes
1answer
843 views

Angular - reusing an observable for different queries

This is just a dummy example, but in my real world application I get a lot of data from the web API and I'd like to manipulate it on the client's side. So, I kind of stored the observable I get from ...
2
votes
1answer
46 views

Angular2 Toggling showing and hiding between two elements

I have a tabs nav element that has two tabs, it needs to show a component based on what tab was clicked and hide the other component. If the clicked tab is already "active", the component needs to ...
2
votes
1answer
4k views

Angular 2 window service that listens for 'click away'

This is the angular service I wrote window.service.ts. ...
2
votes
1answer
5k views

Angular4 MultiSelect Component

I wrote an Angular 4 app and a part of it was a multiselect component. The multiselect component acts like a basic HTML select but gives you the ability to select more than one option, typeahead, and ...
2
votes
1answer
859 views

Angular 2 sortable lists

I wrote a simple and small projects that present 3 buttons, each one loads a different list to the screen on the same place but not in the same time. In my HTML, I think I can maybe use some more ...
2
votes
0answers
27 views

Angular 8: Scroll spy implementation for a timeline Contents

I have made a timeline component that can have multiple milestone/major/minor as sub components nested within timeline container component. I have also added a side navigation for that lists all ...
2
votes
0answers
196 views

Accordion component with Angular 7

I have to made an accordion-, respectively "zippy"-component using Angular 7. I'm new to Angular. Just started with it a few weeks ago. But with some Google-usage I was able to implement the ...
2
votes
0answers
56 views

Angular polling and plotting component using Firebase

I could use some help refactoring my component and service. I have a lot of nested logic and wasn't sure what I could do to improve this. I'm new to Angular 7 and their piping syntax. I suspect this ...
2
votes
0answers
32 views

Caching different http-requests

There have been multiple discussions on caching http-requests with RXJS. In this question/proposal I want to propose a custom rxjs-operator (non-pure) to provide ...
2
votes
0answers
34 views

Set a time based on hh:mm length, or set time length based on time

I am using Ionic 3, Angular 5, and moment-timezone. I have a form input that displays EndTime (in the format of 01:23 AM) and another that display the length (in ...
2
votes
0answers
1k views

Angular 5 Forms - Extending Form Control

Currently taking a first pass at Angular Forms with some colleagues and I'm noticing an interesting design pattern implemented by a coworker where the FormControl is being extended to allow for ...
2
votes
0answers
1k views

RXJS queue up multiple http requests and send when x conditions happens

Just started to use rxjs few weeks ago, I think I'm getting most of it right, but my code seems to be not that efficient and prone to bugs I haven't run into yet! I need to be able to send http ...
2
votes
1answer
8k views

Jasmine unit test that triggers mouse events in Angular 4

I have the following jasmine test spec which triggers the mouse events in my directive. As you can see there is a lot of code duplication here, I am repeating the events here. ...
1
vote
1answer
121 views

Angular component to render currency or date values

I have an Angular component and it is just a label which renders a value and if it has an associated pipe, the output of the pipe should be rendered as value of the label. But I don't want to declare ...
1
vote
1answer
215 views

Unit testing static method that imports environment file

I'm (very) new to writing unit tests and I'm wondering how I should approach testing a static method that constructs our API endpoints based on what the properties are set to in our ...
1
vote
2answers
94 views

DataService that fetches data not loaded already or loads cached values

I load an array from an API that is available throughout the user's whole session. This data is unlikely to change, so it can be cached safely. I have a DataService ...
1
vote
1answer
43 views

Creating a real unit test in Karma for Angular code [closed]

This is a piece of test code made for the Angular application. The router object is a mock provided by the RouterTestingModule dependency. I wonder if such a test can be considered a unit test (...
1
vote
1answer
62 views

FormArray total of each formgroup via RxJS

Stackblitz - https://stackblitz.com/edit/angular-plp4rb-formarray-total-prs9ay I'm new to RxJS observables. I've created a form array where the total for a line is ...
1
vote
1answer
37 views

Unit Test case to check if localstorage is empty once I logout of the Web app

I am trying to clear my localstorage when I am logging out of the application. I want to write a unit test case in Jasmine to check if this task is performed when logout function is run. I am writing ...
1
vote
1answer
89 views

Language switcher, consulting browser's localStorage

I'm using angular 6 and ngx-translate. This is my switch language function ...
1
vote
1answer
882 views

Angular retrieve data through Pipe

I have recently come up with an idea to retrieve additional data through Pipe, and I am not sure if I created a cool solution or terrible abomination. I will try to present the problem and my solution....