ng-ebi-foundation v0.1.0-alpha.1
ng-ebi-foundation
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 theinit
value is passed to the directive (ebiReloadFoundation="init"
). In this case, Foundation is invoked on the whole document and executesfoundationExtendEBI
(mostly necessary on the initial setup). Usually, there is only a singleebiReloadFoundation="init"
in the application but manyebiReloadFoundation
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).
Installation
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
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 help?
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing.
License
Apache 2.0 © EMBL - European Bioinformatics Institute
5 years ago
6 years ago