I am facing a scenario where I have two buttons and an array to work with.
The buttons are labeled "OR" and "AND", and the array consists of 7 items in a Dropdown list.
When the user clicks on the "OR" button, it should remove 2 items from the array.
Conversely, when the user clicks on the "AND" button, all 7 initial items should be retained in the array.
I am exploring options to dynamically add and remove these two items from the array. What is the best approach for implementing this?
Below is the HTML code snippet for the buttons (ruleOperator):
<label *ngFor="let ruleOperator of ruleOperatorArray"
[class.active]="rule.ruleOperator === ruleOperator.value"
(click)="rule.ruleOperator = ruleOperator.value"
class="nano-radio-button">
<span>
{{ ruleOperator.name }}
</span>
</label>
Attached is the dropdown component placed alongside the buttons:
The "arrayOfOptions" refers to the array from which addition/removal of items is required.
<nano-drop-down [arrayOfOptions]="audienceRuleTypes"
[selectedOptions]="rule.ruleClass"
(selectedOptionsChange)="rule.onRuleChange($event)">
</nano-drop-down>
This is how the array looks like:
export const RULE_ARRAY = [
{value: 'SimplePixel', name: 'Simple Pixel Call'},
{value: 'SearchTerms', name: 'Search Terms'},
{value: 'DataPartner', name: 'Data Partner'},
{value: 'Category', name: 'Category Rule'},
{value: 'GeoCountry', name: 'Geo Location Country'},
{value: 'GeoCity', name: 'Geo Location City'},
{value: 'ImpressionAdvertiser', name: 'Advertiser (Viewer)'},
{value: 'ImpressionCampaign', name: 'Campaign (Viewer)'},
{value: 'ClickAdvertiser', name: 'Advertiser (Clicker)'},
{value: 'ClickCampaign', name: 'Campaign (Clicker)'},
{value: 'ConversionAdvertiser', name: 'Advertiser (Buyer)'},
{value: 'ConversionCampaign', name: 'Campaign (Buyer)'}
];
public audienceRuleTypes = RULE_ARRAY;