As I work on developing a shopping cart application, I am faced with the task of declaring a global variable. I also need to change this variable from various components within the application.
As I work on developing a shopping cart application, I am faced with the task of declaring a global variable. I also need to change this variable from various components within the application.
Steps to Create and Use Global Variables in Angular:
To Create Global Variables: "app.global.ts"
import { Injectable } from '@angular/core';
@Injectable()
export class AppGlobals {
readonly baseAppUrl: string = 'http://localhost:57431/';
readonly baseAPIUrl: string = 'https://api.github.com/';
}
Import and Utilize the Global Variables in the Component: "user.component.ts"
import { Component, Injectable} from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, Http } from '@angular/http';
import { UserService } from '../service/user.service';
import { AppGlobals } from '../shared/app.globals';
@Component({
selector: 'user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css'],
providers: [UserService, AppGlobals]
})
export class UserComponent {
// Declare Users
users = [];
// Constructor
constructor(private userService: UserService, private _global: AppGlobals) { }
// Fetch Users on Page Load
ngOnInit() {
this.userService.getAPIUsers(this._global.baseAPIUrl + 'users/hadley/orgs').subscribe(data => this.users = data);
this.userService.getAppUsers(this._global.baseAppUrl + 'api/User/GetUsers').subscribe(data => console.log(data));
}
}
"user.server.ts":
import { Injectable, InjectionToken } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class UserService {
constructor(private _http: Http) {
}
getAPIUsers(apiUrl) {
return this._http.get(apiUrl).map((data: Response) => data.json());
}
getAppUsers(apiUrl) {
return this._http.get(apiUrl).map((data: Response) => data);
}
}
Reference Link
Currently, I am trying to implement an Angular HttpInterceptor based on the solution provided in this Stack Overflow response: However, I am struggling with the factory method: public static Factory($q: ng.IQService) { return new AuthenticationInter ...
For my project, I am utilizing the mat-stepper component along with a mat-Datatable inside it. In each step of the stepper, I need to dynamically hide and show different columns based on some data. Is there a way to send this data to trigger changes at eve ...
In the process of developing a complex Angular2 application, I have created a base class that serves as the foundation for my components: export abstract class ReactiveComponent implements OnInit, OnDestroy, AfterViewInit { abstract ngOnInit(): void; ...
My firestore database contains a collection named world with a sub-collection called languages I have developed two functions: one to retrieve all documents from the sub-collection languages, and another function to fetch every language if the userUid val ...
I'm new to this and I only have experience with the http post method. I need to send the username and password as base authentication for every API request. onSubmit = function(userdata){ this.tokenkey = localStorage.getItem('logintoken&apos ...
I'm having trouble getting Typescript to detect an error in the code snippet below: function foo() { console.log(this.x.y) } foo() When I run it using npx ts-node a.ts, there are no Typescript errors displayed, but it naturally fails with TypeEr ...
Can anyone help me figure out how to retrieve extra data from a SAML login provider in the backend (firebase functions)? I can see the data on the client side but I'm struggling to access it in the backend. I've specified these dependencies for ...
As an Angular 4 developer, I am working on an application where I need to display data in a dialog. To achieve this, I am using @Output to pass data from the child component to the parent component. In the parent component, my code looks like this: expor ...
I am currently in the process of developing a chat application using Angular and Firebase Cloud Firestore. My goal is to have a counter on the client side that updates whenever any document in the 'groups' collection is updated. Within my clien ...
I'm encountering an issue with MediaElement js when trying to play videos in .m3u8 format within a slider containing multiple videos. Whenever I click on the play button for any video, only a 2-second clip is shown before the video disappears. Any as ...
I am currently attempting to send a post request to a PHP script that contains the necessary data I require. Within home.component.ts: import { Component, OnInit } from '@angular/core'; import { UserComment } from '../definition/us ...
When working with the MUI Input API props and CSS, I encountered an issue related to the {error} and its use. This is how my code looks: const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState< ...
When dealing with a type that can have two formats based on the value of one of its keys, such as: type singleOrMultiValue = {isSingle: true, value: string} | {isSingle: false, set: Array<string>} I have found it useful in preventing errors like con ...
Having a global state (or "mode") in my Angular Components is leading me to look for more efficient ways to code. Here is what I have tried: @Component({ .... }) export class AbcComponent implements OnInit { enum State { init, view, edit, cre ...
In Angular 9, I am working on a parent component where I need to pass a function to a child component. Specifically, I want to pass the "onNavigate" function to the child component... import { Router, ActivatedRoute } from '@angular/router'; ... ...
Is there a way to automate the bypassing of the JHipster login screen? This is my goal: let jwt_token before(function fetchUser() { cy.request('POST', '/api/authenticate', { username: 'user', password: &a ...
As I type into a text box and log the keydown event in Chrome, I notice that it has various properties (specifically, I'm interested in accessing KeyboardEvent.code). Console Log Output { altKey: false bubbles: true cancelBubble: false cancelable: t ...
I wrote a Java service that returns an observable map<k, map<k,v>> and I'm currently struggling to iterate through the outer map using foreach loop. [...] .then( (response: Package) => { response.activityMap.forEach((key: s ...
ngOnChanges(changes: {[paramName: string]: SimpleChange}): void { console.log('Any modifications involved', changes); } I'm scratching my head over the purpose of 'changes: {[propName: string]: SimpleChange}'. Can someone cl ...
I have a basic notification system in place: @Injectable({ providedIn: 'root', }) export class NotificationService { constructor(private snackBar: MatSnackBar) {} public showNotification(message: string, style: string = 'success' ...