Angular2: Component doesn't update
<p>I am building an angular application about some projects I did. I have a detail page that shows the detail of a project.</p>

<p><strong>The problem:</strong>
When I go to the project detail page, everything is correct.
But when I <strong>switch the project variable</strong> (by using the navigation I have on the page) the dependency component doesn't update, they don't get the correct project ID.</p>

<p><a href="https://i.stack.imgur.com/hs78L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hs78L.png" alt="Example image"></a></p>

<p><a href="https://i.stack.imgur.com/ozdRn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ozdRn.png" alt="Project structure"></a></p>

<p><strong>The projectdetail.html page that contains all the components:</strong></p>

<pre><code>&lt;div class="container-content" *ngIf="project"&gt;
    &lt;div class="projectdetail"&gt;
        &lt;div class="thumbnail header"&gt;
            &lt;img [src]="project.img" [alt]="project.name" class="projectImage" /&gt;
            &lt;div&gt;
                &lt;h2&gt;{{project.name}}&lt;/h2&gt;
                &lt;!--The programming component that you can see in the image--&gt;
                &lt;programming-languages [ids]="project.languages"&gt;&lt;/programming-languages&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;carousel interval="5000" noWrap="false"&gt;
                &lt;slide *ngFor="let slidez of slides; let index=index"&gt;
                    &lt;img [src]="slidez.image" class="carouselimg" /&gt;
                    &lt;div class="carousel-caption"&gt;
                        &lt;h4&gt;Slide {{slidez.id}}&lt;/h4&gt;
                        &lt;p&gt;{{slidez.text}}&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/slide&gt;
             &lt;/carousel&gt;
        &lt;/div&gt;
        &lt;div class="thumbnail detail"&gt;
            &lt;p&gt;{{project.description}}&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="projects hidden-mm hidden-sm hidden-xs"&gt;
        &lt;projectsidelist [notShowId]="selectedProjectId"&gt;&lt;/projectsidelist&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>The language component code:</strong></p>

<pre><code>import { Component, Input, OnInit } from '@angular/core';

import { ProgrammingLanguagesService } from '../services/programminglanguages.service';
import { ProgrammingLanguage } from '../models/programmingLanguage';

@Component({
    selector: 'programming-languages',
    templateUrl: 'app/components/programminglanguages.component.html',
    providers: [ProgrammingLanguagesService]  
})
export class ProgrammingLanguages implements OnInit {
    @Input()
    ids: number[];
    programmingLanguages: ProgrammingLanguage[];
    constructor(private programmingLanguagesService: ProgrammingLanguagesService) {

    }

    getProgrammingLanguages() {
        this.programmingLanguagesService.getProgrammingLanguages().subscribe(programmingLanguages =&gt; {
            var result: ProgrammingLanguage[] = [];
            this.ids.forEach((key: number) =&gt; {
                programmingLanguages.forEach((programmingLanguage: ProgrammingLanguage) =&gt; {
                    if (programmingLanguage.id == key)
                    {
                        result.push(programmingLanguage);
                    }
                })
            })       
            this.programmingLanguages = result;
        });
    }

    ngOnInit() {
        setTimeout(() =&gt; this.getProgrammingLanguages(), 0);
    }
}
</code></pre>

<p><strong>The programming language html:</strong></p>

<pre><code>&lt;div class="languageoverlay"&gt;
    &lt;span *ngFor="let programmingLanguage of programmingLanguages; let lastElement = last"&gt;
        &lt;img [src]="programmingLanguage.img" [alt]="programmingLanguage.name" /&gt;
        &lt;span [hidden]="lastElement" class="languageseperator"&gt;+&lt;/span&gt;
    &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p><strong>If you need extra code please ask or refer to the github</strong></p>

<p><em>Github containing <a href="https://github.com/Ghosttje/Portfolio-TestProject" rel="nofollow noreferrer">All the code</a></em></p>

<p><em>Explanation when you run the github: go to <code>http://localhost:3000/#/projectdetail/5</code> and click another project on the left bar. Then you see the issue!</em></p>