I have the following json array

```
    users= [
      {'name':'cliff'
       'age':'44'
       'bloodtype':'A'
       'hobby':'Golf'
      },
      {'name':'andy'
       'age':'30'
       'bloodtype':'b'
       'hobby':'running'
      }]

```

and i have the following code which will loop through all users and display its details

```
<div *ngFor='let user of users >
    <div>Name:{{user.name}}</div>
    <div>Age:{{user.age}}</div>
    <div>BloodType:{{user.bloodtype}}</div>
    <div>Hobby:{{user.hobby}}</div>
    <a href="#">More</a>
</div>

```

What i want to do is to hide 'bloodtype', 'hobby' field on initial load for all users and unhide individual user details when the 'More' link is clicked. How can i accomplish this?

I have tried the following but clicking 'More' link will unhide all users details

```
<div *ngFor='let user of users >
    <div>Name:{{user.name}}</div>
    <div>Age:{{user.age}}</div>
    <div [hidden]=isHidden>
      <div>BloodType:{{user.bloodtype}}</div>
      <div>Hobby:{{user.hobby}}</div>
    <div>
    <a href="#" (click)='isHidden=!isHidden'>More</a>
</div>

```