How to make an expandable list from a string array in Angular?-CodePudding

In my .ts component file, I have

campaignList: string[]

I am populating this programmatically.

In my HTML file, I have

<table>
<thead>
  //Headers
</thead>
<tbody>
  <tr>
    <td>
      //Need to have a list of campaigns here
    </td>
    //Other fields here
  </tr>
</tbody>
</table>

Now, the way I need my list displayed is like this:

When I click on the More button, I would want the list(and the whole row in the table) to expand and show me the list, changing into a Less button to revert the process. I am familiar with how to create buttons and have them change names, but I am not sure how I can create and add to a list using a variable string array.

Could someone please point me in the right direction for this?

CodePudding user response：

Assuming your array of campaigns looks like

var campaigns = ['camp1','camp2','camp3','camp4','camp5','camp6','camp7','camp8'];
var countOfItemsToBeShown = 3; 

//fills duplicate array with number of items you need to show on UI
var displayCampaigns =  campaigns.filter((c,index) => index <= countOfItemsToBeShown); 

//when someone clicks show more just replace with original array

function showMore(){
 displayCampaigns = campaigns
}

function showLess(){
  displayCampaigns =  campaigns.filter((c,index) => index <= countOfItemsToBeShown); 
}

CodePudding user response：

In order to add to the existing variable string array, For each new item you want to add, push it like so: campaignList.push(item) - after you have created the array.

With regards to expanding the table row. there are different approaches you can take e.g give the row a fixed height. When the more button is clicked. you can then override the fixed height in order to accommodate the extra content