Using Foundation 6 in Angular 4 (or 2)


I recently started a project that’s built using Angular 4. As a fairly longtime Angular 1 user, the transition from 1.X to 4.X was…well…big. TL;DR, Angular 4 is nothing like Angular 1, so I had to relearn just about everything about the framework (including how to use typescript which has come with its own set of challenges).

In addition, our frontend dude is a fan of Foundation, and we’re using that for all our frontend framework needs. Recently, as I was working on implementing a modal, I couldn’t get it to trigger, despite following the docs line-for-line. If you’ve had trouble getting Foundation’s JS components to work with Angular 2+, here’s how to solve the problem.

Dynamic Components and Binding

Let’s look at how you’d set up a simple modal in Foundation:

<button class="button" data-open="myModal">Add Action</button>                                                
<div class="large reveal" id="myModal" data-reveal>                                                           
  <h1>My Modal Title</h1>                                                                                            
  <p>This is the body of my modal</p>
</div>                                                                                                                 

Without getting too in the weeds with how Foundation works internally, here’s what’s happening. Defining the data-open attribute on the button binds that button’s click to the item it’s pointing at, in this case, #myModal. When Foundation loads up, it runs through and finds all of these attributes, binds listeners to them, and waits to take action when you click.

Here’s the problem. With Angular, components are injected into the DOM after Foundation has loaded. When you load up a new component, and inject it, Foundation doesn’t know it’s there. We need to tell Foundation to reinitialize and bind again, so these attributes will get wired up.

Here’s how we do it. Our super simple Angular 2+ component looks like this:

{ import Component } from '@angular/core';
declare var $:any

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
  // other stuff here
});

export class MyComponent implements OnInit {
  constructor() {}
  
  ngOnInit() {
    $(document).foundation();
  }
}

A couple things to note. First, we declare $ as a variable in the component that we can use (note that this is a typescript thing, if you’re not using typescript, you likely won’t need this), and give it a type of any. This gives us access to jQuery, which is needed to call Foundation. Then, in our ngOnInit method on the component, we call $(document).foundation(), which tells Foundation to reinitialize and bind to the DOM again. Since our component’s HTML is now in the DOM, it finds the attributes, binds the listeners, and you’re in business!

This should work for Angular 2 and above, and for Foundation for Sites 6.X. Other versions, YMMV.

Related Posts

Review: Keto Diet

I recently gave the Keto (Ketogenic) Diet a try. Suffice to say...it works.

You Don't Need to Get it All Correct Immediately

Too many people wait on shit to be perfect. Get it close, leave out some stuff, and set yourself up to quickly iterate.

Great Products Need Great DevOps

In the quest for shipping great products, DevOps is often overlooked, and that's a mistake

How I Increased my Water Intake by 500%

We all need to drink more water, but it's hard to get in the habit. Here's a simple trick I used to get a 5x improvement on my intake.

Three Secrets That Made Cutting The Cord Easy

After decades of being attached at the hip to cable, I finally cut the cord, and it's been amazing. Here are three secrets that helped me get the most of it.

How to Onboard a Product Designer

If you're bringing a product designer or UX designer in to help you design your product, there's a bad way to do it, and a good way to do it. Here's how to make sure you're doing it right.

Review: Slicing Pie

Slicing Pie is a new way to think about company equity splits, and it blows away the old methods you've probably used.

When Troubleshooting, Follow the Process!

When you're trying to troubleshoot something - a car that won't start, or a business that isn't working - follow the right process.

The Art of Finding a Way

Being resourceful and relentless is one of the keys to being successful (and a great shipper). When in doubt, find a way.

Why I Have a Cocktail at 3:30 Every Day

Every day at 3:30, I stop what I'm doing and have a cocktail. It's become an incredibly important part of my daily routine.