CODEWITHSUNDEEP
javascripthtmlangular
SoberdogK9
SoberdogK9

Reputation: 127

How to fix Chips data not showing

So i need to get my chips working in the first Types column. When i insert a data into the second column of types. it will create a chip data.

I want that chip data to be shown into the first column as well. but i cant figure it out, anyone can help?

  <div fxLayout="column" fxFlex="30" class="mr-8">
  <div *ngIf="mode === 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
      <mat-form-field appearance="outline" fxFlex>
          <mat-label>Types</mat-label>
        <mat-chip-list #chipList>
            <mat-chip *ngFor="let type of types" formControlName="type"></mat-chip>                    
            <input name="type" placeholder="Types" matInput>
        </mat-chip-list>
      </mat-form-field>
  </div>

  <div *ngIf="mode === 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
    <mat-form-field appearance="outline" fxFlex>
        <mat-label>Types</mat-label>
      <mat-chip-list #chipList>
          <mat-chip *ngFor="let type of types"
              [selectable]="selectable"
              [removable]="removable"
              (removed)="remove(type)">
              {{type}}
              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input name="type" [matChipInputFor]="chipList" placeholder="Types"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)" matInput>
      </mat-chip-list>
    </mat-form-field>
  </div>

So this is how it looks like right now

Upvotes: 0

Views: 411

Answers (2)

Sourav Dutta
Sourav Dutta

Reputation: 1332

This should work 

  <div fxLayout="column" fxFlex="30" class="mr-8">
  <div *ngIf="mode === 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
      <mat-form-field appearance="outline" fxFlex>
          <mat-label>Types</mat-label>
        <mat-chip-list #chipList>
            <mat-chip *ngFor="let type of types" formControlName="type">{{type}}</mat-chip>                    
            <input name="type" placeholder="Types" matInput>
        </mat-chip-list>
      </mat-form-field>
  </div>

  <div *ngIf="mode === 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
    <mat-form-field appearance="outline" fxFlex>
        <mat-label>Types</mat-label>
      <mat-chip-list #chipList>
          <mat-chip *ngFor="let type of types"
              [selectable]="selectable"
              [removable]="removable"
              (removed)="remove(type)">
              {{type}}
              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input name="type" [matChipInputFor]="chipList" placeholder="Types"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)" matInput>
      </mat-chip-list>
    </mat-form-field>
  </div>

Upvotes: 1

Plochie
Plochie

Reputation: 4117

I think you have missed interpolation in first div. Just add {{type}} at line 6 as shown below.

...
<mat-chip-list #chipList>
    <mat-chip *ngFor="let type of types" formControlName="type">{{type}}</mat-chip>                                
    <input name="type" placeholder="Types" matInput>
</mat-chip-list>
...

Upvotes: 1

Related Questions