Creating Generic Component

Hi,

I wish to create a generic component, which accepts array of object (eg : Person, Address) and corresponding template for mapping that (supposably card template), which is editable ie. once i click on card i get modalpopup with respective model properties which i can edit and are reflected back in the list of cards.

Till now what i have achieved is,
I created CardList component, which takes array object and corresponding template as a input, displays the cards as expected.

my demo code is at this link => https://stackblitz.com/edit/angular-mwyjic

so on click of edit i get corresponding object, so which i can update.

So what i desire to achieve is:

  1. I should be able recognize the current object type in popup(ie person or address)
  2. I should be able populate modal structure according to current model [Any Possible approach or can we take template as a reference for modal?or we how we can take modal template as a input. or i need to use recative form to construct reactive form?
  3. Update the item current object in modal and reflect changes in cards.

Any suggestions on how can proceed further?