Does Pattern Lab "Not Mix Well" with Angular

Does Pattern Lab not mix well with Angular?

Maintainer of Pattern Lab Node here.

I just created this reductive sample repository illustrating Angular within Pattern Lab.

• Repository https://github.com/bmuenzenmeyer/patternlab-node-angular-example

• Live Demo http://www.brianmuenzenmeyer.com/patternlab-node-angular-example/public/index.html

As you can see, Pattern Lab can run arbitary frontend code, including Javascript, within the confines of a single pattern, so a motivated individual could showcase components using it.

That said, I don't think that PL's "with the grain" approach of building atomic components works perfectly with Angular (like, don't build your whole app in here) but showcasing the JS behind, say, a tooltip or modal component, is possible in isolation.

This strategy would be similar to reminds me of https://rizzo.lonelyplanet.com/styleguide/design-elements/ - in which they have UI components alongside JS components.

Hope this helps clear up any confusion.

Are there ways to make pattern lab rebuild quicker (with node)?

Maintainer of Pattern Lab Node here.

There is an experimental pull request in the works right now that will incrementally build only parts of a pattern tree. Only the changed patterns. It's not completely done yet nor hit the easier consumption methods, but the pull request is here: https://github.com/pattern-lab/patternlab-node/pull/546

To play with it, clone or fork Pattern Lab Node Core and then npm link it with your edition.

Then pull down the branch.

git checkout -b headissue-540-build-changed-patterns-only dev
git pull https://github.com/headissue/patternlab-node.git 540-build-changed-patterns-only

This is getting into pretty advanced territory, and I make no promises about its reliability - but early testing from some users was positive. If nothing else, know that performance improvements are on the horizon!

Update The functionality mentioned above is now released in the core package. Read about it on the wiki: https://github.com/pattern-lab/patternlab-node/wiki/Incremental-Builds

How to skip outdated responses with angular?

generally it looks like this, if you're using reactive forms, and your source for the string is a formcontrol:

searchSource = new FormControl('')
search(searchString: string) {
  // returns observable of search logic
}
ngOnInit() {
  this.searchSource.valueChanges.pipe(
    switchMap(toSearch => this.search(toSearch)) // switchmap automatically cancels old requests on new values
  ).subscribe(results => {
    // always results for LAST emitted value
  })  
}

the key is using switchMap at the source of your value of interest so that you are only looking at the result of the latest value.

Stylesheet for cytoscape does not take affect. Text and graph does not show correctly

The debugging took way too long, but the mistake was quite small, just use this:

style: sbgnStylesheet(cytoscape),

instead of:

stylesheet: sbgnStylesheet(cytoscape),

This is an error on the cytoscape-sbgn-stylesheet repositories README, the Usage passage clearly states to use "stylesheet", though the demo uses "style" as per usual.

Here is the revised version of your stackblitz

---

Related Topics