<div *ngFor="let city of
israelCitieService.data|mychoosedcities:wordSerched;let i=index"
</div>
I am trying to find out how to access the length of the array generated by the pipe. The index (i) is only accessible within the div element. How can I bind it to my component? Thank you for your help.
give this a go:
<div *ngFor="let cityofisraelCitieService.data|mychoosedcities:wordSerche as array;let i=index">
<div (click)="passIndexValue(array)"></div>
<div>
<div>{{lenght}}</div>
inside your component :
passIndexValue(array){
this.lenght = array.length ;
}
It is recommended to heed the advice of the Angular team and avoid using pipes for data manipulation. You can find more information on this at https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
Instead, consider moving your filter logic to your controller and storing the data in a variable to ensure that the length is updated correctly. By also taking care of change detection and optimizing the loop index, you can achieve the best performance possible!
As I delve into creating a Single Page Application with Angular 7, I find myself questioning the prevalent recommendation of storing data in services as opposed to a file with constants that can be directly imported. The simplicity of directly importing a ...
I am looking to create unit tests for a REST API built with SvelteKit, but most of the available resources focus on testing svelte components. Additionally, I prefer to avoid using Playwright as I do not require browser testing and want to steer clear of d ...
In my setup, the parent component is utilizing a FormGroup and I am expecting the child components to notify any changes in value back to the parent. To achieve this, I am trying to implement NG_VALUE_ACCESSOR in the child component so that it can act like ...
The code snippet originally utilized - import { Create } from '@material-ui/icons'; <DroppableFolder count={draftsCount} sidebarOpen={open} folderId={FolderType.Drafts} Icon={Create} name="Dr ...
I recently started using angular and encountered an issue while trying to sort columns. The error message I received was: Argument of type 'Event' is not assignable to parameter of type 'SortEvent'. Type 'Event' is missing t ...
I am encountering an issue with my Angular application that has a .tsconfig file set to target ES6. { "compileOnSave": false, "compilerOptions": { "allowJs": true, "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "de ...
I'm looking to create a unique pagination design using react-table that fits my specific requirements: Currently, the default pagination I'm using looks like this: https://i.sstatic.net/xf1sE.png But I want it to resemble this: https://i.ssta ...
When dynamically loading a component into a dynamic position, I am facing an issue with using selector: 'td' since the component is a table row and I need to apply colspan to the dynamically added row before loading the dynamic component. The pre ...
I am relatively new to using Ionic 2. Recently, I created a service that contains all my filters (ModalCtrl) with custom search input and checkboxes. I am passing parameters between them but I am unsure of how to keep the service active and waiting for the ...
When a user selects one or more checkboxes and submits a form, data in the database is updated. At that moment, I call location.reload() from the code to reload the page and display the correct data. Below is the backend web API code: [HttpGet] public as ...
As outlined in the documentation for interfaces in TypeScript, An interface declaration serves as an alternative way to define an object type. I'm puzzled by the error I encounter in the following code snippet. My attempt is to restrict the object ...
I am trying to implement async await in my code, but I keep getting an error that says await is a reserved word. Here is the snippet of my code: public componentDidMount() { this.startDrag(); } private startDrag = async () => { const eleme ...
I am facing a challenge in my Angular6 material-data-table application where I need to display and manipulate a complex JSON structure received from a REST endpoint. While the data is successfully displayed, I am struggling to implement pagination and sort ...
I am currently working with react-chart-2. I have a line graph that displays a tooltip when hovered over, but I would like to hide this tooltip feature. Additionally, I want to remove the numbers 0, 0.1, 0.2 up to 1 on the left side (y-axis) of the gra ...
Looking at the HTML below: <input type="checkbox" name="person" [(ngModel)]="person.selected" /> This input is part of a ngFor loop. Testing has revealed that despite some values of selected being true and others false, all checkboxes appear check ...
I am looking to convert a JSON object into a JSON array in Laravel. Currently, I am receiving JSON data in object format. $category = new Categories; return Response::json(array( 'error' => false, 'category' => $category- ...
I am working with a component that includes a sub component called timeline. <app-timeline [(editing)]="editingDate"></app-timeline> Within the timeline component, there are specific properties: @Input() editing: boolean; // <--- monitor ...
I have a dropdown menu: click here to view My goal is to keep the dropdown open when the user opens a menu, but disable it if the user changes routes by clicking on another menu. How can I achieve this? Note: If the user navigates within the same route, ...
I'm currently working on an Angular 5 application and I have a requirement to format an input field with thousand separators (spaces). However, the model I am using only allows numbers without spaces. Since my application is already fully developed, ...
I need to define a type for an object called root, which holds a nested array of objects called values. Each object in the array has properties named one (of any type) and all (an array of the same type as one). Below is my attempt at creating this type d ...