Menu icon Foundation
Angular 2 and Foundation 6


How I can set up my angular2 project with foundation 6? (Foundation APPS is for Angular 1.x)




How I can set up my angular2 project with foundation 6? (Foundation APPS is for Angular 1.x)


Rafi Benkual over 3 years ago

I know of ports to Angular 1.5 and Foundation 6 like

Foundation for Apps 2 will also be on Angular 2. Some of that work is started.

Not if people are waiting for Angular 2 to be released to jump on board. It would be a great project for people to colaborate on. There are some typescript packages for Foundation 6 available already. Is this something you're interested in collaborating on? We're looking to connect community members who are into building this out!


Dominik Pieper over 3 years ago

Hi Rafi,

i will start an Angular 2 projects in the future, so Foundation 6 for that would be nice. You said that work started already, is there some a repository or something to look at (and maybe to jump in)?

Daniel Schuba over 3 years ago

I'm currently working on a project with Angular 2 and I'm considerin to use Foundation 6 instead of Bootstrap 4.

So if there is anything in development that can replace Foundation 6 JavaScript and jQuery with Angular 2 Directives in TypeScript I would love to jump in, test and improve.

It would be great if Foundation Apps 2 would be TypeScript Angular 2 Directives without any CSS that work smoothly with Foundation 6 Style and kind of replace jQuery JavaScript. 

Edward Hatrick-Smith over 3 years ago

Any update on a release of Foundation Apps for Angular 2? We have a project starting with Foundation and Angular 2 so it would be great to have some expectation of when that might arrive.

Rafi Benkual over 3 years ago

The project has been started though Angular 2 is still a RC and will not be officially released for a few moths. We're expecting to have a RC of the new version on Angular 2 by end of 2016 but we'll have more info as it progresses. There is a opportunity to get involved in the codebase sooner, as we'll open it up during development.

Yumarx Polanco about 3 years ago

Is this Foundation for Apps 2 hosted on github? or can we access to the beta version or something?

Daniel Schuba about 3 years ago

I hope there will be a possibility to see this very soon. I already have 2 projects with Angular 2 and Foundation 6 I'm working on and there are more coming in. At the moment I'm just building the Application basis avoiding all Foundation JavaScript Components. But it's getting harder every day. I check this page every second day hoping there will me anything new about this.

Dominik Pieper about 3 years ago

Same here. I hope there will be the possibility to help out or get an tryable version soon.

Antonio Masucci about 3 years ago


Dominik Pieper about 3 years ago

Any news on this?

Manas N about 3 years ago

I created a whole brand new account just to post this (and more).

Please update us on this project, there will be many contributors once the project gets rolling.

James about 3 years ago

Installation is easy as angular-foundation-6 has minimal dependencies  only the AngularJS and Foundation's CSS are required. After downloading dependencies you need to download build version.

Dominik Pieper about 3 years ago

Hi James,

I know angular-foundation-6 but the topic here is Angular 2. As far as I know there isn't an Angular 2 port.

Abhilash Bhargava almost 3 years ago


It's been 3 months since the last update on this thread, any progress that we can expect for Angular 2 Framework?


Rafi Benkual almost 3 years ago

Angular 2 is great and we're supporting an ecosystem where there are many available ports based on Foundation. We believe the best solution for the future of the web is a single, robust framework capable of developing webapps and websites, so we’ve made the decision to streamline our development. You can follow along with the Foundation for Sites roadmap to get more details on where the project is headed and learn how to get involved.


movrack almost 3 years ago


I have an Angular 2 project. I'd like to use foundation but actually am i am a bit disoriented.
Foundation 6 look to be stable. But when I read the roadmap, lot of feature will be added.

I followed the install instruction on our web site with the npm way.
I tried to import the sass file. Then I ave multiple error. (doesn't find dependancy normalize)
So I start to look some doc every where. But All ideas I found on stack overflow explain to make a lot of change in the build process. I can't import simply "@import 'foundation'".
Then I found foundation-apps. But as I understood, the current foundation apps is equals to foundation 5. And is merged in some way to get only one framework with foundation 6.

So finally. 
- What should we use ? 5, 6, apps ?
   I understand diffrence bettwen apps and site, but why there was 2 framework ? (I don't understand the added value of foundation-apps)

- How we have to import it in our project ? Is it possible to complete the documentation ? (In my particular case, it will be the sass way from npm package in an angular 2 apps)

Actually it's to days ago I tried to use foudnation 6 in a proper way (using npm, without cdn, without copy/past files in src,...). It's so complicated... I start to hesitate to move to some other framework with regrets..

Thanks for all

Josh Butkovic over 2 years ago

I have found some value in trying to mimic the dynamic elements using your own Angular 2 directives and animations.  For example, I wanted a Foundation 6 side nav, so I created an animation to slide the side nav in when the hamburger button is clicked.  I've done the same for other components.  It has been a valuable learning experience and broadened my Angular 2 arsenal overall. Just ask yourself, 'what would angular 2 do'?

kopamam over 2 years ago

After his triumph over Dimitrov, Nadal said:

Rick over 2 years ago

Hi Josh, that sounds interesting. Could you please tell us more about how you structured the directive?

I have an existing site in Foundation, but based on a (very!) old stack. I want to update it onto Angular 2 framework. Most things such as the grid etc. work fine, but like you I need a side nav. I have tried the "off-canvas" in F6 but so far cannot get it to work - I think maybe the js part of Foundation conflicts with Angular 2...

Iago almost 2 years ago