title: How can I display additional data when clicking on list item?
body: <p>I managed to display some mock data (name, email and username) but as you can see I wanted to display more detailed information (city,country,...) on a User by clicking on a row </p>
  
  <p>I am still new to angular and still have problems using the correct syntax. 
  I am stuck searching the web for hours although I know it should be quite easy... </p>
  
  <p>I thank you all in advance   </p>
  
  <p>This is what I have so far :<br>
  <a href="https://i.stack.imgur.com/WD7gv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WD7gv.png" alt="https://i.stack.imgur.com/WD7gv.png"></a></p>
  
  <p>(this is my first question on stack overflow, I am sorry for mistakes :P )</p>
  
  <pre><code>export class ScrollComponent {
    users;
    constructor() { 
      this.users = Array(100)
      .fill(1)
      .map(_ =&gt; {
        return {
          name: faker.name.findName(),
          email: faker.internet.email(),
          exMail: faker.internet.exampleEmail(),
          userName: faker.internet.userName(),
          url: faker.internet.url(),
          ip: faker.internet.ip(),
          mac: faker.internet.mac(),
          pass: faker.internet.password(),
          address: faker.address.streetAddress(), 
          zip: faker.address.zipCode(),
          city: faker.address.city(),
          country: faker.address.county(),
          iban: faker.finance.iban(),
          bic: faker.finance.bic(),
          bitcoin: faker.finance.bitcoinAddress()
  
        };
      });
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;cdk-virtual-scroll-viewport itemSize="100"&gt;
  
  
    &lt;li *cdkVirtualFor="let u of users" class="animated slideInUp"&gt;
      &lt;h2&gt;{{ u.name }} &lt;/h2&gt;
      &lt;p&gt; {{ u.email }} {{ u.userName }} &lt;/p&gt;
    &lt;/li&gt;
  
  
  &lt;/cdk-virtual-scroll-viewport&gt;
  </code></pre>