Incorporate a dynamic form into an ngx-sortable control in Angular 6

Having difficulty with the layout implementation in Angular 6.

A form component is dynamically added during runtime.

Using ngx-sortable, I aim to have dynamic content within it, but am facing challenges with the setup.

Implementing Sortable control:

<ngx-sortable [items]="items" [name]="'Attraction Content'" (listSorted)="listSorted($event)">
          <ng-template let-item>
              <!-- sortable items here?? -->
          </ng-template>
   </ngx-sortable>

For the dynamic form:

<app-attraction-text></app-attraction-text>

Attempts were made to place the dynamic form tag within the sortable control, resulting in an empty appearance. Seeking advice from those who have successfully done this before.

To provide context, here is the HTML for the dynamic control: By clicking a button, multiple instances can be created, which should then be sortable.

<form [formGroup]='contentForm' style="margin-top:30px">
    <div formArrayName='content'>
        <div *ngFor="let formGroup of contentLines.controls; let i = index">
            <div class="card text-left">
                <div class="card-header text-secondary">Attraction Text
                  <img  align="right" class="pull-right table-header-padding" src="assets/images/LockLineIcon.png" />
                  <img  class="float-right text-danger icon-pad draft-icon-indent" src="assets/images/DeleteIcon.png" (click)="delete(i)"/>
                </div>
                <div class="card-body" >
                  <textarea  id="text" name="text" type="text" class="form-control" required maxlength="2048" ></textarea>
                </div>
                <div class="card-footer">
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddParagraphIcon.png" (click)="add();" />
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddQuoteIcon.png" />
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddHighlightTextIcon.png" (click)="AddHighlight()"/>
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/addimage.png" (click)="AddImage()"/>
                    <img align="right" class="pull-right table-header-padding" src="assets/images/DragUpDownIcon.png" />
                </div>
            </div>
        </div>
    </div>
</form>
angularhtml

Answer №1

It appears that you are required to pass the "item" parameter into your dynamic form.

To accomplish this, please follow these steps:

 <ngx-sortable [items]="items" [name]="'Attraction Content'" (listSorted)="listSorted($event)">
      <ng-template let-item>
          <app-attraction-text [item]="item"></app-attraction-text>
      </ng-template>
</ngx-sortable>

This way, your dynamic form components will receive the necessary data from each "item".

In your dynamic component, remember to include the input:

@Input() item: any;

if(this.item) {
    this.form.patchValue(this.item);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Opening a modal in Angular2+ when selecting an item from ngx-chips (tag-input)

I need to implement a functionality where clicking on a tag in a dropdown should trigger the opening of a modal window in my Angular application. Below is the code snippet related to this feature: <div class="force-to-the-bottom"> <tag-input [ ...

angulartypescriptmodal-dialogngx-chips

I am puzzled as to why my jQuery height and width functions are returning NaN as the result

I am attempting to calculate the ratio of height and width for each image on a webpage. Unfortunately, I am consistently receiving a NaN result and I cannot figure out why. I have been using get() and find() <div class='image-wrapper'> ...

jqueryhtml

So many private functions in Angular 2! Should we unit test them or perhaps make them public?

It's interesting to note that the majority of functions in my Angular 2 application are private. Take a look at this component, which happens to be my largest one - a form with numerous child components. import { Component, ViewChild, Ele ...

unit-testingangular

Can data from an Angular app be accessed by an external JavaScript code within the same project?

I've been thinking about a theoretical scenario that luckily I haven't encountered yet. Imagine I have an Angular Project compiled in My PROJECT FOLDER. <br/> Inside this PROJECT FOLDER, there's another JAVASCRIPT FILE external to ...

javascriptangulartypescript

Seems like the ng-show events inside are not being triggered, almost like an invisible image

I am encountering an issue where no JavaScript events are triggering inside an ng-show div in my code. You can access my code through the following link on Plnkr: http://plnkr.co/edit/kGqk8x?p=preview Upon loading data from JSON, I set ng-show to true. Ho ...

javascripthtmlangularjsjsonajax

An issue arises in Django where a particular field fails to display the accurate value when presented in a template

models.py The Order model in models.py defines various fields such as user, customer, card_id, mobile, email, total_price, payment_method, status, take_method, points_earned, date, and address. It also includes preset choices for payment options, order sta ...

pythonhtmldjango

Error alert: $.simpleWeather function not found

Currently, I am attempting to incorporate simpleWeather.js from the website simpleweatherjs.com into my own website. However, upon inserting the html code onto my website, an error message pops up: Uncaught TypeError: $.simpleWeather is not a function ...

javascriptjqueryhtmlfunctionreference

When using jquery.hide() and show(), the content within the div disappears momentarily before reappearing

Hello! I am experiencing an issue where the content of my div disappears after using a jQuery hide() and show() function. It seems to be gone. <li class="gg3"><a class="link" href="#" data-rel="content3">Link1</a></li> <div clas ...

javascriptjqueryhtml

The Infinite Loop: Unveiling the En

I'm interested in creating a unique shape resembling the symbol of infinity using CSS, SVG, or Canvas. If you're unfamiliar with what an infinity symbol looks like, here's an example: https://i.stack.imgur.com/cLhBh.jpg So far, I've a ...

htmlcsssvgcss-shapes

What impact does the text-shadow property have on altering the color of hsla text?

I created a header that changes color to be slightly transparent with a black outline when hovered over (achieved using 4 text-shadows). However, I encountered an issue when trying to use hsla() to define the color. The color defaults to black with 100% o ...

htmlcsscolorshsl

A guide on retrieving real-time data from PHP using Ajax

Being new to Ajax, I am struggling to grasp how to retrieve changing variable values from php. Below is the code snippet that I have been working on: <?php $pfstatetext = get_mypfstate(); $cpuusage= cpu_usage(); ?> <div id="show"> <c ...

javascriptphphtmlajax

The theme font fails to take effect on the paragraph

As a novice in HTML and CSS, I attempted to use the "Roboto Condensed" font from a WordPress theme for my entire site. Although I successfully implemented this custom font for a menu, I encountered difficulties when trying to apply it to paragraph elements ...

htmlcsswordpressfonts

Leverage the pre-defined Ionic Sass variables for optimal styling

Is it possible to utilize existing Sass Variables in Ionic 5 for our custom CSS classes? The specific variables I am referring to can be found here: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/ I'm interested in creating som ...

iosangularionic-frameworksass

Retrieve the Nth class of an element that has multiple classes without relying on the .attr("class") method in jQuery

Within a container with two styles, the initial nested div <div class="datacheck"> <div class="classic_div_data customdataid_305"> some values are included here </div> <div class="optiondiv"> </div> </div& ...

javascriptjqueryhtml

Developing web applications using Express.js and Jade involves connecting CSS stylesheets

I'm currently in the process of developing a web application using Express.js along with some Bootstrap templates. I utilized jade2html for conversion, and while the page loads successfully, it lacks any styling. The following code snippet is what I ...

htmlexpresspug

What is causing the unusual behavior of z-index in this specific scenario?

I have a good understanding of z-index and decided to practice with it by writing the following code: *{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; di ...

htmlcss

Access PDF document in a fresh tab

How can I open a PDF file in a new tab using Angular 6? I have tried the following implementation: Rest controller: @RestController @RequestMapping("/downloads") public class DownloadsController { private static final String EXTERNAL_FILE_PATH = "/U ...

angulartypescriptangular6

Text successfully inserted into the input field using Xpath

I need help with the following issue: I am trying to use Selenium to verify if an input field contains a specific text that has been manually entered. Here is an example of an input field with the value '50': <input type="text" class="value ...

phphtmlseleniumxpathweb

Discovering the reason behind a DOM element's visual alteration upon hovering: Where to start?

Visit this page, then click on the next button to navigate to the time slots section. As you hover over any time slot, you will notice a change in appearance. Despite inspecting Chrome's developer tools, I was unable to locate a style with a hover dec ...

javascripthtmlcss

Determine to which observable in the list the error corresponds

const obs1$ = this.service.getAllItems(); const obs2$ = this.service.getItemById(1); combineLatest([obs1$, obs2$]) .subscribe(pair => { const items = pair[0]; const item = pair[1]; // perform actions }, err => { // det ...

angulartypescripterror-handlingrxjsobservable