title: Using ngIf in Ionic html file to display different cards based on the URL
body: <p>I started my Ionic project off of the ionic sidemenu template. With this template, a hamburger menu appears, and clicking the different options changes the endpoints/URL on a local server. I'm trying to change what is displayed on the screen based on the current URL, but it seems like if I continue switching URL's, the old content never disappears, and it will continuously display more and more content. I was wondering if there was a way to hide/remove this content unless you were on that screen, or if there was a way to register the click events from a hamburger menu to avoid using the URL entirely.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;ion-card-title id=&quot;collegeCardHome&quot; *ngIf=&quot;docURL == 'http://localhost:8100/folder/Home' &quot;&gt;
    {{collegeInfoArray2[0].name}}
  &lt;/ion-card-title&gt;
  &lt;ion-card-title id=&quot;collegeCardLikes&quot; *ngIf=&quot;docURL == 'http://localhost:8100/folder/Favorites'&quot;&gt;
    {{likedCollegesArray[0].name}}
  &lt;/ion-card-title&gt;
  &lt;ion-card-title id=&quot;collegeCardDislikes&quot;*ngIf=&quot;docURL == 'http://localhost:8100/folder/Dislikes'&quot;&gt;
    {{dislikedCollegesArray[0].name}}
  &lt;/ion-card-title&gt;
  </code></pre>
  <p>Thank you!</p>
  <p>edit - code for getting URL is below inside of my .ts file!</p>
  <pre class="lang-js prettyprint-override"><code>public docURL = document.URL;
  </code></pre>
  <p>edit 2 - added code from my TS file</p>
  <pre class="lang-js prettyprint-override"><code>export class FolderPage implements OnChanges, OnInit {
  
    public folder: string;
    
    public collegeInfoArray2 = [
      {
        name : 'Name1',
        size : 'Size1'
      },
      {
        name : 'Name2',
        size : 'Size2' 
      },
      {
        name : 'Name3',
        size : 'Size3'
      }
    ]
    public sizeOfCollegeInfoArray = this.collegeInfoArray2.length;
  
    public likedCollegesArray = [];
    public dislikedCollegesArray = [];
  
    public link:HTMLElement = document.getElementById(&quot;testingHome&quot;);
  
    constructor(private activatedRoute: ActivatedRoute) { }
    public docURL;
  
    ngOnChanges() {
      this.docURL  = document.URL;
    }
  
    ngOnInit() {
      this.folder = this.activatedRoute.snapshot.paramMap.get('id');
      //this.link.className = &quot;showItem&quot;;
    }
  
    likeFirst() {
      if (this.sizeOfCollegeInfoArray &gt; 0) {
        this.likedCollegesArray.push(this.collegeInfoArray2[0]);
        this.collegeInfoArray2.splice(0,1);
        console.log(this.likedCollegesArray[0].name);
        this.sizeOfCollegeInfoArray--;
      }
    }
  
    dislikeFirst() {
      if (this.sizeOfCollegeInfoArray &gt; 0) {
        this.dislikedCollegesArray.push(this.collegeInfoArray2[0]);
        this.collegeInfoArray2.splice(0,1);
        console.log(this.dislikedCollegesArray[0].name);
        console.log(this.dislikedCollegesArray[0].size);
        this.sizeOfCollegeInfoArray--;
      }
    }
  
  }
  </code></pre>