CODEWITHSUNDEEP
angulartypescript
Sharon Watinsan
Sharon Watinsan

Reputation: 9850

Add new Card upon Button click

This is a 2 part question:

  1. When a User clicks on the Add a Card button I require to repeat (add a new empty card) the card as shown in the below snippet. How can I do this ?

  2. I need to add the value of the inputField in to an array (So I can use it to display later).How can I do this ?

     <button (click)="CreateNewCard($event)">Add a Card</button>
     <div class="card">
         <div class="card-body">
            <h5 class="card-title">New Card every click</h5>
            <input type="text" id ="name" class="form-control " aria-describedby="name" name="name"  formControlName="name" />

     </div>
 </div>

TS file

CreateNewCard (event : any){


}

Upvotes: 0

Views: 2180

Answers (2)

Muhammad Amir
Muhammad Amir

Reputation: 1

  CreateNewCard($event){

  const card = this.yourCard
  const parent = document.getElementById("card_parent")
  parent.innerHTML = card 

  }

onSubmit() {this.yourArray.push(this.form.value); this.idCard}
idCard: number = 1;
yourArray: string[] = []
yourCard: string = `<div class="card-body" id="card_${this.idCard}">
                    ////   your design /////                        
                    </div>

Upvotes: 0

Hamada
Hamada

Reputation: 1898

In your Html;

<button (click)="CreateNewCard($event) onSubmit()" >Add a Card</button>

 <div #yourContainer >

     <div class="card" id="card_1">
         <div class="card-body">
            <h5 class="card-title">New Card every click</h5>
            <input type="text" id ="name" class="form-control " aria- 
              describedby="name" name="name"  formControlName="name" />
     </div>

 </div>

in your TS file;

@ViewChild('titleContainer', { static: true }) public yourContainer: any;

CreateNewCard($event){
this.newCardElem = document.createElement("div");
this.newTitleElem.innerHTML = this.yourCard;
this.yourContainer.nativeElement.appendChild(this.newCardElem);}

onSubmit() {this.yourArray.push(this.form.value); this.idCard++}
idCard: numbre = 1;
yourArray: [] = []
yourCard: string = `<div class="card-body" id="card_${this.idCard}">
            <h5 class="card-title">New Card every click</h5>
            <input type="text" id ="name" class="form-control " aria- 
              describedby="name" name="name"  formControlName="name" />
     </div>`

Upvotes: 2

Related Questions