Issues encountered when attempting to integrate Foundation 6 with Angular 6

Struggling to implement Foundation components like model and accordion menu in my project. Unfortunately, they are not functioning as expected.

    import { Component, OnInit} from '@angular/core';
import { MenuItems } from '../../shared/menu-items';
import { Foundation } from 'node_modules/foundation-sites/js/foundation.core';
declare var $:any;


@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})
export class AdminComponent implements OnInit {

  isShrinkMedium: Boolean = true
  menuItems;
  constructor() { }

  ngOnInit() {
    Foundation.addToJquery($);
    $(document).foundation();
    this.menuItems =  new MenuItems().getAll();
   }

This is the component where I'm facing issues. The console shows errors like the ones below:

https://i.sstatic.net/Akzn8.png

When I click on the circled area in the image, I see the following message:

https://i.sstatic.net/pgZZ1.png

As a result, none of the Foundation components are working properly. Everything functioned correctly when using an older version (version 4). Hoping someone can shed light on what might be causing these problems.

Answer №1

Give this a try

cd path_project

npm install jquery
npm install foundation-sites

npm install @types/jquery --save-dev
npm install @types/foundation-sites --save-dev

If it doesn't work!


Copy the following code

 interface JQuery {
     foundation(method?: string | Array<any>, ...args: any[]): JQuery;
  }

from

/path_project/node_modules/foundation-sites/dist/js/foundation.d.ts

and paste it into

/path_project/node_modules/@types/jquery/index.d.ts

and place it on the last line


In

/path_project/src/polyfills.ts

add ===>

    /***************************************************************************************************
 * JQuery
 */
import 'jquery';

Now in your code you can use

import { Component, OnInit } from '@angular/core';
// import 'jquery'; // include this in polyfills.ts
//// import * as $ from 'jquery';
// import { Foundation } from 'foundation-sites/dist/js/foundation.min';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ex4';
  ngOnInit() {
      // Foundation.addToJquery($);
    $(document).foundation();
  }
}

Don't forget to

Add "css" and "js" to

/path_project/angular.json

like so

   "styles": [
      "src/styles.css",
      "node_modules/foundation-sites/dist/css/foundation.min.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/foundation-sites/dist/js/foundation.min.js"
    ]

Restart

ctr+c


ng serve

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React-router does not render Bootstrap select element

I am currently developing a simple app using reactjs and have set up routes for 3 components. I am facing an issue where the select fields are not appearing when the component is rendered. I am utilizing the bootstrap-select library for these select fields ...

The term 'includes' is not present within type 'any' in Reactjs

I am currently working on a web page that is designed to display data and allow users to filter it. The data display aspect is functioning correctly, but I am encountering issues when attempting to implement the filtering feature. Specifically, the proble ...

What can cause an "Undefined index" error in an ajax POST request and/or PHP script?

When attempting to send an ajax POST request to a PHP file, I encounter an issue where the PHP file returns a notice of "undefined index" and does not receive the value being sent. Despite researching extensively to find a solution, I have been unable to r ...

stop the page from refreshing when clicking on the map area

http://jsbin.com/iTeNiJIt/1/edit?output I currently have multiple map areas on my webpage. When a user clicks on any of these areas, I want to create an animation without refreshing the page. However, I am facing an issue where the page refreshes every ti ...

Steps for inserting a button within a table

Currently, I have implemented a function that dynamically adds the appropriate number of cells to the bottom of my table when a button is clicked. This is the JavaScript code for adding a row: <a href="javascript:myFunction();" title="addRow" class= ...

Achieving dynamic text alignment within a Grid tile container using HTML and Angular

Here is the main section of my parent component. <div class="o-tile-container "> <div *ngFor="let country of Countrys"> <app-country [na ...

Improved method for displaying or concealing a sequence of input fields

I have implemented a solution using a variable to manage the display of textboxes when a user clicks on a checkbox. There are 4 checkboxes in a series, and clicking on any one of them triggers the appearance of a corresponding textbox. While my current imp ...

Develop Connective Plugins using Angular 12

I am working on implementing a new feature for my app that involves storing certain modules on the backend and loading them dynamically based on user demand. Instead of loading all modules at once, I want to only load the necessary modules just before the ...

Display the element containing the targeted content using jQuery

Is there a way to style all li elements with a specific content without assigning them a unique id or class? <ul class="list"> <li>test</li> <li>test2</li> <li>test</li> </ul> I want to make all ...

jQuery's remove/add class functionality seems to only function once

I haven't had much sleep and I'm not sure if toggleClass will work for this situation. Here is the code I currently have: $(document).ready(function() { // Slide Mobile Filter Sidebar Onto Screen $('#showFilters').on('clic ...

The conflict between Mongodb/Mongoose types in aggregation operations

When I upgraded my nodejs server to a newer version of mongoose, I came across an unusual typescript error related to the $sort aggregation. Here are my versions: Dependencies: "mongoose": "^6.2.10" Dev dependencies: "@types/mon ...

Implementing multiple filters with jQuery

Make a Selection `<select class="form-control" id="technology"> <option name="sort" value="2g" id="2g"gt;2G</option> <option name="sort" value="3g" id="3g"&g ...

Tips on avoiding the default action during a keypress for specific events before eventually restoring the default action

I've been experimenting with a project that involves using the space bar to trigger an event. It's actually quite complex, but I simplified it for this example. The concept is that when the space bar is held down, it highlights a certain div, an ...

How is it possible for TypeScript to enable the importing of dependencies that it ultimately cannot utilize during runtime?

Take a look at my sample project by following this link: https://github.com/DanKaplanSES/typescript-stub-examples/tree/JavaScript-import-invalid I have developed a file named main.ts: import uuid from "uuid"; console.log(uuid.v4()); While type ...

"Can you share a method to extract the value from a TextField component in a React hook-based Material-

Currently, I am using Material-UI within a React project and have a component set up like this: const UserDetail = (props: ListDetailProps) => { const oldpassword = useRef<TextFieldProps>(null); const newpassword = useRef<TextFieldProps ...

Tips for compiling custom GraphQL Scalars in Typescript

Encountering an issue with this straightforward GraphQL Custom Scalar as it throws a typescript error: Error TS2351: This expression is not constructable. Type 'typeof import(".../graphql/node_modules/graphql/index")' has no construct ...

The code is malfunctioning on this site (yet functions perfectly on a different website)

So I have a question that may seem silly, but it's worth asking. I'm attempting to create a sticky div element that stays in place when you scroll past a certain point on the page. This is the script I have: <script type="text/javascript"> ...

Unresolved Issue: jQuery AJAX Fails to Load PHP File in Internet Explorer

I have a piece of code that runs lastactivity.php every 10000 milliseconds on FireFox, Chrome, and Opera for Windows & Linux. However, it does not seem to work on Internet Explorer (tested on IE Version 11). There are no error messages displayed by the b ...

Create a visually engaging book reader with the power of jQuery and images

For hours, I've been attempting to develop an online Comic Book reader to load my images. Everything is functioning correctly, except for a counter using an increment method that just won't work - reducing the increments breaks the function. Is ...

[Testing Angular Components][Jasmine] How to effectively test the subscription in afterClosed() method from a MatDialog

I'm currently attempting to monitor a call service in order to determine if I have been called after closing matdialog. However, I encountered this error: TypeError: Cannot read property 'close' of undefined If I don't attempt to clo ...