md-chips | Angular Chips directive following Google Material Design

Problem with my approach is when the device width shrinks or switch my view to Mobile View, the chips are overflowing past the screen size. I wanted the chips to be aligned responsively with the screen size.

I tried implementing the div with flex but not luck.

Here's the code

I'm implementing a filter using chips of Angular Material. When user clicks on chips, the value associated to that chip should be stored in the array. The same way, when user deselects the chip, that value should pop from the array.

I was able to store the values but selecting and deselecting are causing addition of duplicate values in the array and I'm not able to pop them out when user deselects the chip.

Here's the excerpt from my code.

HTML Code

I'm trying to apply style to chips only when the chips are clicked. I want user to know which chips are selected.

Problem with my approach is, with the ng-repeat, all the chips are getting styled even when one chip is clicked. How do I apply style only for the chip which user selects and remove the styling when user clicks the same chip again just like toggling / as in checkboxes.

Here's the excerpt from my code:

HTML Code

I want to let a user input only one chip in mat-chip with auto complete. I know md-chips has md-max-chips to set maximum number of chips. but I am using mat-chip and how can I set maximum number of chips like this?

Md-chips email validation

How to create an email validation for md-chips? My expression below is not working, since, the ng-keypress directive is called whenever I type something.

Suggestions?

I created a webpage with Angularjs and Laravel. It's an event page. In my admin-panel I can manage all events.

When I click at "Bearbeiten" a new window appears.

At the bottom I can add/remove different attractions. When I submit the form, I want save the new data in the database, but I don't know how I can get the data from the formula. I tried different thinks and yes I used google.

When I click at "Bearbeiten" following code will be executed:

I'm using this syntax to create chips -

When exceeding the length of the input, the md-chips creates a new line. I'd like the chips to continue always in one single line and the input to overflow horizontally just as a normal text input. How to achieve this? This answer is not working for me.

Image of the undesired behavior:

I am using md contact chips and my template looks like this