Foudation grid system not working on Angular Form - css

Question

I have done the intsallation of foundation 6 on my Angular and it works fine but I realized the grid system is not working at all. I have made a lot of tweaks and turns but still no luck. Anyone knows why this may be. Thank you.
<div>
<h3>
Add A Warehouse
</h3>
</div>
<form novalidate [formGroup]= "warehouseForm" (ngSubmit)="onSubmitForm()">
<div class="row">
<div class="medium-6 columns">
<label>Warehouse Name
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Name">
</label>
</div>
<div class="medium-6 columns">
<label>Warehouse Country
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Country">
</label>
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<label>Warehouse Region
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Region">
</label>
</div>
<div class="medium-6 columns">
<label>Warehouse City
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse City">
</label>
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<label>Warehouse Address
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Address">
</label>
</div>
<div class="medium-6 columns">
<label>Warehouse Street
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Street">
</label>
</div>
</div>
<div class="row">
<div class="medium-6 columns end">
<label>Warehouse Keeper
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Keeper">
</label>
</div>
</div>
<div>
<button type="submit" class="success button expanded">Save</button>
</div>
</form>
This is my form , I can say I say my foundation works because the fonts and other things are working. But the grid is just not working.
In the .angular-cli.json
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/foundation-sites/dist/css/foundation.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
"scripts": [
"../node_modules/foundation-sites/vendor/jquery/dist/jquery.js",
"../node_modules/foundation-sites/dist/js/foundation.js"
],
Image from code inspection

Answer 1

I think the issue is with the version of foundation you've got!
Check what grid system your current install of Foundation is using because the newest version of Foundation comes with their XY Grid enabled when you download the complete package and this wont call the CSS of the old grid!
You'll need to re-download a custom version of Foundation but check 'float grid' when you're downloading it and it will get you back to the older grid system and your code should work!
Heres a link to download the custom foundation version:
https://foundation.zurb.com/sites/download/
And if you want to learn more about the new XY Grid heres a link: http://foundation.zurb.com/sites/docs/xy-grid.html
Hope this helps!

Answer 2

In case anyone else has an issue with using Foundation Flex Grid:
Try adding these in your styles.scss:(you could read more from here)
#import "../node_modules/foundation-sites/assets/foundation";
#include foundation-flex-classes;
#include foundation-flex-grid;
If that did work, here's how I add foundation to my Angular 8 project:
Install foundation sites and jQuery:
$ npm install --save foundation-sites jquery
Add these in angular.json file:
"styles": [
"src/styles.scss",
"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"
],
Add $ and foundation in app.component.ts
-
import { Component } from '#angular/core';
declare var $: any; // <=========== Add this
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app-frontend';
ngOnInit(): void {
$(document).foundation(); // <=========== Add this
}
}
Ctrl C and npm start or ng serve again to reset the server.