Alternative Way of comparing multiple variable's to multiple variables

Hi guys Im very very new To Angular/Typescript Im teaching my self section by section by just messing around and figuring things out.

Currently im just doing loop’s and outputs so I decided to write a Randomizer for a Moba

Its. 5 Arrays then I select a Random item from each Check that they dont match and output

But I just have to think theres a way to improve on this, Note: I will be expanding to classes and 1 list where i’ll pull item’s based on a Role: ID but for the moment I need to get arround the if’s because its making the values blank when it fails which is fine, but I feel like this can be avoided with an alternative to my way of doing it.

Would appreciate any suggestions or alternative’s

Learning Material Welcomed

 constructor() {
   
  }
  midhero;
  tophero;
  botHero;
  hardShero;
  softShero;
  ngOnInit(): void {
   this.createHeroes();
  }

  createHeroes(): void{
    var topheroz = [
      "Mars", "Void Spirit" ,"Pango", "Brisle", "Axe", "Ogre"
    ];
    var midheroz = [
      "OD", "Void Spirit" ,"SkyWrath", "TA", "Morph"
    ];
    var botheroz = [
      "AM", "WK" , "Ursa" , "Morph" , "Brisle"
    ];
    var hardSupz = [
      "Dazzle", "Winter Wyvern" , "Ogre" , "Crystal Maidan" , "Jakiro"
    ];
    var softSupz = [
      "Dazzle", "Winter Wyvern" , "Ogre" , "Crystal Maidan" , "Jakiro"
    ];
    var miditem = midheroz[Math.floor(Math.random() * midheroz.length)];
    var topitem = topheroz[Math.floor(Math.random() * topheroz.length)];
    var botitem = botheroz[Math.floor(Math.random() * botheroz.length)];
    var harditem = hardSupz[Math.floor(Math.random() * hardSupz.length)];
    var softitem = softSupz[Math.floor(Math.random() * softSupz.length)];
    
    var midfine;
    var topfine;
    var botfine;
    var hardfine;
    var softfine;
    
    if(topitem == miditem || topitem == botitem || topitem == harditem || topitem == softitem){
      var topitem = topheroz[Math.floor(Math.random() * topheroz.length)];
    }
    else{
      topfine = true;
    }
    if(miditem == topitem || miditem == botitem || miditem == harditem || miditem == softitem){
      var miditem = midheroz[Math.floor(Math.random() * midheroz.length)];
    }
    else{
      midfine = true;
    }
    if(botitem == topitem || botitem == miditem || botitem == harditem || botitem == softitem ){
      var miditem = botheroz[Math.floor(Math.random() * botheroz.length)];
    }
    else{
      botfine = true;
    }
    if(softitem == topitem || softitem == miditem || softitem == botitem || softitem == harditem){
      var miditem = botheroz[Math.floor(Math.random() * botheroz.length)];
    }
    else{
      softfine = true;
    }
    if(harditem == topitem || harditem == miditem || harditem == botitem || harditem == softitem){
      var miditem = botheroz[Math.floor(Math.random() * botheroz.length)];
    }
    else{
      hardfine = true;
    }
    if(midfine && topfine && botfine && softfine && hardfine){
      this.midhero = miditem;
      this.tophero = topitem;
      this.botHero = botitem;
      this.hardShero = harditem;
      this.softShero = softitem;
    }
    else{
      this.createHeroes();
    }
  }

<section >
    <div>
        <p style="color:blue;">Mid:{{midhero}}</p>
        <p style="color:red;">Top:{{tophero}}</p>
        <p style="color:green;">Bot:{{botHero}}</p>
        <p style="color:purple;">Soft Support:{{softShero}}</p>
        <p style="color:orange;">Hard Support:{{hardShero}}</p>
        
    </div>

</section>
```