The ng-ebi-foundation is an Angular library that provides two directives to reinvoke Foundation on specific components (see examples below).
To fully benefit from Foundation, jQuery has to be properly set up and the
.foundation() function called on every new or updated component.
The major differences between the two directives are:
ebiReloadFoundationis a lighter option, because it reinvokes Foundation only when the element view is initialized. It doesn't reinvoke Foundation afterwards. Initial Foundation setup is achieved when the
initvalue is passed to the directive (
ebiReloadFoundation="init"). In this case, Foundation is invoked on the whole document and executes
foundationExtendEBI(mostly necessary on the initial setup). Usually, there is only a single
ebiReloadFoundation="init"in the application but many
ebiReloadFoundationspread among components.
ebiAutoFoundationis experimental at the moment. It detects mutation in the DOM of the element and reinvokes Foundation. This could cause very frequent invocations to Foundation, depending on the application and how it is used. Use this directive with care.
Foundation and single-page applications, like Angular, are not an ideal combination. Foundation wasn't written with these frameworks in mind (plus the size increase of using jQuery). Continuous reinvocations of Foundation could slow down the application and produce a lot of DOM garbage (for example, each time a tooltip is generated a hidden DOM element is created, but never removed).
There maybe better ways to use Foundation and Angular using directly the plugins (see this example).
To install this library, run:
npm install --save @angular/cdk npm install --save ng-ebi-foundation or yarn add @angular/cdk yarn add ng-ebi-foundation
Consuming the library
In your Angular
Basic example of using the
Example using the
Want to help?
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing.
Apache 2.0 © EMBL - European Bioinformatics Institute