Search code examples
angularzurb-foundationzurb-foundation-6

Half of my Foundation6 doesn't work in Angular4

There are certain Foundation 6 elements that work for my Angular App such as the .button class but when I tried to make a drop down menu or a navbar it doesn't collapse the drop down menu

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</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>

But it looks like

--

Incorrectly formatted code

--

I have the following lines in my .angular-cli.json file

  "styles": [
    "../node_modules/foundation-sites/dist/css/foundation-flex.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/foundation-sites/vendor/jquery/dist/jquery.js",
    "../node_modules/foundation-sites/dist/js/foundation.js"
  ],

My hunch is that the javascript aspect isn't working but I'm not sure how to fix it.

** I went into the NPM folders to make sure that those files that the .angular-cli.json is pointing to does in fact exist.

Solution

  • After asking around on different chat channels this is what I learned

    you really should have a wrapper for foundation, im not sure there is one, there is one for bootstrap and theres one for material2. I would start there and look at those components. Foundation doesn't offer any benefits to Angular when it comes to components because they weren't written specifically for angular. You can still pick and choose that pieces you like from the SCSS/ CSS of foundation but you would have to write your own components or use bootstraps and just them it to be like foundation ie: https://material.angular.io/components or https://ng-bootstrap.github.io/#/home

    • @zurie on Gitter

    So as for now I've decided to look into material until I understand more.