Angular built-in-direcitives not working with Foundation components

0
votes

I am using a lot of the foundation components such modal , accordian and more. In my html in angular these work fine, but soon as I use built in directives from such *ngIf or *ngFor these foundation components completely stops working. Example below.

 <p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
  <h2 class="text-center">Lorem Ipsum</h2>
  <div *ngif="name === 'John'" class="reveal" id="exampleModal1" data-reveal>
      <h1>Awesome. I Have It.</h1>
      <p class="lead">Your couch. It is mine.</p>
      <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
 </div>

The modal for this doesnt work , but the moment I remove the *ngIf it works well. What is the reason for this behaviour?

This code is what the main issue is about. and its not working when I decided to introduce the structural directives with real data. 

<div class="app-dashboard-sidebar-inner">
    <div>{{topLabel}}</div>
    <ul class="vertical menu accordion-menu" data-accordion-menu>
    <ng-template ngFor let-asideItem [ngForOf]="asideItems">
      <li>
          <a [routerLinkActive]="['active']" href="#">
            <i class="{{asideItem.icon}}"></i>
            <span class="app-dashboard-sidebar-text">{{asideItem.name}}</span>
          </a>
          <ng-template [ngIf]="asideItem.type === 'sub'">
            <ul class="menu vertial nested">
            <ng-template ngFor let-asideChildren [ngForOf]="asideItem.children">
                <li>
                    <span class="app-dashboard-sidebar-text">{{asideChildren.name}}</span>
                </li>
            </ng-template>
          </ul>
          </ng-template>
      </li>
     </ng-template>
    </ul>
  </div>

All information are shown correctly but the dropdown accordian just doesnt work

3
angularhtmlzurb-foundationangular-directive

3 Answers

0
votes

Just use structure directive in ng-template.

example:

<ng-template *ngif="name === 'John'">
<div class="reveal" id="exampleModal1" data-reveal>
      <h1>Awesome. I Have It.</h1>
      <p class="lead">Your couch. It is mine.</p>
      <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
 </div>
</ng-template>
0
votes

The reason why it can't work is that ngIf doesn't create the DOM(id='exampleModal1') when the condition is false, so data-open="exampleModal1" can't find target DOM

you can use hidden instead of ngIf, I changed this:

  • use the opposite logic of ngIf on [hidden]

<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
  <h2 class="text-center">Lorem Ipsum</h2>
  <div [hidden]="name !== 'John'" class="reveal" id="exampleModal1" data-reveal>
      <h1>Awesome. I Have It.</h1>
      <p class="lead">Your couch. It is mine.</p>
      <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
 </div>
0
votes

I was able to make it work, to anyone who might face the same problem the solution that worked for me was to call $(document).foundation(); in ngAfterViewInit

ngAfterViewInit(): void {
$(document).foundation();

}