How can I display an angular component that is initialized from code?

Question

I have the following setup:

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 goal is to be able to dynamically (for example using a button) generate new users via code like new UserComponent('NAME'); and add them to the users array in the users component.

My question is: How can I display a component that is initialized from code?

I tried something like this:

<div class="users">
  <ul class="users__list">
    <li *ngFor="let user of users">{{ user }}</li>
  </ul>
</div>

but that just outputted '[object Object]'.

Maybe I have a completely wrong approach but I thought this could be the easiest solution, if it works.

robert · Accepted Answer · 2021-08-05 13:03:28Z

1

You need to keep track of data in the most part and Angular will handle the view for you.

Take a look at this demo

answered Aug 5, 2021 at 13:03

robert

6,2007 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bruno Cunha · Accepted Answer · 2021-08-05 13:03:13Z

1

How to show object property in template?

Your use is an object, so you have to indicate in HTML what property of this object you want to show:

<div class="users">
  <ul class="users__list">
    <li *ngFor="let user of users">{{ user.name }}</li>
  </ul>
</div>

How to generate more items and display in list?

Angular, automatically, bind your TS variables with your template. So, just update your users list with new users that Angular will update view. For example:

/* User.ts */
export class User {
 name: string;

 constructor(name: string) {
  this.name=name;
 }
}

/* UsersComponent.ts */
addUser() {
 const newUser = new User("I'm a new user!");
 this.users.push(newUser);
}

answered Aug 5, 2021 at 13:03

Bruno Cunha

2822 silver badges5 bronze badges

Collectives™ on Stack Overflow

How can I display an angular component that is initialized from code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related