javascriptangulartypescriptangular-materialmat-chip

Angular- How to limit multiple mat-chip and unable to disable the input

This is my stackblitz recreation of a small part of my project. In here I am facing 4 problems:-

  1. I want to limit user to just one mat-chip. I tried [disabled]="selectedOption >=1" even though this one works, I do not want to disable the remove function so that if the user want he/she can remove the chip and add a new one.
  2. In the 2nd input text box, I want to add some kind of line-break. If you type something in there it just overflows the input in horizontal direction.
  3. I want to input text in the 2nd input text box from the top of the text-box instead of starting from the middle.
  4. Is it possible to hide the placeholder of the 2nd input text, until we enter something in the 1st input?

Can someone help me with this?

Thanks for the help in advance

Solution

  • I don't think I had understood the second problem, but the others are solved here