title: Property change caused by route change won't update view - *ngIf
body: <p>So I have a kind of custom select bar with <code>products-header__select</code> expanding the list on click. To do so I created the property <code>expanded</code> which is supposed to describe its current state. With <code>*ngIf</code> I either display it or not.</p>
  
  <p>It works fine clicking the <code>products-header__select</code>. But a click on one of the expanded list's items changes the route, the path and some other element changes, but the <code>products-header__select</code> remains visible. </p>
  
  <p>All good, but I want to collapse the list on route change - my approach was to listen to router events and then run <code>expanded = false</code> when the navigation has ended. - But somehow the view won't update and the list remains expanded, even though running <code>console.log(this.expanded)</code> inside of the router event returns <code>false</code>. Why won't it update then? </p>
  
  <p>View:</p>
  
  <pre><code>&lt;div class="products-header__select" (click)="expanded = !expanded"&gt;
    &lt;ul&gt;
      &lt;li class="basic-text__small custom-select"&gt;{{mobileCategories ? (mobileCategories[0].name | transformAllProducts) : ''}}&lt;/li&gt;
      &lt;div class="select-options" *ngIf="expanded"&gt;
        &lt;li class="basic-text__small" *ngFor="let category of mobileCategories.slice(1, mobileCategories.length); let i = index" routerLink="/products/{{category.name.toLowerCase()}}"&gt;
          {{category?.name | transformAllProducts}}
        &lt;/li&gt;
      &lt;/div&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>import {Component, Input, OnInit} from '@angular/core';
  import {NavigationEnd, Router, RouterEvent} from '@angular/router';
  
  @Component({
    selector: 'app-products-header',
    templateUrl: './products-header.component.html',
    styleUrls: ['./products-header.component.scss']
  })
  export class ProductsHeaderComponent implements OnInit {
  
    expanded = false;
    url: string;
  
    $categories;
    @Input() set categories(value) {
      if (value) {
        this.$categories = value;
        this.createArrayForMobile();
        this.getActiveRoute();
      }
    }
  
    mobileCategories: any[];
  
    constructor(private router: Router) {
      router.events.subscribe((event: RouterEvent) =&gt; {
        if (event instanceof NavigationEnd) {
          this.expanded = false;
          this.url = event.url;
          this.getActiveRoute();
        }
      });
    }
  
    ngOnInit(): void {
    }
  
    getActiveRoute() {
      if (!this.mobileCategories) { return; }
      const decodedUrl = decodeURI(this.url);
      const index = this.mobileCategories.findIndex(item =&gt; decodedUrl.includes(item.name.toLowerCase()));
      const obj = this.mobileCategories[index];
      this.mobileCategories.splice(index, 1);
      this.mobileCategories.unshift(obj);
    }
  
    createArrayForMobile() {
      this.mobileCategories = [...this.$categories, {name: 'all'}];
    }
  
  
  }
  </code></pre>
  
  <p>That's how I use it:</p>
  
  <pre><code>&lt;app-products-header [categories]="categories"&gt;&lt;/app-products-header&gt;
  </code></pre>