Angular4: passing view components using `data` properties
In my Angular (v4) app I am trying to create a breadcrumb module. I found this SO question helpful, assuming I am storing the summary information in a router property data
such as
{ path: '', component: HomeComponent, data: {breadcrumb: 'home'}}
But what I would like to do is store the component in the data property and then retrieve it and render it out. Allows me to interact with a breading module like this
{ path: '', component: HomeComponent, data: {breadcrumb: CustomViewComponent}}
Following Angular 's Dynamic Component Composer Guide and helpful blog post , I tried to make my render component to create a palette:
import { Component, Input, OnInit, AfterViewInit,
ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';
import { MainLogoComponent } from '../my-material/main-logo/main-logo.component';
@Component({
selector: 'app-breadcrumbs',
template: `<div #parent></div>`,
styleUrls: ['./breadcrumbs.component.scss']
})
export class BreadcrumbsComponent implements OnInit, AfterViewInit {
breadcrumbs: Array<any>;
@ViewChild('parent', {read: ViewContainerRef}) parent: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private router:Router, private route:ActivatedRoute) { }
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(event => { // note, we don't use event
this.breadcrumbs = [];
let currentRoute = this.route.root,
url = '';
do {
let childrenRoutes = currentRoute.children;
currentRoute = null;
childrenRoutes.forEach(route => {
if(route.outlet === 'primary') {
let routeSnapshot = route.snapshot;
url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
this.breadcrumbs.push({
label: route.snapshot.data.breadcrumb,
url: url });
currentRoute = route;
}
})
} while(currentRoute);
})
}
ngAfterViewInit() {
const logoComponent = this.componentFactoryResolver
.resolveComponentFactory(this.breadcrumbs[0]); // at the moment just using breadcrumbs[0] for simplicity
this.parent.createComponent(logoComponent);
}
}
Unfortunately it looks like the route data property cannot / will not store the component. When entering the debug console, the data property is saved as{data: {breadcrumb: }}
If anyone knows how to make this code work, or has a suggestion for a better way to achieve my goal of making a breading component that consumes other presentation components, I would greatly appreciate it !!
PS: If I missed the property data
and just manually ask the breadcrumb component to be added MainLogoComponent
to the page like this:
ngAfterViewInit() {
const logoComponent = this.componentFactoryResolver.resolveComponentFactory(MainLogoComponent);
this.parent.createComponent(logoComponent);
}
Works
And, for completeness, the code for the associated route.
const routes: Routes = [
{
path: 'calendar',
data: {
breadcrumb: MainLogoComponent
},
canActivate: [ AuthGuard ],
children: [
{
path: '',
component: CalendarComponent
}
]
}
];
UPDATE
Here is the corresponding NgModule:
@NgModule({
imports: [
CommonModule,
MyMaterialModule
],
exports: [
BreadcrumbsComponent
],
entryComponents: [BreadcrumbsComponent, MainLogoComponent],
declarations: [BreadcrumbsComponent] // MainLogoComponent is declared in MyMaterialModule
})
export class BreadcrumbsModule { }
source to share
So, I got the job because I wanted to make it work (many thanks @yurzui for taking the time to create plnkr, showing that he must work in the concept !!!!! It REALLY REALLY helped and I'm incredibly kind!). I'm still not entirely sure where I am doing wrong, but I created a new application to make the breading module, got it working, and then ported it to my real application. One of the likely problems I have found is that it ng serve
seems to be accidentally missing recompiled files that I have changed (or perhaps my browser is caching errors). Several times now the compiler is spitting out errors regarding the variables that I have removed and when I restartng serve
(without changing anything), mistakes go away. Warning for other people troubleshooting issues (although it may be isolated from my dev installation).
Here is the final, working breading code (note that if you are trying to replicate my method, also read the info / links in the original question).
import { Component, AfterViewInit, ViewChild, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';
import { BreadDividerComponent } from './bread-divider/bread-divider.component';
@Component({
selector: 'app-breadcrumbs',
template: `
<div #breadContainer></div>
<div #iconContainer></div>
<div #lastBreadContainer></div>`
})
export class BreadcrumbsComponent implements AfterViewInit {
breadcrumbs: Array<any>;
storedBreadcrumbs: Array<Component>;
@ViewChild('breadContainer', {read: ViewContainerRef}) breadContainer: ViewContainerRef;
@ViewChild('iconContainer', {read: ViewContainerRef}) iconContainer: ViewContainerRef;
@ViewChild('lastBreadContainer', {read: ViewContainerRef}) lastBreadContainer: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private router: Router) { }
ngAfterViewInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(event => {
// Reset variables and clear breadcrumb component on view change
this.breadcrumbs = [];
this.storedBreadcrumbs = [];
this.breadContainer.clear();
this.iconContainer.clear();
this.lastBreadContainer.clear();
// Drill down through child routes
let currentRoute = this.router.routerState.snapshot.root.firstChild;
if (currentRoute) {
do {
this.breadcrumbs.push(currentRoute.data.breadcrumb);
currentRoute = currentRoute.firstChild;
} while (currentRoute)
}
// Because each route home path is actually itself a child route
// e.g. { path: 'two', children: [ { path: '', component: ... } ] }
if (this.breadcrumbs.length === 2
&& this.breadcrumbs[0] === this.breadcrumbs[1]) {
this.breadcrumbs = [this.breadcrumbs[0]];
}
this.breadcrumbs.forEach((breadcrumb, index, array) => {
if (array.length > 1) {
if (index < array.length - 1) {
const breadFactory = this.componentFactoryResolver
.resolveComponentFactory(breadcrumb);
this.storedBreadcrumbs.push(this.breadContainer.createComponent(breadFactory));
const iconFactory = this.componentFactoryResolver
.resolveComponentFactory(BreadDividerComponent);
this.storedBreadcrumbs.push(this.iconContainer.createComponent(iconFactory));
} else {
const breadFactory = this.componentFactoryResolver
.resolveComponentFactory(breadcrumb);
this.storedBreadcrumbs.push(this.lastBreadContainer.createComponent(breadFactory));
}
} else {
const breadFactory = this.componentFactoryResolver
.resolveComponentFactory(breadcrumb);
this.storedBreadcrumbs.push(this.lastBreadContainer.createComponent(breadFactory));
}
});
});
}
}
Breadcrumb view components are passed through a router data property, for example:
const routes: Routes = [
{
path: 'calendar',
data: {
breadcrumb: CalendarBreadcrumbComponent,
menu: CalendarMenuComponent
},
canActivate: [ AuthGuard ],
children: [
{
path: 'events',
data: {
breadcrumb: EventsBreadcrumbComponent
},
component: EventsComponent
},
{
path: '',
pathMatch: 'full',
redirectTo: 'events'
}
]
}
];
I also use this strategy to create my application menu. Here's an example of a palette viewer component
import { Component, HostBinding } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-calendar-breadcrumb',
templateUrl: './calendar-breadcrumb.component.html',
styleUrls: ['./calendar-breadcrumb.component.scss']
})
export class CalendarBreadcrumbComponent {
// Modify this components parent element so that it is displayed with flexbox
@HostBinding('attr.style') style = this.sanitizer
.bypassSecurityTrustStyle('display: flex; flex-direction: row;');
constructor(private sanitizer: DomSanitizer) {}
}
And the linked view file (which I understand doesn't really need its own file ...)
<md-icon>event</md-icon><h3>Calendar</h3>
source to share