title: How to generate a user-defined class object dynamically inside a component function
body: <p>I'm using Angular to design a page that has nested components. The parent component acts as the container and the child components are essentially mat-cards displaying user information (user name, id, address etc.). I want to generate the child components directly by clicking a button in the parent component (which calls a GenerateUser() function).</p>
  
  <p>I have created a class (UserDetails) with the requisite fields (user name, id, address etc.). I generate the child components dynamically inside the parent component using an array of UserDetail objects (the html simply loops over the array to generate child components using @Input). Every click of the "Generate button" pushes a UserDetail object on to the UserDetail array. At the moment I have one UserDetail object created using "new" and push the same object to the array. It's not surprising that all child components get the same value.</p>
  
  <p>For every new user I'd like to create an independent/new UserDetail object, initialise the id value and pass the object to the new child component being created. How can I dynamically generate UserDetails objects in the GenereteUser() function? The parent-component.ts is as follows:</p>
  
  <pre><code>import { UserDetail } from 'src/app/models/UserDetail';
  
  @Component({
    selector: 'app-user-parent',
    templateUrl: './user-parent.component.html',
    styleUrls: ['./user-parent.component.scss']
  })
  export class UserParentComponent implements OnInit {
  
    addUsers: UserDetail [] = [];
    newUser: UserDetail = new UserDetail();
  
    private addTracker: number;   // no. of additions
  
    constructor() { }
  
    ngOnInit() {
      this.addTracker = 0;
      this.newUser.id = this.addTracker;
      this.addUsers.push(this.newUser);
    }
  
    GenerateUser(): void {
      this.addTracker += 1;
      this.newUser.id = this.addTracker;
      this.addUsers.push(this.newUser);
    }
  
  }
  </code></pre>
  
  <p>As mentioned above, in the GenerateUser() function I'd like to generate a new UserDetail object, but Angular doesn't let me use "new UserDetail()" inside the GenerateUser() function.</p>
  
  <p>Is there a way to dynamically generate a new object inside GenerateUser()?</p>
  
  <p>I know that I can use </p>
  
  <pre><code>this.addUsers.push({name: xxx, id: this.addTracker, address: yyy}); 
  </code></pre>
  
  <p>but I don't want to go that way as the code becomes too verbose.</p>