Angular2 with jQuery and Foundation.js

Question

I have setup a basic Angular2 Auth0 with JWT integration and now I'd like to use Foundation with jQuery as a dependency.

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>App</title>

    <!-- Latest compiled and minified CSS from zurb. -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">

     <!-- Auth0 Lock script -->
    <script src="http://cdn.auth0.com/js/lock/10.0.0/lock.min.js"></script>
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
    <my-app>Loading...</my-app>

    <script
              src="https://code.jquery.com/jquery-2.2.4.js"
              integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
              crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
</body>
</html>

There seems to be a problem though, because the title bar is unfolded, like jQuery doesn't work or isn't integrated.

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

All I seem to be getting is the following screenshot:

AriJnr · Accepted Answer · 2016-08-25 20:36:40Z

I was with the same problem. But I managed to solve with the information below.

According Jon:

"So from what I could discover regards the .js for foundation to work - you essentially have to run the $(document).foundation(); for every angular 2 component that might has any dynamic foundation elements...like topbar etc.

So for my main nav I created a 'mainnav.component.ts' file that looks like this:"

import { Component, OnInit, AfterViewInit, ElementRef } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

let $ = require('../../bower_components/jquery/dist/jquery.js');
let foundation = require('../../bower_components/foundation-sites/dist/foundation.js');

@Component({
    selector: 'app-main-nav',
    templateUrl: 'app/main-nav/main-nav.component.html',
    directives: [ ROUTER_DIRECTIVES ],
    styleUrls: ['app/main-nav/main-nav.component.css']
})
export class MainNavComponent implements AfterViewInit {

    constructor(private el: ElementRef) { }

    ngAfterViewInit() {
        $(this.el.nativeElement.ownerDocument).foundation();
    }

}

According Jon, "This seems like it is a temp solution until Foundation for Apps 2 is released by zurb, which apparently won't happen till end of 2016. "

Collectives™ on Stack Overflow

Angular2 with jQuery and Foundation.js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related