Instructions on utilizing *ngFor for every category I have

Seeking assistance with a specific issue. I currently have four labeled tabs, each containing projects. My goal is to ensure that when I save a project, it remains in the same tab where I initiated the save operation, rather than appearing across all tabs. Any guidance on how to achieve this would be greatly appreciated.

<label for="tab-one">PROPOSITIONS
<a class="plus" 
(click)="opentestdialog('PROPOSITIONS'); false">+</a>
</label>

<div *ngFor="let project of projects$ | async; let i = index;">

The code above triggers the dialog, written in TypeScript.

opentestdialog(category) {
this.dialog.open(TestdialogComponent, { data: category });
}

Below is the saving process implemented within the dialog.

save() {
if ( this.newProjectName.length > 0) {
this.working = true;
const newProject: Project = emptyProject();
newProject.name = this.newProjectName;
newProject.id = Math.random().toString();
newProject.state = this.newState;
newProject.type = this.newType;
newProject.category = this.category;
this.store.dispatch(new UpsertProjectInternalAction(newProject));
this.newProjectName = '';
}

} }

Answer №1

Appreciate all those who took the time to read my question and refrained from providing an answer. I managed to find the solution on my own.

retrieveProjectsByCategory(category: string) {
return this.projectsList.valueSeq().filter(project => category === 
project.category).toArray();
}

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

CSS styling on top points gets lost when scrolling

My screen displays an image with bubbles scattered randomly, each positioned using CSS styles for top and left. Strangely, when I scroll, all the bubbles lose their top style and reposition themselves to the bottom of the image. If anyone has insight into ...

Is it possible to maintain the maximum height and width of a div across all levels of zoom?

In the process of developing a web application, I encountered an issue regarding setting the width and height of a div to a fixed number, regardless of the zoom level. While I was successful in changing the background color of the div across all zoom level ...

Achieve center alignment of a div within another div by utilizing the display property

Here is my code snippet: #innerLabels, #innerFields { display: inline-block; width: 200px; height: 200px; border-style: solid; border-width: 1px; vertical-align: top; } .innerLabel { display: table; border-style: solid; border-width: 1 ...

What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure: .topbar-container { width: 100%; position: fixed; top: 0; background-color: #2d3e50; z-index: 999; display: flex; transition: height 500ms; } @media (min-width: 992px) { .topbar-cont ...

Tips for utilizing programmatic object keys as TypeScript type?

Consider the object shown below: const obj = { foo: "bar", hello: "world", } and this function for processing objects: const process = (obj) => { const processedObj = {} for (const key in obj) { processedObj[`--${key}`] ...

Implementation demonstration / library for complete URL encoding

Currently, I am developing a Java application that extracts links from HTML and utilizes them to request their content. One particularly challenging area is URL encoding when the intent of the URL author is unknown. Determining whether to use %20 or + can ...

Checking the validity of data before submission can help ensure the accuracy and security of your application

Is there a more effective method for validating input data in real-time as it is being entered into a form? One approach I am considering involves placing a DIV element next to the input field where users can see a message indicating whether their data is ...

Retrieve variables from an external JavaScript file

I need to fetch the currentID variable from renderermain.js and utilize it in renderermem.js. However, I am looking for a way to achieve this without modifying mem.html: <script src="renderermain.js"></script> <script src="renderermem.js"& ...

combine two separate typescript declaration files into a single package

Can anyone help me figure out how to merge two typescript definition packages, @types/package-a and @types/package-b, into one definition package? package-a.d.ts [export package-a {...}] package-b.d.ts [exports package-b {...}] package-mine.d.ts [ export ...

How can you change the list-style-type to switch between lower-alpha and decimal on nested items within an ordered list?

I am attempting to reverse the list-style-type of nested items within an ordered list, including sub-items and sub-sub-items. I have tried using CSS counters but it doesn't seem to be working. Can anyone point out what I might be doing incorrectly? ol ...

Store Angular 17 control flow in a variable for easy access and manipulation

Many of us are familiar with the trick of "storing the conditional variable in a variable" using *ngIf="assertType(item) as renamedItem" to assign a type to a variable. This technique has always been quite useful for me, as shown in this example: <ng-t ...

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

Developing interconnected dropdowns in Angular 8 for input fields

Imagine we have a list of names structured like this: nameSelected: string; names: Name[ {firstName: 'John', middleName: 'Danny', lastName: 'Smith'}, {firstName: 'Bob', middleName: 'Chris', lastN ...

Adjustable dimensions for slider images

My goal is to add a rotating slider to my website, but I'm facing an issue where it needs to occupy the entire screen on both mobile and desktop devices. However, setting the width to 100% makes the image not visible. I am utilizing code from this lib ...

Created a CSS sliding menu, but suddenly unable to activate links on it

Recently, I created a slide out menu for the mobile version of my website. The menu is hidden beneath the page and is designed to slide out to the right when the label for a checkbox is clicked. It functions smoothly and is very responsive on mobile devi ...

data-abide is flagging all fields as incorrect

Recently, I encountered an issue with a specific form I have created: <%= form_for(@building_shared_space, data: {abide:''}) do |f| %> ... <div class="field"> <%= f.label :room_type, 'Room Type' %> <%= ...

Tracking the number of headings within a table using HTML

I am having trouble formatting text in a table where the second column contains text, with some rows having headings ranging from H1 to H5. I want to use auto numbering for the headings, but the increment function doesn't seem to be working within the ...

Showing a whole number formatted with exactly three decimal places in Angular

I am working on an Angular project that includes an input field for users to enter numbers. My goal is to show the number with exactly 3 decimal places if the user submits a whole number. For instance, if the user inputs 6, I want it to be displayed as 6.0 ...

Confirming the dependencies of Angular modules versions

Coming from a Java/Maven background, I find understanding versioning in npm to be challenging and somewhat delicate. How can I ensure that all versions in an npm package are accurate? It appears that certain parts of @angular have versions that are separa ...

The firebase.d.ts on iOS functions properly, whereas on Android, it becomes

Currently, I am working with Ionic 2 on my Mac system. Your system information: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 Ionic App Scripts Version: 1.0.0 ios-deploy version: Not instal ...