ng-ebi-foundation
Advanced tools
The ng-ebi-foundation is an Angular library that provides two directives to reinvoke Foundation on specific components (see examples below).
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:
ebiReloadFoundation is 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 init
value 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
ebiReloadFoundation spread among components.
ebiAutoFoundation is 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
Add CSS and JavaScript for the EBI framework in your src/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello Foundation</title>
<base href="/">
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all"/>
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.min.css" type="text/css" media="all"/>
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/theme-embl-petrol.css" type="text/css" media="all"/>
</head>
<body>
<app-root></app-root>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/libraries/foundation-6/js/foundation.min.js"></script>
<script src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/foundationExtendEBI.min.js"></script>
<script defer="defer" src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/script.min.js"></script>
</body>
</html>
In your Angular AppModule (app.module.ts):
import {
BrowserModule
} from '@angular/platform-browser';
import {
NgModule
} from '@angular/core';
import {
FoundationModule
} from 'ng-ebi-foundation';
import {
AppComponent
} from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FoundationModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Basic example of using the ebiReloadFoundation directive:
import {
Component,
OnInit
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2 data-tooltip title="This is a tooltip" ebiReloadFoundation="init">Hello Foundation</h2>
<ng-container *ngIf="toggle; else other">
<ul class="vertical menu accordion-menu" data-accordion-menu ebiReloadFoundation>
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</ng-container>
<ng-template #other>
<ul class="dropdown menu" data-dropdown-menu ebiReloadFoundation>
<li>
<a href="#">Item 1</a>
<ul class="menu">
<li><a href="#">Item 1A</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</ng-template>
`,
})
export class AppComponent implements OnInit {
toggle = false;
ngOnInit() {
window.setInterval(() => this.toggle = !this.toggle, 2000)
}
}
Example using the ebiAutoFoundation:
import {
Component,
OnInit
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<!--section ebiAutoFoundation [cdkObserveContentDisabled]="false" debounce="1000" (cdkObserveContent)="changeDOM($event)" -->
<section ebiAutoFoundation>
<h2 data-tooltip title="This is a tooltip" >Hello Foundation</h2>
<ng-container *ngIf="toggle; else other">
<ul class="vertical menu accordion-menu" data-accordion-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</ng-container>
<ng-template #other>
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu">
<li><a href="#">Item 1A</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</ng-template>
</section>
`,
})
export class AppComponent implements OnInit {
toggle = false;
ngOnInit() {
window.setInterval(() => this.toggle = !this.toggle, 2000)
}
changeDOM(changes: MutationRecord[]) {
window.console.log('Changes in the DOM detected:', changes);
}
}
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
FAQs
The ng-ebi-foundation is an Angular library that provides two directives to reinvoke Foundation on specific components (see examples below).
We found that ng-ebi-foundation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.