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).

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

Keywords

FAQs

What is ng-ebi-foundation?

Is ng-ebi-foundation popular?

Is ng-ebi-foundation well maintained?

Package last updated on 13 Feb 2019

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.

Install

ng-ebi-foundation