Menu icon Foundation
Angular 2 + Foundation for Sites/APPS

Im a total noob here to Foundation, so please excuse this question, but any answer would be greatly appreciated.

I'd like to develop an upcoming project in Angular 2.

Is it a bad idea and/or is it possible to attempt to use Foundation for Sites/APPS inside an Angular 2 Application?

Angular 2foundation for appsFoundation for Sites

Im a total noob here to Foundation, so please excuse this question, but any answer would be greatly appreciated.

I'd like to develop an upcoming project in Angular 2.

Is it a bad idea and/or is it possible to attempt to use Foundation for Sites/APPS inside an Angular 2 Application?

Jesse Breuer almost 4 years ago

I am hoping to see some official info on an angular2 version of foundation for apps. I can't imagine that zurb wouldn't be working on this, but I've seen nothing so far. Also I'm hoping to see if anyone has come up with solutions for angular2 integration with the current version of foundation for apps.

I am currently looking at foundation for sites as the best choice to use with angular2. As I figure it should be agnostic to angular2 and just provide styling.

Kay McCormick over 3 years ago

I'm investigating this also, except I'm looking to retrofit Foundation for Apps to support Angular 2.

 

Glen Buecker over 3 years ago

You should be able to use the Angular 2 UpgradeAdapter. It will run Angular 1 and 2 code side-by-side.

 

Jesse Breuer over 3 years ago

Thanks Glen, Have you been able to get this to work yourself specifically with Foundation for Apps and Angular2, or is it more of a theoretical observation?

Jon over 3 years ago

So I have managed to create a 'global-css' Angular 2 component...essentially so that you can include or exclude global css styles including foundation-sites if for some reason you wish to (hooray for component flexibility).

One of the draw backs with trying to use foundation-sites inside Angular 2 at the moment is that you have to re-declare $(document).foundation() for any angular 2 component that uses any dynamic foundation-sites component e.g. topbar needs foundation .js to run.

What is currently really getting on my nerves is that I can't find a way to use any foundation-sites mixins or variables within an angular 2 scoped component css file - normally you would have a main app.scss file for the whole site that also includes the foundation stuff as an @import...but you cant @import the full foundation framework into every angular 2 component scss/css file so how do I make use of foundation-sites mixins within a component scss file.

 

**Just in case you are confused about how to use scss inside each component you can obviously scann multiple folders for any .scss using gulp-sass and get them to be processed...the trick is then how do output the resultant css into the relavent component folder I did this like so:

gulp.task('sass', ['sass-foundation'], function () {
  return gulp.src('./app/**/*.scss', { base: './'})
    .pipe(sass())
    .pipe(gulp.dest('.'));
});

Brian over 3 years ago

ZURB has basically dropped support for Foundation Apps and it is now being maintained under angular-base-apps.

The framework is only designed for angular 1 and would need a rewrite to work for angular 2.  All the styling for each component should be shareable between angular 1 and 2, but would need some rewrite to allow this (based on Jon's comments above).