Angular has the feature of a right float button with *ngfor

I've successfully implemented a form using Reactive Forms in Angular.

Currently, my form is displayed as follows:

<div class="center" appMcard>
   <form [formGroup]="GroupRMPM_FG">
      <div formArrayName="GroupId_Name"  *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">
         <input  type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
         <button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
         </button>
      </div>
      <button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn"></button>
   </form>
</div>

https://i.stack.imgur.com/yCGpv.png

I want the "+" button to be aligned to the right of the last minus button.

To achieve this, I added a class to the ngfor div:

<div formArrayName="GroupId_Name" class="formcontainer" *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i=index">

Below is the CSS code for the new class:

.formcontainer {
    display: inline-block;
}

Despite adding the class, I'm still unable to position the "+" icon next to the last minus button.

https://i.stack.imgur.com/IMsLn.png

How can I ensure that the "+" icon appears to the right of the last minus button?

htmlcssangular

Answer №1

It is advisable to include a condition in the button element to display it only when the array reaches a certain length.

<div class="center" appMcard>
    <form [formGroup]="GroupRMPM_FG">
       <div formArrayName="GroupId_Name"  *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">
          <input  type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
        <button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" ></button>
        <button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn" *ngIf="i===GroupRMPM_FG.controls.GroupId_Name.controls.length-1"></button>
       </div>       
    </form>
 </div>

Answer №2

It seems like your approach is on the right track, but consider wrapping your loop-container and utilizing flexbox for alignment (there are other methods to achieve this as well):

<form [formGroup]="GroupRMPM_FG" style="display: flex; flex-direction: row; justify-content: flex-end">
    <div style="display: inline-block">   
       <div formArrayName="GroupId_Name" *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index">
       <input  type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
       <button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
     </button>
    <button pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn"></button>
 </form>

Answer №3

Example utilizing the bootstrap pull-right class:

Code Snippet:

<button type="button" pButton (click)="addNewGroup()" icon="fa-plus" class="add-btn pull-right"></button>

Styling in CSS:

.pull-right{
  float:right
}

Check out my demonstration on JsFiddle https://jsfiddle.net/example/1/

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

Designing a Bootstrap layout with twin divs adjacent to each other

I am trying to design a webpage with two Divs positioned side by side using bootstrap styles. However, the code I have been using is not yielding the desired outcome. Is there anyone who can offer me some guidance on how to achieve this? Thank you. < ...

jqueryhtmlcsstwitter-bootstrap

Equal-height list items in a multi-column unordered list

A multi-column unordered list has been created. Below is the HTML code: <ul> <li>Antelope</li> <li>Bison</li> <li>Camel</li> <li>Deer</li> <li>Eland</li> <li>Gazell ...

htmlcss

How to insert additional spacing within an input tag class in dynamic HTML using jQuery

When creating an html table dynamically from json data, I encountered an issue with adding space inside my input button control. It seems that after separating two classes with a space, the code is not functioning properly in this snippet environment. Howe ...

jquerycssasp.net-mvcdynamic-html

Angular Kendo Grid (version 1.4.1)

I am currently encountering an issue where I want to select the first row in a Kendo Grid. Here is the code snippet that I have implemented: In my Component file: export class SampleComponent{ gridView: GridDataResult; mySelection: number[] = [0]; ...

angularkendo-ui-angular2

Check that EACH radio button has been either selected or left unselected when the button is clicked

I'm still learning Javascript and currently working on a function triggered by a button click. My goal is to display an alert if NONE of the radio buttons have been selected, regardless of whether they are "Yes" or "No." If ALL radio buttons have been ...

javascripthtmlvalidationdomradio-button

Creating dynamic DOM elements in Angular templates by utilizing variable values as element types

There's a component I'm working with that I want to render either as a div or span dynamically. To achieve this, I've created an input variable called elementType. Now, the challenge is how to properly render it in the template. Here's ...

angularangular-template

adjust the size of a form field to match the background image dimensions

I'm encountering an issue while trying to solve this particular challenge: My goal is to integrate a login box onto a full-screen image. Although I've come across numerous methods for incorporating an image into a form field, my task requires me ...

css

require an array that contains an embedded object

When making a post request, I need to include an array with an object inside. I have observed that adding new properties inside an object works fine. However, when attempting to add properties while the object is inside an array, it does ...

javascripthtmlarraysreactjsredux

There will be no further upgrades available for Angular CLI after version 1.6.0

Based on the latest information from npm, the current version of @angular/cli is v6.2.5. Upon running ng -v, the output shows: _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ &b ...

angularnpmangular-clinpm-install

In Angular, dynamically updating ApexCharts series daily for real-time data visualization

I am currently working with apexchart and struggling to figure out how to properly utilize the updateseries feature. I have attempted to directly input the values but facing difficulties. HTML <apx-chart [chart]="{ type: ...

angulartypescriptapexcharts

Angular Karma Error - MatDialogRef Provider Not Found

While testing with Angular Karma, I encountered the following error... NullInjectorError: StaticInjectorError(DynamicTestModule)[ManageProblemsComponent -> MatDialogRef]: StaticInjectorError(Platform: core)[ManageProblemsComponent -> MatDialogRef]: ...

angulartypescriptkarma-jasminekarma-runner

How can I emphasize only a portion of a word in ReactJS and Material UI?

I am attempting to replicate this design: https://i.stack.imgur.com/H8gKF.png So far, this is what I have been able to achieve: https://i.stack.imgur.com/TJXXb.png My project utilizes Material UI and ReactJS. Below is a snippet of the code: bodyTitle: { ...

cssreactjsmaterial-ui

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

I'm struggling with my html code that contains elements arranged in rows: <div class = "row"> <div class="col-sm-3 cont-box"> <h1>Title1<h1> </div> <div class="col-sm9 cont-box"> <img src="onepic.jpeg" class=" ...

htmlcss

By setting up a keydown event listener, I am unable to inspect HTML elements by using the F-12 key shortcut in Chrome

Recently, I encountered an issue where adding a keydown event listener in my JavaScript code prevented F-12 from working properly. window.addEventListener("keydown", function (event) { if (event.defaultPrevented){ retu ...

javascripthtmlgoogle-chromekeyboardaddeventlistener

The function putImageData does not have the capability to render images on the canvas

After breaking down the tileset The tiles still refuse to appear on the <canvas>, although I can see that they are stored in the tileData[] array because it outputs ImageData in the console.log(tileData[1]). $(document).ready(function () { var til ...

javascriptjqueryhtmlcanvas

Arranging HTML components in Vue.js using v-for loop

Recently, I started using vue.js and I have a requirement where I need to display an HTML structure based on API data. The structure should look like this: <div class="row"> <div><p>text1</p><img src="{{imgurl1}}" /></di ...

javascripthtmlvue.js

Using the max-width property with Semantic UI Dropdown in ReactJS

I'm struggling to determine how to adjust the max-width of the Dropdown element in ReactJS. I attempted the following: .Menu Dropdown { max-width: 5rem !important; } Unfortunately, this did not work as expected. The dropdowns are taking up too m ...

javascriptcssreactjsdropdown

Having trouble retrieving the Ionic 2 slides instance - getting a result of undefined

As I attempt to utilize the slides and access the instance in order to use the slideto functionality programmatically, I find myself encountering the issue of receiving 'undefined' back despite following the documentation. Here is my TypeScript ...

angulartypescriptionic-frameworkionic2

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

I have been working on a small function to change the background of an HTML file, but I keep getting the 'Missing 'use strict' statement' error message from JSLint despite trying multiple solutions. Can anyone suggest how to resolve th ...

javascriptjqueryhtmlcss

Notify user with a Javascript alert if there are no search results found

I have developed a search index for Chicago employees and want to create an alert if no matching records are found. However, I am struggling to determine the value that needs to be inserted in case of an empty result set. Ideally, upon submission of the fu ...

javascriptjqueryhtmlfunctionalert