Added styles & design for breadcrumb component

This commit is contained in:
Eraldo Hasanaj
2019-01-21 17:51:19 +01:00
parent 1502f547d6
commit 0c90cd629e
4 changed files with 36 additions and 5 deletions

View File

@@ -1,3 +1,5 @@
<p>
breadcrumbs works!
</p>
<div class="breadacrumb-grid pt-5">
<div class="align-center" *ngFor="let breadcrumb of breadcrumbs">
<span class="breadcrumb" routerLink="{{breadcrumb.path}}">{{breadcrumb.name}}</span>
</div>
</div>

View File

@@ -0,0 +1,11 @@
@import "../../../assets/scss/variables";
.breadacrumb-grid {
display: grid;
grid-template-columns: auto;
}
.breadcrumb {
color: $color-active;
outline: none;
}

View File

@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { AppState } from 'src/app/app.state';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
@Component({
selector: 'app-breadcrumbs',
@@ -7,7 +11,14 @@ import { Component, OnInit } from '@angular/core';
})
export class BreadcrumbsComponent implements OnInit {
constructor() { }
breadcrumbsObs: Observable<Breadcrumb[]>;
breadcrumbs: Breadcrumb[];
constructor(private store: Store<AppState>) {
this.breadcrumbsObs = store.select('breadcrumbs');
this.breadcrumbsObs.subscribe(
(data: Breadcrumb[]) => this.breadcrumbs = data
);
}
ngOnInit() {
}

View File

@@ -1,7 +1,14 @@
import { Breadcrumb } from '../models/breadcrumb.model';
import { ADD_BREADCRUMB } from '../actions/breadcrumb.actions';
export function breadcrumbReducer(breadcrumbs: Breadcrumb[] = [], action: any) {
const initialBreadcrumbs = [
<Breadcrumb>{
name: 'Artikelsuche',
path: 'article-search'
}
];
export function breadcrumbReducer(breadcrumbs: Breadcrumb[] = initialBreadcrumbs, action: any) {
switch (action.type) {
case ADD_BREADCRUMB:
return [...breadcrumbs, action.payload];