title: How to make breadcrumb on Angular 6
body: <p>I try to make breadcrumb with Angular 6. Texts work but links doesn't work correctly. </p>
  
  <p>I want to do this.</p>
  
  <p><strong>Home > Dashboard > Statistical</strong> ( It Works.)</p>
  
  <p>Home -> <strong>xxx.com</strong> (It works.)</p>
  
  <p>Dashborad -> <strong>xxx.com/dashboard</strong> (It works.)</p>
  
  <p>Statistical -> <strong>xxx.com/statistical</strong> (It doesn't work.)</p>
  
  <p>So, if it is subcomponent links don't work.</p>
  
  <p>It needs to be <strong>xxx.com/dashboard/statistical</strong> (Correct)</p>
  
  <p>How can i do this ?</p>
  
  <p><strong>breadcrumb.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Location } from '@angular/common';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-breadcrumb',
    templateUrl: './breadcrumb.component.html',
    styleUrls: ['./breadcrumb.component.scss']
  })
  export class BreadcrumbComponent implements OnInit {
    route: string;
    breadcrumbList: Array&lt;any&gt;;
    routeLinks: number;
    count: number;
  
    constructor(location: Location, router: Router) {
      router.events.subscribe((val) =&gt; {
        if (location.path() !== '') {
          this.route = location.path();
          this.breadcrumbList = this.route.split('/');
          this.count = this.breadcrumbList.length;
        } else {
          this.route = 'Home';
        }
      });
    }
  
    ngOnInit() {}
  }
  </code></pre>
  
  <p><strong>breadcrumb.component.html</strong></p>
  
  <pre><code>&lt;nav aria-label="breadcrumb"&gt;
    &lt;ol class="breadcrumb"&gt;
      &lt;ng-container *ngIf="count == null"&gt;
        &lt;li class="breadcrumb-item"&gt;&lt;i class="material-icons"&gt;home&lt;/i&gt;&lt;/li&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container *ngIf="count != null"&gt;
        &lt;li class="breadcrumb-item"&gt;&lt;a href="javascript:void(0)" [routerLink]=""&gt;&lt;i class="material-icons"&gt;home&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container *ngFor="let breadLink of breadcrumbList"&gt;
          &lt;li class="breadcrumb-item"&gt;&lt;a href="javascript:void(0)" [routerLink]="breadcrumbList[2]"&gt;{{breadLink}}&lt;/a&gt;&lt;/li&gt;
      &lt;/ng-container&gt;
    &lt;/ol&gt;
  &lt;/nav&gt;
  </code></pre>