To check and PUSH the new object to table component in angular

Question

I have 2 components called list & display. The list component will display customers in the dropdown, From the dropdown(dropdown with multiselect) I will PUSH the selected customers to table(material component) present in the display component like this:

Now i have another form in display component itself in order to generate a new customer.From this form i will generate a new customer and i will PUSH this new customer to table like this:

And i will update the generated customer in list component also like this:

But the issue is When i try to PUSH the same customer(Ex Customer 4) from the list component,It should not add the duplicate, but it is adding:

Note:

• Since i can't a generate ID for the new customer in the stackblitz DEMO, I am just hard coding the ID for the new customer(Customer 4)

• And in the list also i am just added the new customer as Customer 4

DEMO

Answer 1

You just need to check your array for occurrences.

I've updated your stackblitz example to work for your requirements. I'd advice you not to store your customers inside CustomerIds object, it'll make it a bit easier.

And just blocking the user from adding is also not the best option, add something to notify the user of the error.