title: How to share variables between components (Angular)?
body: <p>I have two components and I am trying to export data (two variables), to the details component from login component. I have routing enabled. I does not seem to work. Where do I bind the variable? I want to show a details component on a new link where I can use these two variables.</p>
  <p>login.component.ts</p>
  <pre><code>export class LoginComponent implements OnInit {
    imgURL = &quot;link&quot;;
    email = &quot;email&quot;;
  }
  </code></pre>
  <p>details.component.ts</p>
  <pre><code>export class DetailsComponent implements OnInit {
    
    @Input() imgURL;
    @Input() email;
  
  }
  </code></pre>
  <p>details.component.html</p>
  <pre><code>&lt;app-details [imgURL]=&quot;imgURL&quot;&gt;
      {{imgURL}}
  
  &lt;/app-details&gt;
  </code></pre>
  <p>login.component.html</p>
  <pre><code>&lt;div class=&quot;container mt-5&quot;&gt;
      &lt;h2&gt;Google Login&lt;/h2&gt;
      &lt;div class=&quot;row mt-5&quot;&gt;
        &lt;div class=&quot;col-md-4 mt-2 m-auto &quot;&gt;
              &lt;button class=&quot;login-Btn&quot; #loginRef&gt;
                Login with Google&lt;img class=&quot;social-btn-icon&quot; alt=&quot;Login with Google&quot; src=&quot;https://hrcdn.net/fcore/assets/google-colored-20b8216731.svg&quot;&gt;
              &lt;/button&gt;
              &lt;a routerLink=&quot;/details&quot; routerLinkActive=&quot;active&quot;&gt;Details&lt;/a&gt;
        &lt;/div&gt;   
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>