title: component replacement using tabview
body: <p>I'm using angular 7. primeng tabview tabs click on the component I want to change. but I couldn't. Could you help?</p>
  
  <p>I have 3 components. first, a component will run as default. Then I want to change the components when I click the panel inside the tabview.</p>
  
  <p>I'm trying to run functions with onchange on typescript, but functions are not called.</p>
  
  <p>is there any other way to run functions?</p>
  
  <p>Thank You.</p>
  
  <p>.ts code:</p>
  
  <pre><code>import { Component, OnInit} from '@angular/core';
  
  
  @Component({
      selector: 'jhi-component-example',
      templateUrl: './component-example.component.html',
      styleUrls: ['./component-example.scss']
  })
  export class ComponentExample implements OnInit {
      id: number;
      constructor() { }
  
      ngOnInit() {
          this.id = 1;
      }
      func1() {
          this.id = 1;
      }
      func2() {
          this.id = 2;
      }
      func3() {
          this.id = 3;
      }
  
  }
  
  
  </code></pre>
  
  <p>.html code:</p>
  
  <pre><code>
          &lt;div class="global-div"&gt;
              &lt;div class="div1-example"&gt;
  
                  &lt;p-tabView &gt;
                      &lt;p-tabPanel (onChange)="func1()" header="Component1" &gt;
  
                      &lt;/p-tabPanel&gt;
  
                      &lt;p-tabPanel (onChange)="func2()" header="Component2"&gt;
  
                      &lt;/p-tabPanel&gt;
                      &lt;p-tabPanel (onChange)="func3()" header="Component3"&gt;
  
                      &lt;/p-tabPanel&gt;
  
                  &lt;/p-tabView&gt;
              &lt;/div&gt;
  
              &lt;div class="div2-example"&gt;
  
                  &lt;p *ngIf="id==1"&gt;
                      &lt;jhi-component1&gt;&lt;/jhi-component1&gt;
                  &lt;/p&gt;
                  &lt;p *ngIf="id==2"&gt;
                      &lt;jhi-component2&gt;&lt;/jhi-component2&gt;
                  &lt;/p&gt;
                  &lt;p *ngIf="id==3"&gt;
                      &lt;jhi-component3&gt;&lt;/jhi-component3&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>