Translate not work with mdb-sidenav-item when it's mdbCollap

Topic: Translate not work with mdb-sidenav-item when it's mdbCollapse

Moulay JAMAL EL AMRANI pro premium priority asked 2 years ago

**Expected behavior*_i used @ngx-translate/core": "^14.0.0",!

Actual behavior* enter image description here Resources (screenshots, code snippets etc.)

    <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" href="">
            <i class="fas fa-home-lg fa-fw me-3"></i><span>{{ 'Acceuil' | translate }}</span></a
        >
    </mdb-sidenav-item>
    <mdb-sidenav-item>
        <a class="sidenav-link" tabindex="0" href="">
            <i class="fas fa-home-lg fa-fw me-3"></i><span>{{ 'Alertes' | translate }}</span></a
        >
    </mdb-sidenav-item>
    <mdb-sidenav-item>
            <a class="sidenav-link" tabindex="0"
            ><i class="fas fa-address-book me-3"></i><span>{{ 'Alertes' | translate }}</span></a
            >
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">

                    <a class="sidenav-link" tabindex="0"><i class="fas fa-address-book fa-fw me-3"></i>Family</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link" tabindex="0"><i class="fas fa-address-book fa-fw me-3"></i>Friends</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link" tabindex="0"><i class="fas fa-address-book fa-fw me-3"></i>Work</a>
                </li>
            </ul>
    </mdb-sidenav-item>

r.seifert commented 2 years ago

We need to take a more in-depth look into this problem. We will work on a possible solution and will let you know when we find something.

jamalElmoutaoukil commented 2 years ago

Hello, are there any news about this issue ? The problem seems to be related to the instruction : const links = this._elRef.nativeElement.querySelectorAll('.sidenav-link'); links[0].innerHTML += ''; in the ngAfterViewInit function of the SideNavItemComponent: This will recreate the dom element but the translation pipe won't be re applied. Using the renderer to append the new child would fix it: iElement = this._renderer.createElement('i'); this._renderer.addClass(iElement, 'fas fa-angle-down rotate-icon'); this._renderer.appendChild(links[0], iElement);

Arkadiusz Idzikowski staff commented 2 years ago

This problem has not been fixed yet but it is on our high-priority task list. Thank you for the suggested solution, it will be very helpful while we work on this bug.

Add comment

Arkadiusz Idzikowski staff answered a year ago