How to programmatically add chips, without using [(ngModel)]

Question

In the app that I work on we have the tag-input but there is no ngModel, so the items just get thrown inside using the mouse, so from the client side. I want to be able to clear the chips and insert my own, but programatically, from the code which is triggered from another button. How to do this? Code on template for the tag-input is this:

<tag-input [formControlName]="'chips'"
           [inputText]="inputText"
           [editable]="true"
           [identifyBy]="'value'"
           [displayBy]="'display'"
           [allowDupes]="true"
           [theme]="'bootstrap'"
           [addOnBlur]="true"
           [clearOnBlur]="true"
           [addOnPaste]="true"
           [onlyFromAutocomplete]="false"
           [dragZone]="'zone1'"
           [onAdding]="transform"
           [pasteSplitPattern]="splitpattern6"
           [separatorKeyCodes]="[32]"
           [ngClass]="{
             'is-invalid': submitted && chips.invalid,
             missing_parameters: checkIfKeyDocumentApplied()
           }"
           [errorMessages]="errorMessages"
           [validators]="validators"
           [placeholder]="placeholder"
           [secondaryPlaceholder]="secondaryPlaceholder"
           (onSelect)="onSelect($event)"
           (onAdd)="onAdd($event)"
           (onFocus)="toggleQueryFocusStyle(true)"
           (onBlur)="toggleQueryFocusStyle(false)">
           <tag-input-dropdown [showDropdownIfEmpty]="false"
             [autocompleteObservable]="requestAutocompleteItemsFake">
           </tag-input-dropdown>
</tag-input>

Answer 1

I believe you need FormArray which supports programmatically adding or removing form controls.