title: Angular event method getting called multiple times
body: <p>In my <code>app.component.ts</code> I am making an API call and fetching <code>userDetails</code>. I am then emitting this <code>userDetails</code>. I have subscribed to this <code>userDetails</code> in my <code>header</code> component. My header component uses <code>app-my-image-logo</code> component. On page refresh, API is called and userDetails are fetched. After that, event is emitted and therefore, <code>testnDisplay</code> method is called. But my problem is every few seconds, I get the following output on my console. </p>
  
  <pre><code>img   my-image-logo.component.ts:28
  name  my-image-logo.component.ts:28
  img   my-image-logo.component.ts:28
  name  my-image-logo.component.ts:28
  img   my-image-logo.component.ts:28
  name  my-image-logo.component.ts:28
  img   my-image-logo.component.ts:28
  name  my-image-logo.component.ts:28
  </code></pre>
  
  <p>So, this method is getting called multiple times after frequent intervals but it should have been called only once.</p>
  
  <p><strong>header.component.html</strong></p>
  
  <pre><code>&lt;app-my-image-logo &gt;&lt;/app-my-image-logo&gt;
  </code></pre>
  
  <p><strong>header.component.ts</strong></p>
  
  <pre><code>ngOnInit() {
          const self = this;
          this.userDetails = this.dataService.getUserDetails();
          this.dataService.userDetailsEvt.subscribe(
              function(data){
                  self.userDetails = data;
              }
          );
  
      }
  </code></pre>
  
  <p>This is <code>app-my-logo</code> component.</p>
  
  <p><strong>app-logo.component.html</strong></p>
  
  <pre><code>&lt;img #imgDiv  [hidden]="testnDisplay('img')" &gt;
  
  &lt;div [hidden]="testnDisplay('name')"
       &gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>app-logo.component.ts</strong></p>
  
  <pre><code>testnDisplay(type){
          console.log(type);
  }
  </code></pre>
  
  <p>This is my <code>dataService</code>:</p>
  
  <p><strong>data.service.ts</strong></p>
  
  <pre><code>setUserDetails(userDetails){
          this.userDetails = userDetails;
          this.userDetailsEvt.emit(this.userDetails);
      }
  
      getUserDetails(){
          return this.userDetails;
      }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>this.authService.httpPost("/auth/getUserDetails", payload).subscribe(
              function (data: any) {
                  self.dataService.setUserDetails(data);
              },
              function(error){
  
              }
          );
  </code></pre>