Override placeholder value in third party input

Question

I'm using a third party tag-input and there's already a placeholder value. I would like to change the value of the placeholder. How would I do that? Right now it's "Enter a tag."

<tag-input name="tags" [(ngModel)]='tags'></tag-input>

Answer 1

Try:

<tag-input name="tags" [(ngModel)]='tags' placeholder='My Placeholder'></tag-input>

You should include what 3rd party framework you're using to help us answer, but I think I have found it: http://mbenford.github.io/ngTagsInput/documentation/api If you read the docs it specifies which attributes you can change and a description of each, the one you are looking for is placeholder.

Answer 2

u can try using jquery :

$('input[name="tags"]').attr('placeholder', 'Your placeholder...');

Answer 3

Ngx-chip has two different placeholders. One is used with secondPlaceholder property and it is shown when the chip list hasn't any item selected. The other placeholder, used under placeholder property, is shown when the chip list has more than one item.

I paste a documentation fragment where this functionality is explained.

placeholder - [?string] String that sets the placeholder of the input for entering new terms.

secondaryPlaceholder - [?string] String that sets the placeholder of the input for entering new terms when there are 0 items entered.

Answer 4

Add your placeholder with secondaryPlaceholder

import { TagInputModule } from 'ngx-chips';

    TagInputModule.withDefaults({
      tagInput: {
        placeholder: 'Add a new tag',
        secondaryPlaceholder:'Your Custom PlaceHolder Here'
      }
})

Answer 5

<tag-input
  [(ngModel)]="game_ids"
  **secondaryPlaceholder="enter game id's"**
  [modelAsStrings]="true"
  [errorMessages]="asyncErrorMessages"
  [asyncValidators]="asyncValidators"
  (onAdd)="onTagAdd($event)"
  (onRemove)="onTagRemove($event)"
  #tagsinput
></tag-input>

Answer 6

Hello you just need to add secondaryPlaceholder option for ex:

  <tag-input name="tags" [(ngModel)]='tags' secondaryPlaceholder="test"></tag-input>