Add a new child component template with each click using the onclick event in Angular

Question

Add a new child component template with each click using the onclick event in Angular

Is there a way to dynamically add a child component with each button click event?

Here is the HTML code for the button:

<button type="button" class="btn btn-success btn-sm btn-add-phone" (click)="addfield()"><span class="fa fa-plus"></span> </button>

The child component that gets displayed on every button click:

<app-farmer-registration-phone *ngIf="loadComponent"></app-farmer-registration-phone>

Corresponding Component TypeScript file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-farmer-registration',
  templateUrl: './farmer-registration.component.html',
  styleUrls: ['./farmer-registration.component.css']
})
export class FarmerRegistrationComponent implements OnInit {
public   loadComponent = false;
  constructor() { }

  ngOnInit() {
  }

    addfield(){
        this.loadComponent = true;

    }
}

angular typescript

Answer 1

Answer №1

If you want to iterate over an array in Angular, you can use the *ngFor directive. First, create a temporary array like this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-farmer-registration',
  templateUrl: './farmer-registration.component.html',
  styleUrls: ['./farmer-registration.component.css']
})
export class FarmerRegistrationComponent implements OnInit {
public   loadComponent:any[] = [];
  constructor() { }

  ngOnInit() {
  }

    addfield(){
        this.loadComponent.push(1);

    }
}

Your HTML code should look like this:

For the button element:

<button type="button" class="btn btn-success btn-sm btn-add-phone" (click)="addfield()"><span class="fa fa-plus"></span> </button>

The child component that will be loaded each time the button is clicked:

<app-farmer-registration-phone *ngFor="let item of loadComponent"></app-farmer-registration-phone>

Answer 2

If you want to iterate over an array in Angular, you can use the *ngFor directive. First, create a temporary array like this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-farmer-registration',
  templateUrl: './farmer-registration.component.html',
  styleUrls: ['./farmer-registration.component.css']
})
export class FarmerRegistrationComponent implements OnInit {
public   loadComponent:any[] = [];
  constructor() { }

  ngOnInit() {
  }

    addfield(){
        this.loadComponent.push(1);

    }
}

Your HTML code should look like this:

For the button element:

<button type="button" class="btn btn-success btn-sm btn-add-phone" (click)="addfield()"><span class="fa fa-plus"></span> </button>

The child component that will be loaded each time the button is clicked:

<app-farmer-registration-phone *ngFor="let item of loadComponent"></app-farmer-registration-phone>

Answer 3

Answer №2

To implement this functionality, you will need to utilize the ngFor directive.

Start by creating a placeholder array. Then, iterate over this array to dynamically insert child components.

Check out a live demonstration on Stackblitz

Component Code:

arr = [];

addfield() {
  this.arr.push(''); // Add an empty string or any other value
}

HTML Markup:

<div *ngFor="let item of arr">
  <app-farmer-registration-phone></app-farmer-registration- 
   phone>
</div>

<button type="button" class="btn btn-success btn-sm btn-add-phone" (click)="addfield()"><span class="fa fa-plus"></span> </button>

Answer 4

To implement this functionality, you will need to utilize the ngFor directive.

Start by creating a placeholder array. Then, iterate over this array to dynamically insert child components.

Check out a live demonstration on Stackblitz

Component Code:

arr = [];

addfield() {
  this.arr.push(''); // Add an empty string or any other value
}

HTML Markup:

<div *ngFor="let item of arr">
  <app-farmer-registration-phone></app-farmer-registration- 
   phone>
</div>

<button type="button" class="btn btn-success btn-sm btn-add-phone" (click)="addfield()"><span class="fa fa-plus"></span> </button>

Answer 5

Answer №3

To accomplish this task, you can utilize a for loop in combination with the child component.

Start by assuming an array and then insert new indexes into it whenever the add Button is clicked.

Below is the code snippet to guide you through:

Array

public items = []

public add () {
 this.items = [...this.items, this.items.length]
}

Child Component

<app-farmer-registration-phone *ngFor="let item of items" ></app-farmer-registration-phone>

Check out this demo on StackBlitz

Answer 6

To accomplish this task, you can utilize a for loop in combination with the child component.

Start by assuming an array and then insert new indexes into it whenever the add Button is clicked.

Below is the code snippet to guide you through:

Array

public items = []

public add () {
 this.items = [...this.items, this.items.length]
}

Child Component

<app-farmer-registration-phone *ngFor="let item of items" ></app-farmer-registration-phone>

Check out this demo on StackBlitz

Add a new child component template with each click using the onclick event in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing component and view functionality in Angular

A step-by-step guide on accessing the data from an uploaded JSON file in a React application

Issue: The 'async' pipe was not found after updating to AOT and IVY

Update the mat-chip-remove positioning attributes

Determining the output type by considering the presence of optional parameters

Exploring the terrain of observable data

Angular 6 Subscription Issue: Problems with Variable Assignments

Incorporating Angular: A guide to removing a specific element from an HTML array using line breaks

How can we set up the Typescript Compiler to recognize typings and modules effectively?

Issues with IonPicker displaying incorrect values

Customizing Components in Angular 2/4 by Overriding Them from a Different Module

What is the best way to organize objects based on their timestamps?

Error in Angular 2: Uncaught Promise TypeError - Unable to access property 'title' of undefined

What is the best method to retrieve the value of a cell in a different cell within the same row in an Angular Material Data-Table?

Is it possible to pass parameters from a base class's constructor to a child class?

There was an issue encountered while compiling the template for 'AppModule'

Is it possible to determine if an HTML form has been modified?

Obtaining child elements of the DOM within an Angular Component that has already been instantiated: A step-by-step guide

Is jQuery utilized by the bootstrap-grid system?

Encountering an issue with Angular 5.2 application build on VSTS build server: Running into "CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" error