Angular Dynamic reference of element and how to use it in component

Question

In our project, we have a ngFor loop parsing some users. For each user, I set in html, using ngx-bootstrap, a modal containing "more users information". Then, on the user row, we have a button which have to call the user specific modal.

<div *ngFor="let user of usersList">
    <p>{{ user.name }}</p>
    <p>{{ user.email }}</p>
    <span>
        <a (click)="moreDetailsModal.show()">Edit/More Detail</a>
    <span>

    <div bsModal #additionalInformationModal="bs-modal" class="modal fade">
        <h2>Details - {{ user.name }}</h2>
        <form class="form-horizontal" [formGroup]="userDetailsForm" (ngSubmit)="editUserDetails();">
            User ZIP Code: <input type="text" name="zip" value="{{ user.zip }}">

            <button type="submit">Edit User</button>
        </form>
    </div>  
</div>

My questions are:

• Do I have to set #additionalInformationModal reference dyanmically and with a different ID (using for example user.id ) or Angular will be sufficiently smart to call the proper user specific modal when clicking on Edit/More Details button? It seems to work as expected but I want to know if its due to a lucky mistake or Angular normal behavior.

  • If I have to use this reference in my Typescript component, how to retrieve a specific user one using @viewChild ? Since all references have the same name. For example, in case I need to call moreDetailsModal.show() from the typscript part.

  • If I have to set reference to be a dynamic one, how to achieve the dynamic naming? And how to use it in both HTML and TS part of my component?

• Will Angular be able to create all subsequent data driven forms since they have all the same name: userDetailsForm

Thanks for your explainations!

Answer 1

Do I have to set #additionalInformationModal reference dynamically and with a different ID...

Yes template reference should be unique. best way to do this to use array or object

1. Define object or array in component

   public RefVarable: {} = {};

2. In *ngFor loop use index

   *ngFor="let user of usersList; let i = index;"

3. use RefVarable[i] to reference the modal

If I have to use this reference in my Typescript component, how to retrieve a specific user one using @viewChild ? Since all references have the same name...

As I told before reference variables should be unique.

If I have to use this reference in my Typescript component, how to retrieve a specific user one using @viewChild...

&

If I have to set reference to be a dynamic one, how to achieve the dynamic naming...

1. use array or object.
2. use index or userId as key of objects to reference them.

Will Angular be able to create all subsequent data driven forms since they have all the same name: userDetailsForm

Use same technique for forms.