Input chip usage example?

[gpulido]

I'm trying to use a set of chips as input chips, but after reviewing the documentation I'm not sure of how it works or make it work with an input text field. Reading the documentation upstream it specifically says:

The MDC Chips package does not handle the process of converting text into chips, in order to remain framework-agnostic.

I can understand that, but angular-mdc is not framework-agnostic so I guess it should have to provide the mechanism (or some guidelines) to do it.

I can add a text field an catch the input keydowns to "addchip", but I can't figure out how to show the chipset inside the input / text-field on a similar way that angular material is doing.

Any suggestion / idea / guide on how to do it?

[trimox]

Good suggestion. We're missing sample usage for using chips as inputs. See if I can come up with a quick demo for ya.

[westdabestdb]

Hey @trimox, hope you are doing well. Any updates on this one ?

[trimox]

@gpulido @westdabestdb Sorry for the delay. I began to review material docs and got side tracked with the Bazel upgrade #1983 (took bit more effort than anticipated). Lemme circle back tomorrow.

[trimox]

Tested and working on a proper solution for this.

[westdabestdb]

Awesome @trimox !

[westdabestdb]

Btw, I managed to handle it on my own, I can post the code and screenshots here if you want?

[gpulido]

@westdabestdb it would be awesome if you can provide some insight to this. thank you!

[westdabestdb]

Shit dude @gpulido, I totally forgot to reply this. I apologize. Here check the screenshots and code.

<div class="search">
    <div class="leading-search">
      <mdc-icon class="search-icon">search</mdc-icon>
    </div>
    <mdc-chip-set input *ngIf="inputs.length > 0">
      <mdc-chip *ngFor="let query of inputs">
        <mdc-chip-text class="font">{{query}}</mdc-chip-text>
        <mdc-chip-icon trailing>cancel</mdc-chip-icon>
      </mdc-chip>
    </mdc-chip-set>
    <input class="font" #query placeholder="Search by term, skill or company" type="text" (keyup.enter)="handleInput(query.value); query.value = ''" />
    <div *ngIf="inputs.length > 0" class="reset-search" (click)="clearQueries()">
      <mdc-icon>clear</mdc-icon>
    </div>
  </div>

So basically my search class is flex, and has white background color. My input has transparent background color, and I display the chips when inputs.length > 0. It's a bit tricky way to achieve this but yeah, it works till we get a better example.

[gpulido]

@westdabestdb Thanks for the code, would you mind completing it with the css /sass classes and the #query management code on the ts file?

Now I have to make it work with an autocomplete mode to pick values from a list.

[k11k2]

@gpulido any update on documentation ?