Breadcrumb Component doesn't support dynamic update of Breadcrumb Items

Detailed description

Change breadcrumb.stories.ts to the following code:

import { storiesOf, moduleMetadata } from "@storybook/angular";
import { withNotes } from "@storybook/addon-notes";
import { action } from "@storybook/addon-actions";
import { withKnobs, boolean, number } from "@storybook/addon-knobs/angular";

import { BreadcrumbModule, DialogModule } from "../";
import { range } from "../common/utils";

const MAXIMUM_ITEM_COUNT = 50;

storiesOf("Breadcrumb", module)
	.addDecorator(
		moduleMetadata({
			imports: [BreadcrumbModule, DialogModule]
		})
	)
	.addDecorator(withKnobs)
	.add("Basic", () => ({
		template: `
		<ibm-breadcrumb [noTrailingSlash]="noTrailingSlash" [overflowThreshold]="overflowThreshold">
			<ibm-breadcrumb-item
			  *ngFor="let index of range(itemCount)"
				href="{{href(index)}}">
				Breadcrumb {{index}}
			</ibm-breadcrumb-item>
		</ibm-breadcrumb>`,
		props: {
			noTrailingSlash: boolean("noTrailingSlash", true),
			overflowThreshold: number("overflowThreshold", 4),
			itemCount: number("itemCount", 4),
			range: (stop: number, start = 0, step = 1) => {
				console.log("range: " + stop);
				let itemCount = Number(stop);
				if (isNaN(itemCount) || itemCount < 0) {
					itemCount = 0;
				}
				if (itemCount > MAXIMUM_ITEM_COUNT) {
					itemCount = MAXIMUM_ITEM_COUNT;
				}
				return range(itemCount, start, step);
			},
			href: (index: number) => {
				const uid = ("" + Math.random()).substr(2, 6);
				const href = "#_" + index + "_" + uid;
				console.log("href: " + href);
				return href;
			}
		}
	}));

The breadcrumb component doesn’t display the correct items with the item count knob is changed

[cal-smith]

This seems to work with the model, and as far as I can tell everyone is good with that … closing!

[cal-smith]

And the overflow menu breaks sometimes when doing that.

At this point I’ve sunk a good couple days into this, and it seems to be a timing issue with ng-content, ng-template, and passing values between multiple levels … so not something we can easily fix (hopefully something that’s fixed with the new Ivy renderer, but we’re not there yet)

So yeah, if you want to switch to a model @markewallace I’d definitely go that way … collectively we’ve spent far too much time on this, and it’s not worth being stubborn over a usecase that’s impossible to implement correctly.