<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item" aria-current="page">Projects</li>
    </ol>
</nav>
<div class="list row">
    <div class="col-md-8">
        <div class="input-group mb-3">
        <input
            type="text"
            class="form-control"
            placeholder="Search"
            [(ngModel)]="title"
            name="search" 
            autocomplete="off"
        />
            <!-- (keyup.enter)="SearchTitle()"-->
            <!-- (click)="SearchTitle()" -->
        <div class="input-group-append">
            <button
            class="btn btn-primary"
            type="button"
            >Search
            </button>
        </div>
        </div>
        <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
            <ul fxLayout fxLayoutGap="15px" class="navigation-items">
                <div>
                <input class="btn btn-success" type="button" value="Add New project" routerLink="add-groupboil"/>
                </div>
            </ul>
        </div>
        
    </div>
</div>
<div class="content">
    <div fxLayout="row wrap">
      <div fxFlex="20%" *ngFor="let gb of grouboilerplates| filter:title">
        <mat-card class="example-card" routerLink="/groupboilerplates/{{gb.id}}/boilerplates">
            <mat-card-header>
                <div mat-card-avatar class="example-header-image"></div>
                <mat-card-title>{{gb.title_bgroup}}</mat-card-title>
                <mat-card-subtitle></mat-card-subtitle>
            </mat-card-header>
     
            <mat-card-content>
                <p>
                {{gb.description}}
                </p>
            </mat-card-content>
            <mat-card-actions>
                <button class="btn btn-info" mat-button>EDIT</button>
                <button class="btn btn-warning" (click)="deleteGroupBoilerplate(gb)" mat-button>DELETE</button>
            </mat-card-actions>
        </mat-card>
</div>
</div>
</div>