Tips for deleting multiple values from an array in Angular 2

When choosing multiple ion-items from a list, I am looking to eliminate identical items from an array.

HTML Code

<div class="ion-item optionalItem">
    <button class="ion-button" ion-item *ngFor="let configop of interiorOption" (click)="itemSelected(configop)">
        <span class="color-name">{{ configop.intName }}</span>
        <span class="color-price">{{ configop.price }}</span>
    </button>
</div>

TypeScript Code

this.Array.push(configop);

for (let key in this.Array) {
    this.Array2.push(this.Array[key])
}

for(let i = 0; i < this.Array.length; i++) {    
    if(this.Array[i] === this.Array2[i])
    {
        this.Array.pop();
    }

    console.log("Sorted",this.Array);
} 

Answer №1

It is recommended to use Object instead of Array in this scenario

before pressing the button:

myObject = {
  nameLabel : false
}

after pressing the button:

if (!myObject.nameLabel) {
  myObject.nameLabel = true;
}

display all clicked buttons:

for (let property in myObject) {
  if(myObject.property) console.log(property);
}

Answer №2

One way to eliminate duplicates in an array is by utilizing this method.

this.newArr = Array.from(new Set(this.oldArr.map((itemInArray) => itemInArray)));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a function in the Angular 5 template based on the results of an observable leads to multiple function calls

Custom HTML Template <div *ngFor="let element of convertObjectToArray(observerable_value)"> {{element.name}} </div> Custom Component convertObjectToArray(obj) { const arr = Object.values(obj); return arr; } Seeking Solution I ...

Update the CSS variables in Angular Material version 15 to reflect new changes

Angular Material 15 introduces some significant changes to colors and spacing. As a result, I find myself needing to override the default CSS variable values in my styles.scss file. :root { --mdc-typography-button-letter-spacing: 'normal'; ...

Exploring data binding in Angular 2 through ngModelChange

When it comes to data binding, achieving property and event binding is possible with $event representing the entered value below: <input [ngModel]="username" (ngModelChange)="change($event)"> But what does the following code snippet mean? <inpu ...

Having trouble retrieving values from the getEntry method in Contentful

How can I retrieve an entry from contentful using Contentful v10 with Node.js 18? I am having trouble accessing the value in getEntry(). interface Example { contentTypeId: 'item' fields:{ title: EntryFeildTypes.Text rate: EntryFeildType ...

Setting up an inline style @Input in Angular 2: A step-by-step guide

I am currently working on a component that needs to display random values, which will be generated randomly and passed through some @Input bindings in the template. Everything seems to be going well, but I am facing an issue when trying to link an @Input t ...

Eliminating data type from union in Typescript

I have a specific type that I collect from various other types: type CustomType = { id: string; foo: (string | Type1)[]; bar: (string | Type2)[]; baz: string | Type3 | null; description: string | null; } I am interested in refining thi ...

Office-Js Authentication for Outlook Add-ins

I am currently developing a React-powered Outlook Add-in. I kickstarted my project using the YeomanGenerator. While working on setting up authentication with the help of Office-Js-Helpers, I faced some challenges. Although I successfully created the authen ...

Generate a list of items in typescript, and then import them into a react component dynamically

I have a variable that stores key/value pairs of names and components in a TypeScript file. // icons.tsx import { BirdIcon, CatIcon } from 'components/Icons'; interface IconMap { [key: string]: string | undefined; } export const Icons: IconM ...

Angular 2 .net core project experiencing issues with missing files in the publish folder

Exploring the Angular 2 template within a .NET Core framework, as detailed in this resource . However, upon publishing the solution, I noticed that all the files within the "app" subfolder of ClientApp are missing. This leads to a situation where my esse ...

Configuring VS Code's "tasks.json" file to compile all .ts files can be done by following these steps

Apologies if this question has been asked before, but could someone please redirect me to the relevant thread if so. I am wondering if it is possible to set up VS Code's "tasks.json" to automatically compile all .ts files within a folder. Currently, I ...

Transitioning to TypeScript: Why won't my function get identified?

I am in the process of transitioning a functional JavaScript project to TypeScript. The project incorporates nightwatch.js Below is my primary test class: declare function require(path: string): any; import * as dotenv from "dotenv"; import signinPage = ...

The specified type argument is not compatible with the ObservableInput<any> type

Struggling with an issue where the argument type (key:string) => Observable | PayloadType | is causing problems when trying to assign it to a parameter of type '(value: string, index: number) => ObersvableInput' return action$.pipe( fil ...

Implementing conditional data binding in Angular with ngIf directive

I've been struggling to showcase recipes from a specific food category. I'm attempting to iterate through an array of recipes within a parent component. <div class="row"> <div class="col-xs-8" *ngIf="{{ recipe.category }} === mexican" ...

Adonisjs latest version (v5) model creation command malfunctioning

Using Adonisjs v5 The controller command works fine with: node ace make:controller Posts However, the new model creation command is not working: node ace:make model Post When running the make model command, an error occurs: An error message stating &ap ...

Obtaining the ViewRef of the current component in Angular 4

How can I obtain the ViewRef for my current component? I am attempting to retrieve the ViewRef from a service. Below is the code: component.service.ts import { Injectable, ViewRef } from '@angular/core'; @Injectable() export class CheckboxSe ...

What are the steps to extract information from an observable?

Having trouble retrieving data from a request? I've encountered an issue where the data retrieved inside .subscribe in an observable function is returning as undefined when trying to access it outside the function. It's quite frustrating! Here i ...

What is the best way to mandate the declaration or type of a function in TypeScript?

Let me present my dilemma: I am aiming to create a declaration file containing TypeScript function models. This file will be utilized by various individuals to build their own programs. To achieve this, I have crafted a def.d.ts file with a small example ...

How can Karma unit tests with Jasmine in a TypeScript Node project accurately measure code coverage, even with external dependencies?

We have a unique situation with the code coverage of our project involving a node dependency. It's important to note that the npm dependency source code is actually part of our project, as we are responsible for its development and publication. Here&a ...

Angular Microfrontend with Module Federation captures and processes HTTP requests within the host application

I am looking for a way to capture HTTP requests from all remote sources within my host application so I can reset a timer that tracks user inactivity. All of the applications involved use Angular with Webpack Module Federation. Are there any suggestions on ...

Angular 6 seems to be having issues loading Bootstrap

I've run into an issue while trying to incorporate Bootstrap into Angular 6. I have already installed Bootstrap using npm install bootstrap and added it to angular.json, but it's still not functioning. Is there something else I should be doing? A ...