https://i.sstatic.net/ZWIu1.png
Can you provide guidance on how to transform text data into separate boxes like the image when a user inputs words separated by commas? I am working on implementing this feature in an input field using Angular.
https://i.sstatic.net/ZWIu1.png
Can you provide guidance on how to transform text data into separate boxes like the image when a user inputs words separated by commas? I am working on implementing this feature in an input field using Angular.
To implement this functionality, you can use a variable along with ngModel and iterate over it using *ngFor after splitting it by comma.
<input [(ngModel)]="name">
<ng-container *ngIf="name">
<div *ngFor="let item of name.split(',')">
{{item}}
</div>
</ng-container>
Alternatively, you can utilize mat-chip-list for a different approach:
<mat-chip-list *ngIf="name">
<mat-chip
*ngFor="let item of name.split(','); let i=index">
{{ item }}
<button matChipRemove>
<mat-icon (click)="remove(i)">cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
If you prefer to work directly with the list, here's how you can remove an element from it:
remove(index:number)
{
const list = this.name.split(",");
list.splice(index,1);
this.name = list.length ? list.join(',') : null;
}
Check out the code in action on StackBlitz.
Remember, if you only require the "list" based on a variable, simply assign the value to that variable.
Are you in search of a solution similar to Angular Material Chips? Check out this link for examples and more information: https://material.angular.io/components/chips/examples
I have been working on an application using Node.js, express.js, and ejs. I am utilizing the following code to incorporate ejs and load css: app.engine('.html', require('ejs').__express); app.set('views', __dirname + '/vi ...
As a newcomer to JQuery and JS, I seek your understanding for any mistakes I may make. My current goal is to extract the text from an ICS file (e.g. BEGIN:CALENDAR....) using JavaScript. Here is a simple HTML file I am working with: <html> <b ...
Sorry for the confusion - my webpage is displaying images, but the CSS styling is not being applied to any of them. I've tried adding a class, inline styling in the HTML (with style=""), and using jQuery's .addClass or .css, but none of these met ...
It seems like a crucial matter that needs attention. My dialog has an overlay with specific width settings as shown below: .ui-widget-overlay { width: 518px !important; } The height of the overlay will vary based on the page size controlled by JavaS ...
<form style="float:right" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" > <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="upload" value="1" ...
I created a table on my HTML page using div tags. The content of the table can be hidden and shown with an onClick event in the corresponding Enabled/Disabled section. All styling for the div sections is done through CSS in a separate stylesheet. My html, ...
Our team is embarking on a new software project utilizing Angular2, typescript, and HTML5. We are considering two options for UI components: - DevExtreme - Telerik Kendo UI Which of these would be the best choice in your opinion? Thank you! ...
I have been struggling to properly integrate Bootstrap into my LESS file. Currently, I am adding Bootstrap to my project using NPM. If I simply use the following import statement in my LESS file: @import (reference) 'node_modules/bootstrap/less/boot ...
Here is some code I am working with: $(document).ready(function () { $("#full-btns").children().delay(4000).fadeOut("slow"); $('#full-btns').hover(function() { $('#full-btns').children().stop().animate({opacity:'100'} ...
For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...
Hey there, I'm experiencing a strange issue with my navigation bar. When hovering the mouse between the first drop-down link and the second drop-down link, a strange jitter occurs. Can someone provide assistance in resolving this issue? You can witn ...
One of the challenges with my web page is that dynamically added content does not display tipboxes, unlike items present since the page load. I utilize the tipbox tool available at http://code.google.com/p/jquery-tipbox/downloads/list. To illustrate the i ...
My attempt to send a POST request from my angular application to a .net Web API instance is resulting in the server returning null. server [HttpPost] public string callBcknd([FromBody]string body) { try { Log.Info(string.Format("{0}", bo ...
Whenever I run ng serve on my fresh Angular project, I encounter the following error: module.js:538 throw err; ^ Error: Cannot find module '@angular-devkit/core' What could be causing this issue? ...
Similar Question: How to Resize Embedded Videos Using PHP I am looking to adjust the dimensions of videos to be 280 pixels in height and 520 pixels in width on my WordPress homepage. Currently, the code is using the original YouTube dimensions: ...
I encountered a similar issue like the one discussed in this post (Get a tree like structure out of path string). I attempted to implement the suggested solution but I am facing difficulties getting it to work within an Angular context. The concept involv ...
Whenever I attempt to print images using a for loop, the images fail to load. <?php $images = array('1.png', '2.jpg', '3.png', '4.jpg','IMG_0105.JPG'); ?> <div class="container"> <d ...
I am tasked with developing two separate themes for an angular application. These themes should be loaded based on a property retrieved from an API call. I plan to create two HTML files that will share the same .ts code, since the core functionality will n ...
I am facing an issue with a parent div that contains multiple children. I want to add spacing between the children by applying margins, but this also creates unwanted space between the parent and the children. Is there a clean solution to remove this space ...
Hello everyone, I am new to Angular 2/4 and I am trying to parse a CSV file and display the data in a table on a webpage. I have attempted some code, but the data only gets displayed in the console, not on the webpage itself. Can anyone help me out? hand ...