In order to properly handle incorrect API calls on the client side with Angular 5, I need to ensure that a 404 error is returned. Currently, the backend is returning a status code of 200 along with index.html, resulting in a JSON parse error on the fronten ...
Angular 1 uses the link function in a directive to target DOM elements. link: function (scope, element, attr) { // do something with element[0], e.g. put generated graphics // inside the node } What is the equivalent feature in Angular 2? ...
Currently, I am developing a web application using Angular 2 in an ASP.NET Core environment. The landing page is set at the base URL and has its own Layout file, Index page, and controller. My goal is to include a new section on my website located at /too ...
After receiving data from a JSON source, I have the following: { "name": "Leonardo", "weapon": "sword" }, { "name": "Donatello", "weapon": "stick" }, { "name": "Michelangelo", "weapon": "nunchucks" }, { "name": "Raphael", " ...
I am encountering an issue with my Angular 9 application. I have integrated angular-material and imported the MatCheckboxModule correctly in the module. Here is the version of the material package I am using: "@angular/material": "^10.2.0&q ...
My current method for displaying a certain number of * characters is utilizing the code snippet below: <div *ngFor="let line of lines; let i=index">*</div> I am interested in applying a margin only to the first element. The margin value sh ...
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 ...
Need help modifying an input field? Here's how: <input type="text" formControlName="name" placeholder="placeholder" (keypress)="function" (focus)="function" You can create a component to achieve the same functionality by using this template code: ...
In my Angular application, I am looking to utilize the Broadcast Channel API to ensure that the logged-in state is maintained across different tabs. However, the tab where the user logs in requires a slightly different code execution compared to the othe ...
After numerous attempts to install @angular/cli on Ubuntu terminal, I kept encountering the following error: **npm ERR! 404 Not Found: @angular/cli@latest**. Even though I had installed nodejs with nvm and set NVM_BIN path to /root/.nvm/versions/node/v9. ...
Currently, I am utilizing angular2-seed and thoroughly enjoying it. My aim is to incorporate the moment.js library into my project while also making use of its d.ts file. Upon attempting to execute the command typings install..., I encountered some obsta ...
A basic component is utilized to accept a configuration object as an input and utilize it to initialize certain values in the ngOnInit lifecycle hook. export class MyComponent implements OnInit { @input() config: ConfigObject; min: number; max ...
I have a project using Angular 4. I recently updated my Angular CLI version: Angular CLI: 6.1.5 Node: 10.9.0 OS: win32 x64 Now I'm wondering how to run ng serve for my Angular 4 project? However, I noticed that the file angular.json is missing in Angul ...
Can I retrieve the GET URL Query String Parameters from a specific URL using my Angular Service? For example, let's say I have a URL = "http:localhost/?id=123&name=abc"; or URL = ""; // in my service.ts public myFunction(): Observale<any> { le ...
I recently started learning Nodejs. I've created an API on a local server using Mysql and I'm working on the frontend with Angular, while using Nodejs and Express as the backend. However, I'm facing an issue where my Angular app cannot conne ...
Having difficulty with the layout implementation in Angular 6. A form component is dynamically added during runtime. Using ngx-sortable, I aim to have dynamic content within it, but am facing challenges with the setup. Implementing Sortable control: &l ...
Inspiration struck me when I realized the potential of adding a directive to the component designed for this particular route. It would elevate the functionality by letting me convey crucial information in a more declarative manner. Despite learning that ...
One scenario involves a child component passing form field data to a parent component after a button press. The challenge arises when needing to pass these fields as query parameters to an API endpoint API GET /valuation/, where approximately 20 optional p ...
I need to dynamically display images on my HTML based on specific conditions using TypeScript. In my TypeScript file: styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal",]; constructor(){ for (var i = 0; this.sty ...
I am currently working on integrating Angular Universal into my project and I am utilizing the AngularFire library. However, when testing my application locally by running npm run build && npm run serve:ssr, I encountered the following error: webpack: ...
Working on my Angular 11 application has been smooth sailing so far when I run (ng serve) in Google Chrome and Firefox. However, I've encountered a problem when trying to access it through Safari 5.1.7. The error message that pops up in Safari is: ...
After creating a custom (angular2) npm package and uploading it to my personal registry, I encountered an issue with delivering the icons along with the component. The component should display an icon by using the following template: <span [class]="& ...
I need help implementing an on change event when a file is selected from an input(file) element. What I want is for the event to set a textbox to display the name of the selected file. Unfortunately, I haven't been able to find a clear example or figure ou ...
I have successfully implemented the following code: this.http.post (TGT_IP,body, {responseType: 'arraybuffer'}).subscribe( (val) => { console.log("POST call successful value returned in body", val); }, ...
I am working with a dropdown list that can be used for various types of data. Some of the data includes an isActive flag (a BOOLEAN) while others do not. When the flag is absent, I would like to display the dropdown item in black. However, if the flag exis ...
I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specific vie ...
I encountered a unique scenario where I need to validate either a datetime format or an empty string. Both should be accepted inputs, but any malformed or incomplete datetimes should fail validation. myForm = this.form.group({ ... ts: [&apos ...
Below is a code snippet showcasing Angular 2/Typescript integration: @Component({ ... : ... providers: [MyService] }) export class MyComponent{ constructor(private _myService : MyService){ } someFunction(){ this._mySer ...
Just getting started with Angular and still learning the concepts. Trying to figure out how to show an icon only when it's hovered over. Can anyone assist me? Sorry, can't share the code because of company rules. The icons are for sorting and the sort f ...
I have spent countless hours trying to find clear documentation on setting up an Angular Material app with a theme, including changing the theme dynamically. Despite searching through numerous search results and visiting various pages, I have not been able ...
Currently, I have implemented the following code to reverse the list: this.items = this.db.list('/privacy').map( (array) => {return array.reverse()} ) as FirebaseListObservable<any[]>; When displaying the list, I call it like this: <ion-item ...
Is there a way to restrict users from accessing any route until they are logged in? I need help with implementing this feature in Angular 2 Component Routing. Appreciate any assistance, ...
Currently, I am attempting to implement the guidance provided in this Stack Overflow post on performing a File Upload using AngularJS 2 and ASP.net MVC Web API. The issue arises from the upload.service.ts file where an error is identified next to the prob ...
When working with Angular, I encountered an issue where the application was not handling multipart response bodies correctly. It seems that the HttpClient in Angular is unable to parse multipart response bodies accurately, as discussed in this GitHub issue ...
When it comes to validating user inputs, I often find myself wondering about the best approach to take. In this case, I have created a regex for numbers with decimal points. .ts part checkIsNumber(event) { console.log('event', event.target. ...
I am trying to implement a Google authentication button on my website. Here is the meta tag in the index.html file: <meta name="google-signin-scope" content="profile email"> <meta name="google-signin-client_id" content="xxxxx.apps.googleusercont ...
One issue I am facing is that the checked checkboxes are returning true instead of the value of input (type="checkbox"). Array displaying responded checked or unchecked items I am unable to store this data in an array as needed. Additionally, I cannot sp ...
I have implemented a TypeScript getter memoization approach using a decorator and the memoizee package from npm. Here's how it looks: import { memoize } from '@app/decorators/memoize' export class MyComponent { @memoize() private static memoizeEyeSr ...
We have specified the following versions in our package.json file: "@syncfusion/ej2-angular-richtexteditor": "^17.3.28", "typescript": "^3.1.3", and "@angular/cli": "^7.0.3". During the project build process using npm run build:ssr, we encountered the err ...
In my TypeScript file (simplified component) below code is present: public param_getting_updated_inHTML: number = 0; public param_NOT_getting_updated_inHTML: number = 0; ngOnInit(): void { this.store.select(selectorName).subscribe( (data) => ...
Recently, I developed an HTTP interceptor as shown below: @Injectable() export class NoopInterceptor implements HttpInterceptor { public my_status: boolean = true; private _statusChange: Subject<boolean> = new Subject<boolean>(); ...
We are currently transitioning from Protractor to Cypress utilizing Cucumber with the help of cypress-cucumber-preprocessor. While searching for Angular documentation on this setup, including resources like , all references lead to an automatically generat ...
I am having trouble triggering an event from the child component to the parent component. @Component({ template:'<foo></foo>' }) export class ParentComponent{ onDoSomething($event){ //handling logic goes here } } @Component({ sel ...
Let's say I am using the Angular directive *ngIf to display a user object like so: <div *ngIf="user$ | async as user" class="container"> <p>{{user.name}}</p> </div> Is there a method where I can trigger some code once this ...
I've been following the Angular2 tutorial steps at this link: https://angular.io/docs/ts/latest/tutorial/toh-pt4.html There's a particular syntax used to return service promise information back to the component, as shown here: getHeroes() { this._heroS ...
After successfully developing an app in Ionic 3 for Android and iOS, I encountered a problem when adding the browser platform. The Facebook and Google login features were not functioning as expected. Despite the assurance from Ionic documentation that the ...
I'm working on an Ionic project where I need to implement a button that displays items when clicked, and hides them when clicked again. However, using ShowDisplay() with *ngIf doesn't load anything. Is there a way to modify my DisplayF1() function so it in ...
There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...
After deploying my Angular app on Azure static web app, I encountered an error. Whenever I try to redirect to certain routes, it returns a 404 error. However, if I navigate from one route to another within the app, everything works fine. I have attempted t ...
I initially developed my Angular App using the paper-dashboard template with Angular version 10.0. Recently, I upgraded to Angular version 13 and switched to a different template - WrapPixel. However, I encountered an error when trying to include a servi ...
When creating my form, I encountered a challenge with passing the results of an asynchronous call to the form builder. This is what I have attempted: export class PerformInspectionPage implements OnInit { checklists: any; inspectionform: FormGroup; n ...
Currently, I am utilizing Angular and endeavoring to create reusable actions such as bulk updates, deletes, and deactivations. I have incorporated all of these actions into another component and aim to use it as a generic method. This implies that I have ...
Can someone help me verify the validity of different date formats? I attempted the following method: let newdate = new Date(myStringDate); Date.parse(myStringDate) result = `${newdate.getDate()}/${newdate.getMonth() + 1}/${newdate.getFullYear()}` The re ...
I am currently building a single page using Angular 6. The page is quite basic, and my goal is to emphasize the navbar based on scrolling. Below is the code snippet I am working with: .sticky { position: sticky; top: 0; } #i ul { list-style-type: ...
To successfully pass the object in a "multipart/form-data" request for downstream application (Java Spring) to receive it as a List of custom class objects, I am working on handling metadata objects that contain only key and value pairs. Within the Angula ...
I am currently facing an issue while trying to deploy my Angular app with Scully on AWS, as I keep receiving a 502 error. When I attempt to run just npm run start, the app loads and displays content, but the scully static SEO content is missing - instead, ...
Utilizing Angular 7, I have implemented the following service (Click here for StackBlitz Example): @Injectable({ providedIn: 'root' }) export class TodoService { todos: BehaviorSubject<Todo[]> = new BehaviorSubject([ { id: 1, title: "Buy b ...
I have captured screenshots of the application: https://ibb.co/NmnSPNr and https://ibb.co/C0nwG4D info.component.ts / The Info component is a child component of the Item component, displayed when a specific link is routed to. export class InfoComponent imp ...
My website was built with Angular2 on the frontend and Node/Express on the backend. The frontend runs on port 4200 (run npm build to start it) while the backend runs on port 4201 (npm start). I have a user login management view that works perfectly on loc ...
Below is the code snippet I am currently dealing with: const id = 1; // id = 2 of([{id: 1, name: 'abc'}]).pipe( map(items => items.find(item => item.id === id)), switchMap(item => item ? of(item) : this.makeHttpRequest(id ...
Creating an API with Spring secured by Oauth2 was successful. The configuration file for Facebook is as follows: clientId: xxx clientSecret: xxxx accessTokenUri: https://graph.facebook.com/oauth/access_token userAuthorizationUri: https://www.facebook.com/ ...
I have a collection of items that I want to implement file traversal behavior for, similar to a file explorer. This means that after selecting an item, if you hold down the shift key and press the down arrow, those items should also be selected. Below is ...
Having trouble implementing a session timeout feature in my code. I need the timer to reset whenever a user interacts with the function. Can't figure out how to integrate similar code like the one provided as an example on Stack Overflow. This is the ...
Has anyone been successful in changing the color of mat-divider? I attempted the following but had no luck: component.html <mat-divider class="material-devider"></mat-divider> component.scss .material-devider { color: red } ...
We encountered an issue while attempting to deploy our Angular CLI (v.1.7.1) project on GitHub Pages and Firebase, resulting in the same outcome for both platforms. The ng serve command functions flawlessly on localhost:4200, and everything goes smoothly ...
Is it possible to assign a specific template to a component within a route in Angular 2? I am working on a component that has the same controller functionality across three different views. My goal is to use the same component for all three views, but wit ...
There are two object arrays, the main array and the temp array. The goal is to compare the main array with the temp array and update the values in the main array based on matching IDs. In this example, IDs 2 and 3 match in both arrays. Therefore, the valu ...
My current setup involves using Angular2, ngrx/store, and ngrx/effects for state management. I have encountered an issue where I am unable to display an error message when a specific action fails within an @Effects() block. Here is the problematic code sn ...
In my TypeScript code, I have created a boolean variable called readOnlyMode. When this variable is set to true, all elements should be disabled. To achieve this, I am using [disabled]="readOnlyMode" in the HTML for elements that need to be disabled. Howev ...
Is it possible to include two ng-class directives within a single div element? If so, how should we go about writing them together? Thank you for your help. <div [ngClass]={'white-background': policyNumber.length <= 0} [ngClass]="getSomeClass() ...
When I first created my Angular app, I used the command ng serve to build and run it. This command produced the following output: 10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/ i ｢wds｣: we ...
I'm looking to show the data stored in sessionStorage on my angular view. This is my current session storage: sessionStorage.getItem('username'); In my dashboard.ts file, I have: export class DashboardComponent implements OnInit { currentUserSubscrip ...
I need assistance with firing the Tab key event on keydown.Enter in an entire form. Currently, I am running the functions on the parent Div using the following code. Although the event is detected in the console, no changes occur on the input field (i.e., ...
I'm currently developing a straightforward app that involves a form with formArray. Within the formArray, users can select a product name and amount. Once both are chosen, a third input field - total - computes the total price of the items (product price * ...
I need help with manipulating a date in my code. I have stored the date Nov. 1, 2020 in the variable fiscalYearStart and want to output Oct. 2020. However, when I wrote a function to achieve this, I encountered an error message: ERROR TypeError: fiscalYear ...