I have a basic Angular Application looking like this:
app.component.html:
<head>
<title> My Home Page </title>
</head>
<body>
<h1>Test Umgebung</h1>
<div>
<label>Firstname</label>
<input placeholder="Firstname"/>
</div>
<div>
<label>Lastname</label>
<input placeholder="Lastname"/>
</div>
<div id="cloneContainer">
</div>
<button (click)="cloneUpper()">+ Add more Users</button>
</body>
</html>
As you can see, I type in Users and when I click on the "Add more Users" button, the following method should be executed:
app.component.ts:
import { Component } from '@angular/core';
import { CloneComponentComponent } from './clone-component/clone-component.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'UserManager';
cloneUpper(){
console.log("Cloned!");
var cln = new CloneComponentComponent();
var container = document.getElementById('cloneContainer');
container?.append(cln.toString());
}
}
The clone component just contains a input for firstname and lastname in order to add more users. Now, when I click the button, it just appends [object Object] to the "cloneContainer". What could be the mistake?
First suggest relationships, such as parent-child relationships, ways to get child components via viewChild, or public parameters via service
In Angular you don't need to get from DOM via getElementById anything. Just add conditional rendering:
<div id="cloneContainer">
<!-- CloneComponentComponent selector -->
<clone-component *ngIf="showClone"></clone-component>
</div>
Now your clone is visible only when showClone = true, so let's add this varable into your AppComponent and change cloneUpper method:
export class AppComponent {
title = 'UserManager';
showClone = false;
cloneUpper(){
this.showClone = true;
}
}
In case you need to handle array of clild components (push new ones) you can do the same trick with array:
<div id="cloneContainer">
<!-- CloneComponentComponent selector -->
<clone-component *ngFor="let clone of clones"></clone-component>
</div>
export class AppComponent {
title = 'UserManager';
clones = [];
cloneUpper(){
this.clones.push(true); // whatever you want
}
}
You are looking at this the wrong way, please go through https://angular.io/tutorial to learn the basics of angular. That being said, this is the perfect use case for a child component. The child component is a dumb component in this case, just taking in an object. I created an array of users, passing one user in initially and when clicking button pushing more users into the array. The dumb component only displays these form fields. I attached ngModel to bind the values as well. You will learn all this in the tutorial, but to get you started... create an interface:
export interface User {
firstName: string;
lastName: string;
}
Great, now we have a model, as we are using TypeScript, it can now help us in the IDE if we are doing something silly. Next, create an array, push an initial object to it:
users = [{ firstName: '', lastName: ''}] as User[];
Cool... now the function that will be called when we want to add more users:
addUser() {
this.users.push({ firstName: '', lastName: ''})
}
And over to the child, we'll just call it DumbComponent. We declare @Input() for the child, as we will be feeding the user object to it:
@Input() user: User;
Ok, and the child template will just have two fields, the firstname and lastname, bound with ngModel:
<input [(ngModel)]="user.firstName" placeholder="First Name"/>
<input [(ngModel)]="user.lastName" placeholder="Last Name"/>
Then we in parent iterate the users array and display a child component which is fed the current user in iteration:
<dumb-component *ngFor="let user of users" [user]="user"></dumb-component>
and the button of course:
<button (click)="addUser()">Add user</button>
That's it! Read through the tutorial linked on top, you will learn the basics of angular right there! :)