Within parent.component.html
The HTML code I have implemented is as follows:
<button type="button" class="btn btn-secondary (click)="AddComponentAdd()">Address</button>
<app-addresse *ngFor="let addres of collOfAdd" [add]="addres"></app-addresse>
Inside parent.component.ts
I have an array named collOfAdd which is initially empty:
private collOfAdd: Array<AddresseComponent> = [];
And upon clicking the AddComponentAdd button, the AddresseComponent is pushed into this array:
AddComponentAdd() {
this.collOfAdd.push(AddresseComponent);
}
Next, in addresse.component.ts
The component accepts the input variable 'add' as a string:
@Input() add: string;
To display multiple instances of the <app-addresse> component within the parent component by clicking the provided button, you can utilize the ngFor directive along with the array element collOfAdd.