title: How to have multiple views in one component in angular2
body: <p>I have a component that represents navigation bar <strong><code>full-layout.component.ts</code></strong>. The items in the navigation bar are received from a server (but for the purpose of this question, I'll hard-code).</p>
  
  <p>For each of the item there is a <code>routerLink</code> associated with it, so that when a user clicks on any of the items, it is directed to a component called <code>department.component.ts</code>. In this component, there is a <code>DepartmentService</code> provided which makes <code>http get()</code> request and returns an array of strings.</p>
  
  <p>Currently, when I'm in <strong><code>full-layout.component.ts</code></strong> and click on any item, it directs me there perfectly and shows correct data. But when I try to click another item from there, it doesn't do anything, and I'm not sure why.</p>
  
  <p><strong>NB:</strong> All of the items in the navigation bar shows list of departments from the server.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>The ul consist of my items</strong></p>
  
  <p><strong><code>full-layout.component.html</code></strong></p>
  
  <pre><code>&lt;ul class="nav-dropdown-items"&gt;
    &lt;li class="nav-item" *ngFor="let item of dropDownItems"&gt;
      &lt;a #clicked class="nav-link" routerLinkActive="active" [routerLink]="[item.routerLink]" (click)="send(item.name)" &gt;
        &lt;i class="icon-puzzle"&gt;&lt;/i&gt;{{item.name}}
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong><code>full-layout.component.ts</code></strong></p>
  
  <pre><code>@Component({
    selector: 'app-dashboard',
    templateUrl: './full-layout.component.html',
    providers: [SharedService]
  })
  export class FullLayoutComponent implements OnInit {
    service;
  
    constructor(service: SharedService) { this.service = service; }
    ngOnInit() {}
  
    send(str) { this.service.saveData(str); }
  
    dropDownItems = [{
        routerLink: '/components/departments',
        name: 'Artshums'
      },
      {
        routerLink: '/components/departments',
        name: 'Dentistry'
      },
      {
        routerLink: '/components/departments',
        name: 'Law'
      },
      {
        routerLink: '/components/departments',
        name: 'IOPPN'
      },
      {
        routerLink: '/components/departments',
        name: 'LSM'
      },
      {
        routerLink: '/components/departments',
        name: 'NMS'
      },
      {
        routerLink: '/components/departments',
        name: 'Nursing'
      },
      {
        routerLink: '/components/departments',
        name: 'SSPP'
      },
      {
        routerLink: '/components/departments',
        name: 'Health'
      }
    ];
  }
  </code></pre>
  
  <p><strong><code>departments.component.ts</code></strong></p>
  
  <pre><code>@Component({
    selector: 'app-departments',
    templateUrl: './departments.component.html',
    providers: [DepartmentsService]
  })
  export class DepartmentsComponent implements OnInit {
    router; service; myName; _faculty: Faculty;
  
    constructor(service: SharedService, private departmentsService: DepartmentsService) {
      this.service = service;
      this.myName = service.getData();
    }
  
    ngOnInit() {
      console.log(this.myName);
      this.departmentsService.getData(this.myName).then(
        (faculties: Faculty) =&gt; this._faculty = faculties
      );
    }
  }
  </code></pre>
  
  <p><strong><code>departments.service.ts</code></strong></p>
  
  <pre><code>@Injectable()
  export class DepartmentsService {
    constructor(
      private http: Http
    ) {}
  
    getData(facultyName): Promise &lt; any &gt; {
      return this.http.get('/admin/faculty/' + facultyName).toPromise().then(response =&gt; response.json()).catch(DepartmentsService.handleError);
    }
  }
  </code></pre>
  
  <p><strong><code>departments.component.html</code></strong></p>
  
  <pre><code>&lt;ul class="departments-box" *ngFor="let fac of _faculty"&gt;
    &lt;li *ngFor="let dep of fac.Departments"&gt;
      {{dep}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h1>Question</h1>
  
  <p>How Can I achieve that when the user is in any of the item, it should show the right info and update view?</p>