CODEWITHSUNDEEP
angularjsangularangular2-routingangular2-services
Nacim Idjakirene
Nacim Idjakirene

Reputation: 1931

Angular 2 navigating in the different instances of the same component with different data to display

I have a simple side menu in my Angular 2 applications which display a list of classRoom, each class Room has many users.

I navigate between the different instance with routerLink.

My problem is that when I click on the first item : -class Room number 1 I have no problem and the list of user are alright, but when I click on Class Room number 2 the data does not change, so the users displayed are the users of Class Room Number 2.

How can I tell Angular To re-render the component with the new data?
Any suggestions?

UPDATE CODE EXAMPLE

side-menu.component.html

<li *ngFor='let classRoom of classRooms'>
    <li>
        <a [routerLink]="['/app/users/', classRoom.name]">**Users**</a>
    </li>
    <li>....</li>
    <li>....</li>
</li>

routes.ts

....
{ path: 'app/users/:classroom', component: usersComponent},

So when i click on 'users' link, i call the users component, get classroom's name by route param and make a get request to get the users.

With the first class room no problem, but if i click on the 'users'link of the second classroom no change happend.

Upvotes: 1

Views: 309

Answers (2)

Ahmed B. Hameed
Ahmed B. Hameed

Reputation: 27

Your routerLink needs a terminal route

[routerLink]="['parent', 'child', query.id]"

to understand it more clear, see this post see my question and answer

Upvotes: 0

Thalaivar
Thalaivar

Reputation: 23642

I see you are loading userComponent in your route.ts. Can you try like below:

<div class="col-md-3" *ng-for="let classRoom of classRooms">
    <a [routerLink]="['/app/users/', classRoom.name]">
       <user-component></user-component>
    </a>
</div>

Upvotes: 1

Related Questions