md-chips

[Jeremy Elbourn]

Blocked on #117

[bastienJS]

@jelbourn Does that mean this component will still be released in the alpha version (before beta)?

[Sam Jones]

Chips seem sort of general purpose. It's not clear to me why their implementation would be blocked by autocomplete? Seems like it could be the other way around.

[Topher Fangio]

@ollwenjones Still need to discuss with the team, but my goal is indeed to create a very basic version of the chips before we introduce the autocomplete functionality.

[Sam Jones]

I'm not even sure understood what was meant by "Blocked on" - "Blocks" or "Blocked by" ? 😜

[Pankaj Parkar]

Any estimates? when this feature is going to roll-out?

[Topher Fangio]

@pankajparkar A basic version of the chips has already launched: https://material.angular.io/components/component/chips

We are continuing to add functionality.

[Jorge V]

In the angularjs version, chips didn't allow any duplicate strings. It would be nice to have a specific parameter to allow/disallow this kind of behaviour since it may be needed in some situations.

[Topher Fangio]

@Dunos If the chips are 100% string-based, then no, we can't have duplicates because then you can't find the proper indexOf() a chip since there could be multiple.

The Material 1 version did sort of support duplicates if you converted your chip to an object using md-transform-chip and gave each one a different ID.

However, as it stands right now, the Material 2 chips do not control anything about the actual chips that you provide. Since you provide the chips in an ngFor rather than an ngModel, you have total control.

[Jorge V]

@topherfangio in that case, you should be able to find a chip by its position in the array instead indexOf() imo

[ahillhouse]

Do you have a timeline for when custom chip templates (like md-chip-template) will be available? We currently use the angular 1 material chips and are in the process of upgrading to angular 2.

[Topher Fangio]

@ahillhouse You should be able to utilize the <md-basic-chip> to remove any special material styling and do whatever you like. You can see the docs at https://material.angular.io/components/component/chips.

What exactly are you trying to achieve?

[Jake Shoudy]

Are there plans to add delete functionality to chips? A little 'x' icon on each chip for example that will remove it from the chip list.

[Irauan]

There is an error in mixin md-chips-theme, it is only getting 500 colors, even if I set another pallet

&.mat-primary {
background-color: mat-color($primary, 500);
color: mat-contrast($primary, 500);
}

&.mat-accent {
  background-color: mat-color($accent, 500);
  color: mat-contrast($accent, 500);
}

&.mat-warn {
  background-color: mat-color($warn, 500);
  color: mat-contrast($warn, 500);
}

[Topher Fangio]

@Irauan It should be getting the 500 colors from the appropriate palette. What are you getting instead and/or what are you expecting?

[Irauan]

@topherfangio I'm defining the accent color as Cyan a400 and when I'm setting the accent color It returns Cyan 500

[Topher Fangio]

@Irauan Gotcha. I'll talk to the team and look at how to fix this. Thanks!

[Will Howell]

@topherfangio, if I'm not mistaken, you can just omit the 500 and mat-color will default to whatever the theme color is defined as.

[Jake Shoudy]

@topherfangio I never got an answer to my previous question:

"Are there plans to add delete functionality to chips? A little 'x' icon on each chip for example that will remove it from the chip list."

[Will Howell]

@jshoudy11, if you try out #2476, the following example has been added to the demo app. It's unclear what the current status of the PR is, but it looks like the 'x' icons will be included.

[Topher Fangio]

@jshoudy11 Indeed; we are planning to add the md-chip-remove directive, just need to get the PR finished/approved.

[Ben Racicot]

Hey @topherfangio just came across this thread after writing a remove function for these chips... Hope this helps someone seeing as I just got beta-3 with no remove chip features.

 removeSkill(event){ // chip click event
        for(var i = 0, j = this.chips.length; i < j; i++ ){
            if( event.target.innerText.trim() == this.chips[i].name.trim()){ 
                this.chips.splice(i, 1);
            }
        }
    }

Specifically:
I'm wondering how others are adding the chips info to NgForm for submission?

[Jeremy Elbourn]

Closing this, as chips have been around for a while and #4912 adds the last of the basic functionality. We can track further work in more specific issues.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}