angular 2 - ngIf of component in seperated folders

Question

I'm learning angular and i want to create a page with a top navBar.

By pressing on a link on the navbar, I want the correspondent component will be shown.

for example, if i press on the navBar on "ShoppingList" i want that only the shopping list component that is already visible on the page to be shown. If i press on another link, i want that only the matching component be visible.

I have put each component in seperated folder inside the 'app' folder. My question is how can i use ngIf but with component that are in different folder and not all on the same component?

app.component.ts:

<navbarBlack></navbarBlack>
    <recipeList></recipeList>
    <recipe></recipe>
    <shoppingList></shoppingList>

navbar html:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
   <div class="navbar-header">
     <a class="navbar-brand" href="#">{{WebSiteName}}</a>
   </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">{{HomePage}}</a></li>
      <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{PageA}}
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">{{Page1A}}</a></li>
          <li><a href="#">{{Page2A}}</a></li>
          <li><a href="#">{{Page3A}}</a></li>
        </ul>
      </li>
      <li><a href="#" (click)="goRecipies()">{{PageB}}</a></li>
      <li><a href="#" (click)="goShopList()">{{PageC}}</a></li>
    </ul>
  </div>
</nav>

the (click) on the

turns a boolean to true when clicked.

Answer 1

You want to replace Angular Router's routing feature with *ngIf? that hides/displays components? I think thats a terrible idea, but is possible. If your structure is:

app
 navbar_component
 component_1
 component_2
 component_3

It means you want to show/hide sibling components of the navbar_component if link in navbar_component being clicked. So most straightforward way is emitting those events to parent (app) component which binds boolean properties to his children components. If values of those properties changes, Angular fires Change detection and rerenders the view.

navbar.html:

<a (click)="component1()">Comp1</a>

navbar.ts:

@Output
compt1: EventEmitter = new EventEmitter();

constructor(){}

component1(){
 this.comp1.emit();
}

app.component.html:

<navbar-component (compt1)="showComp1()"></navbar-component>
<component_1 [showMe]="showComp1"></component_1>

app.component.ts:

showComp1: boolean = false;
showComp2: boolean = false;
showComp3: boolean = false;

constructor() {}

showComp1() {
 this.showComp2 = false;
 this.showComp3 = false;
 this.showComp1 = true;
}

component_1.html:

<div *ngIf="showMe">
 Content
</div>

component_1.ts:

@Input showMe : boolean

And the same logic for all components :) As you see its a bit crazy. Better use Router

Answer 2

With the help of a friend i managed to solve my problam and get my project just how i wanted to.

this is what we came up with:

the two component that i want to toggle the visibility with ngIf i've placed the html tags of them inside the navbar.component.html:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#" (click)="showAll()">{{WebSiteName}}</a>
</div>
<ul class="nav navbar-nav">
  <li class="active"><a href="#" (click)="showAll()">{{HomePage}}</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{PageA}}
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">{{Page1A}}</a></li>
      <li><a href="#">{{Page2A}}</a></li>
      <li><a href="#">{{Page3A}}</a></li>
    </ul>
  </li>
  <li><a href="#" (click)="goRecipies()">{{PageB}}</a></li>
  <li><a href="#" (click)="goShopList()">{{PageC}}</a></li>
</ul>
</div>
</nav>

<recipeList *ngIf="toShopList"></recipeList>  <-- first component
<shoppingList *ngIf="toRecipies"></shoppingList>  <-- second conponent

And in the app.component.html i've placed only the navbar tag

And of course the i've imported the two component to the navbar ts file with the functions that go with the ngIf:

import { Component } from '@angular/core';
import { RecipeComponent } from '../recipe/recipe.component';
import { ShoppingListComponent } from '../shoppingList/shoppingList.component';
import { RecipeListComponent } from '../recipeList/recipeList.component';



@Component({
  selector: 'navbarBlack',
  templateUrl: './navbar.component.html'

})
export class NavbarComponent {
  WebSiteName = 'Recipe Book';
  HomePage = 'Home';
  PageA = 'Manage';
  Page1A = 'SubPage 1';
  Page2A = 'SubPage 2';
  Page3A = 'SubPage 3';
  PageB = 'Recipes';
  PageC = 'Shopping List';


  toRecipies:boolean = true;
  toShopList:boolean = true;

  goRecipies() {

    this.toRecipies = false;
    this.toShopList = true;
  }

  goShopList() {
    this.toShopList = false;
    this.toRecipies = true;
  }

  showAll(){
    this.toRecipies = true;
    this.toShopList = true;
  }
}