Custom Directive Example
<li *ngFor = "#el of dragZoneElems; #idx = index">
<h4 [style.position]="'fixed'" [style.top.px]="idx* 30" [style.margin-top] = "80.0" [style.z-index] = 100 [dragResponder] = "el">{{el.first}} {{el.last}}</h4>
</li>
Is there a way to access the h4 element created by this directive using an object value from the directive class?
Uncertain about the term "access," but assuming you are seeking this solution:
<li *ngFor = "#el of dragZoneElems; #idx = index">
<!-- added: #h4 -->
<h4 #h4 [style.position]="'fixed'" [style.top.px]="idx* 30" [style.margin-top] = "80.0" [style.z-index] = 100 [dragResponder] = "el">{{el.first}} {{el.last}}</h4>
</li>
class MyComponent {
@ViewChildren('h4') h4s;
ngAfterViewInit() {
console.log(this.h4s.length);
}
}
In our development process, we implement TypeScript for type hinting in our JavaScript code. Type hinting is utilized for Ajax calls as well to define the response data format within the success callback. This exemplifies how it could be structured: inter ...
I am encountering a similar issue to the one described in this post: Angular wait for multiple http requests to complete and then fire the last one My goal is to accomplish exactly what is shown below: forkJoin( this.data.getCodes('medical'), ...
Having an issue with a service function that retrieves an array of objects containing configurations. I am attempting to assign the return type to Observable<GameInfo[]>, but encountering this error: Type 'Observable<object>' is not a ...
In my Angular 2 application, I am dealing with two component files - home.ts and folder-selector.ts. Within the folder-selector.ts file, there is a variable named pathToNode. I am trying to figure out how to access this value from within the home.ts file ...
Utilizing a Mono repo to share react native components with a react app has presented some challenges. When attempting to use a react native component from react, an error keeps popping up that I can't seem to resolve. I've attempted to follow t ...
Having a situation where there is a file with an exported object: let btypes:{[key:string]:any} = { "key1":val, //... } export {btypes} I even attempted to use export default btypes Upon importing it using: import {btypes} from "../types& ...
Here is my custom Mongoose model used in conjunction with TypeScript: import mongoose, { Schema } from "mongoose"; const userSchema: Schema = new Schema( { email: { type: String, required: true, unique: true, lowerc ...
Can someone lend a hand? I've run into an issue where my custom JavaScript function is not working after using *ngIf or *ngSwitchCase to change the view. Any suggestions on how to resolve this would be greatly appreciated. ...
I am currently working on tests for an angular project and encountering errors in these two test files: https://pastebin.com/bttxWtQT https://pastebin.com/7VkirsF3 Whenever I run npm test, I receive the following error message https://pastebin.com/ncTg4 ...
I'm currently developing a project that utilizes Angular along with RxJS and NGXS store management. I am incorporating selectors to load values into a component and need to determine whether to display a simple text field or an entire select based on ...
Our application is built using TypeScript and the source code resides in the /src directory. We have tests located in the /tests directory. When we compile the code locally using TSC, the compiled files are deposited into /dist/src and /dist/test respectiv ...
Hey there! Currently, I am using "highcharts 8.0.0" along with "highcharts-angular 2.4.0" in combination with Angular 8. While the line charts are displaying perfectly fine on Google Chrome, I seem to be facing an issue with Firefox. The problem is that t ...
Exploring the realm of Shadow DOM and Custom elements, I've encountered an interesting discrepancy between how JavaScript (JS) and TypeScript (TS) handle modular imports. Am I missing something here? My primary JS file has this structure... // impor ...
How can I open a new window in Angular while passing values in the route to call an endpoint without causing the entire application to reload? It feels like such a hassle just to display a simple HTML page. Is there a better way to achieve this? ...
Utilizing a fieldArray, I am constructing a form with react-hook-form. This form serves the dual purpose of creating and updating a user, and makes use of the "values" prop from react-hook-form. The field within the fieldArray API consists of two basic tim ...
The primary element contains tabs, component A, B, and so on. My component_A comes with preloaded information, but it also includes a filter button. Additionally, there is a button that triggers a drawer from another component (the main component). toggl ...
As I delved into my NestJS project, I found the class-validation aspect to be quite bothersome. It felt like I was constantly repeating the same classes with identical decorators. For example: export class DTO1 { @IsDefined() @IsString() name: ...
I've created a custom hook that wraps around SWR: import useSWR from 'swr'; export enum MethodTypes { POST = 'POST', PUT = 'PUT', GET = 'GET', DELETE = 'DELETE', PATCH = 'PATCH' } ...
Having a component with a getter function that iterates through an object using forEach, accessing variables in the HTML file is easy. However, encountering trouble when trying to pass one of the variables in another function through a button click. Despit ...
My application is experiencing a strange issue where the HTTP POST method works fine on Firefox and Edge browsers, but not on Chrome. The application is built using Angular 7 and .NET Core 2.2. It has a CRUD example that functions correctly in all browser ...