<mat-cell *matCellDef="let element; let i index">{{ element.patientName }}<input type="hidden" [(ngModel)]="index" value={{i}}/></mat-cell>
I created an index variable to access the value in the typescript file and attempted to console.log(index), but it returned undefined.
export class DashboardComponent implements OnInit, OnDestroy {
index: number;
constructor(){}
console.log(index);
}
transform i into index by replacing it with index as i. Documentation provided here
https://angular.io/api/common/NgForOf
If you want to use it within .ts file, add the following line inside ngfor.
Assign each i to the store function upon clicking a button. [ Make sure to write a store function in your typescript beforehand ]
<button (click)="store(i)"> </button>
Your project may not require a button, feel free to use any element you prefer, but ensure you include (event) to pass values in typescript. Events include: (click) / (change) / (use any event you need)
My Angular 9 application utilizes http.get calls to communicate with an API, and I have integrated angular-pwa for offline capabilities. One challenge I am facing is ensuring that when the browser is online, two specific requests do not use cached respons ...
I am currently working on developing a QR Code Scanner using Ionic and Firebase. I have encountered an issue where the app displays a Product not found toast message when I scan a QR Code to match the PLU with the information stored in Firebase. Unfortunat ...
I am working on a project where multiple frontends share a common library. The module dependencies for these projects are managed using npm. In the package.json file of each project, I specify: "dependencies": { "mylib": "file:../<...path...> ...
I am working on an Angular 10 project where users can compress and upload images to Google Cloud Storage. The compression and uploading functionalities are functional, but I'm facing challenges with managing the asynchronous process of handling multip ...
I'm currently in the process of transitioning an AngularJS application to Angular and one of the challenges I've encountered is converting my JavaScript code to TypeScript. While I've been successful with components and services, factories h ...
Trying to replicate the functionality of the Outlook Kanban board using Angular has been a bit challenging for me. I managed to create the application successfully and made it work in IE11. However, when I set it as the homepage for my task folder in Outlo ...
I'm having a problem with dynamic binding in my drop-down. I can't seem to display the default selected value in the label, and when I change the selection, the new value isn't showing up either. Take a look at my code below: <p>{{l ...
Can TypeScript allow for the declaration of a ReturnType<...> that doesn't fetch the return value's type but instead retrieves the type of the first argument? type SingleArgFunction<A, R> = (arg: A) => R // incorrect - how can th ...
I am currently working on developing a custom rxjs operator. My previous custom operators, such as MonoTypeOperatorFunction or the regular Observable that accepts input like strings or numbers, have been successful. However, I am facing a challenge with cr ...
I'm currently developing a Sessions Server for a project at work. My dilemma lies in the fact that I'm struggling to find resources on how to make JavaScript HTTP calls from a server running with http.createServer() and server.listen(8080, ...) ...
I'm currently in the process of setting up a carousel on my homepage. It seems like everything is in place, but there's something missing. The initial image, text, and arrows all display properly, but they are non-functional. I have correctly imp ...
I have a project that involves displaying images on our NAS using Angular 17. On the main page, I have 3 mat-form-fields. Strangely, when I add the last mat-form-field, I encounter the following error - ERROR Error: Cannot find control with name: 'num ...
I have a node server running on express and I am looking to add metrics to it during the setup process. Here is a snippet of my code: const app = express(); installMetrics(app); While TypeScript can accurately determine the type of app since I have insta ...
Here is an example of how my service is structured: export class UserService { constructor() {} coords: Coordinates; getPosition() { navigator.geolocation.getCurrentPosition(position => { this.coords = [position.coords.latitude, posit ...
Let's say we want to prevent users from using the backspace key on an input field in this scenario. In our template, we pass the $event like so: <input (input)="onInput($event)"> Meanwhile, in our app.component.ts file, the function ...
I'm diving into the world of TypeScript and I'm running into an issue when trying to call a function from another class. I keep getting this error - could it be that functions can only be accessed through @inject rather than import? What am I mis ...
Currently, I am in the process of developing a Visual Studio Code extension. In this project, I have opted to utilize non-relative imports in TypeScript. For instance: import ModuleA from 'modules/ModuleA'; The actual location of the folder for ...
My UI layout needs to change when the window width changes. However, when I add an Image (Nextjs component) in my hook, I encounter an error message. I am not sure why adding Image (Nextjs component) is causing this problem. The error message is display ...
tl;dr: Seeking a better way to extend 3rd-party lib's class in JavaScript. Imagine having a library that defines a basic entity called Animal: class Animal { type: string; } Now, you want to create specific instances like a dog and a cat: const ...
I am currently working on creating a polar chart to showcase Satellite data. https://i.sstatic.net/DNUZ1.jpg However, I am facing a challenge with setting the grid size to be displayed in increments of 45 degrees. Despite trying various amcharts 4 functi ...