Change form depending on radio button - Angular 2+

Question

I have 3 radio Buttons, when I click on each one should appear a different fomulário. I looked for some examples, but what I found are only two options.

Follow the code I have at the moment

<div class="ui-g-12 ui-md-12 ui-lg-12 ui-fluid espacamento-baixo">
    <div class="ui-g-3"><p-radioButton value="imagem" label="Imagem" inputId="imagem"></p-radioButton></div>
    <div class="ui-g-3"><p-radioButton value="video" label="Video" inputId="video"></p-radioButton></div>
    <div class="ui-g-3"><p-radioButton value="link" label="Link" inputId="link"></p-radioButton></div>
    <div class="ui-g-3"><p-radioButton value="wistia"label="Wistia" inputId="wistia"></p-radioButton></div>    
</div>

He was testing with Ivs

<div class="toggle-panel" *ngIf="show" [hidden]="hidden" [style.visibility] = "visibility">
    Teste
</div>

Those are the functions I was trying to

show =  true;
  hidden = false;
  visibility = 'visible';

  toggleShow(){
    this.show = !this.show;
  }

  toggleHidden(){
    this.hidden = !this.hidden;
  }

  toggleVisible(){
    this.visibility = this.visibility == 'visible' ? 'hidden' : 'visible';
  }

Answer 1

Well I didn’t understand much of your code, and I did it in a way that I thought (I don’t know if it’s the best way and best practice to do) but leave here an example for you:

used inputtype radio even taking your values in a variable that I created, after which I only valid which div will appear as the input selected:

Take a look at an example I made: https://stackblitz.com/edit/angular-sa89yk

export class NomeDaSuaClass  {

  radioForm;

}

HTML

<div class="ui-g-12 ui-md-12 ui-lg-12 ui-fluid espacamento-baixo">
    <div class="ui-g-3">
      <label for="imagem">imagem</label>
      <input name="form" [(ngModel)]="radioForm" type="radio" value="imagem" label="Imagem" id="imagem">
    </div>

    <div class="ui-g-3">
       <label for="video">video</label>
      <input name="form" [(ngModel)]="radioForm" type="radio" value="video" label="Video" id="video">
    </div>

    <div class="ui-g-3">
      <label for="link">link</label>
      <input name="form" [(ngModel)]="radioForm" type="radio" value="link" label="Link" id="link">
    </div>

    <div class="ui-g-3">
      <label for="wistia">Wistia</label>
      <input name="form" [(ngModel)]="radioForm" type="radio" value="wistia" label="Wistia" id="wistia">
    </div>    
</div>

  <div *ngIf="radioForm == 'wistia'">
    <p> aqui seu formulario para {{ radioForm }}</p>
  </div>

   <div *ngIf="radioForm == 'imagem'">
    <p> aqui seu formulario para {{ radioForm }}</p>
  </div>

   <div *ngIf="radioForm == 'link'">
    <p> aqui seu formulario para {{ radioForm }}</p>
  </div>

   <div *ngIf="radioForm == 'video'">
    <p> aqui seu formulario para {{ radioForm }}</p>
  </div>