I currently have the following set up:
Users Component HTML:
<div class="users">
<ul class="users__list">
<li *ngFor="let user of users"></li>
</ul>
</div>
Users Component TS:
import { Component, OnInit } from '@angular/core';
import { UserComponent } from '../user/user.component';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss'],
})
export class UsersComponent implements OnInit {
users: UserComponent[] = [];
ngOnInit(): void {
this.users.push(new UserComponent('Test User'));
}
}
User Component HTML:
{{ name }}
User Component TS:
import { Component, Inject, OnInit } from '@angular/core';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss'],
})
export class UserComponent {
constructor(@Inject('name') public name: string) {}
}
My objective is to dynamically generate new users (for instance, using a button) by utilizing code like new UserComponent('NAME'); and then include them in the users array within the users component.
Thus, my query is: How can I exhibit a component that has been initialized via code?
I experimented with the following approach:
<div class="users">
<ul class="users__list">
<li *ngFor="let user of users">{{ user }}</li>
</ul>
</div>
but unfortunately, it merely displayed '[object Object]'. Perhaps my method is completely misguided, but I believed it could be the simplest solution if it functioned as intended.