Dynamic Accordion issue with Angular 8

In the project I work atm we use Angular 8. I tried integrating foundation-sites.
I am using:

"foundation-sites": "^6.6.3",
"jquery": "^3.5.1",

I also edited angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/foundation-sites/dist/js/foundation.min.js"
]

To see if everything is working fine, I tried adding an accordion in my component. The only working solution I found is this:

declare var $: any
export class MyComponent implements AfterViewInit {

    constructor(private el: ElementRef) { }

    ngOnInit() {
        $('#side-nav-list').foundation();
    }

    ngAfterViewInit() {
        $(this.el.nativeElement.ownerDocument).foundation();
    }

}
<ul id="side-nav-list" class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
    <li>
        <a href="#">Item 2</a>
        <ul class="menu vertical nested">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
</ul>

After that, I tried building the accordion dynamically. So I just added an ngFor to the first <li> component

<ul id="side-nav-list" class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
    <li *ngFor="let item of navItems">
    	<a href="#">Item 2</a>
    	<ul class="menu vertical nested">
    		<li><a href="#">Item 2A</a></li>
    		<li><a href="#">Item 2B</a></li>
    	</ul>
    </li>
    <li><a href="#">Item 3</a></li>
</ul>

This broke the accordion for some reason. So after a long research I found out that I have to reInitialize the element when I build it dynamically. So I tried this:

import Foundation from 'foundation-sites';
...
ngAfterContentInit(): void {
    Foundation.reInit('accordion-menu');
}

Which resulted in:

ReferenceError: We're sorry, '_init' is not an available method for this element.
    at jQuery.fn.init.foundation (foundation.esm.js:856)
    at Object.string (foundation.esm.js:749)
    at Object.reInit (foundation.esm.js:756)

So after a bit dig up, I found out that the error happens here:

...
'string': function string() {
            plugins = hyphenate(plugins);
--->        $('[data-' + plugins + ']').foundation('_init');
...

which makes no sense, because if I add a breakpoint there and run:

$('[data-' + plugins + ']').foundation('_init');

through console, it runs perfectly without errors.

This made believe that the issue happens because of Angular Shadow dom.
Is there something wrong with the way I initialize foundation in Angular? Or is foundation-sites buggy when used with Angular?

reInit can be only used if it is already initialized and for a component (data-). You normally use $(document).foundation() to initialize all components once at page load an then initialize the components as needed or run the same code to initialize all uninitialized ones.

As you can see in the code, this is what I do.
My element with id side-nav-list also has the data-accordion-menu. And I initialize it individually by:

$('#side-nav-list').foundation();

Then, I run Foundation.reInit(‘accordion-menu’); to re-initialize it. But as I told you, this won’t work.
I don’t know if you need any more info or anything so you can look it up. Has this functionality been tested to work for Angular?

Edit:
Also I got another question here. My main issue is that building dynamic foundation elements won’t work, for example the Accordion. Is this something the reInit method will actually fix?

reInit is meant for elements which are changed and need reinitialization, correct.

Not sure what the exact issue is, reInit works only on already initialized plugins and components which have the generated values after data-plugin-name=.

Ok, everything is fine. The issue was that I was executing reInit before dom was ready. So by adding:

reInit(plugin) {
        $(document).ready(function () {
            Foundation.reInit(plugin);
        });
    }

My issue was fixed. Thank you for the information you provided me with!