Problem using components in angular with ripple effect

[kevincaradant]

Hi

Look this example:

<header>
    <nav class="navbar navbar-inverse navbar-static-top"  abm-component="" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" ng-click="$ctrl.navCollapsed = !$ctrl.navCollapsed">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" ui-sref="home">Brand</a>
            </div>
            <div class="collapse navbar-collapse" ng-class="!$ctrl.navCollapsed && 'in'">
                <ul class="nav navbar-nav">
                    <li ui-sref-active="active">
                        <a ui-sref="home" ng-click="$ctrl.setNavCol(true)"><i class="mdi mdi-home mdi-lg"></i></a>
                    </li>
                    <li ui-sref-active="active" ng-click="$ctrl.setNavCol(true)">
                        <a  ui-sref="page1" ng-click="$ctrl.setNavCol(true)">Page 1</a>
                    </li>
                    <li ui-sref-active="active" ng-click="$ctrl.setNavCol(true)">
                        <a ui-sref="page2" ng-click="$ctrl.setNavCol(true)">Page 2</a>
                    </li>
                </ul>
            <lang></lang>
            </div>
        </div>
    </nav>
</header>

lang.component.html:

<ul class="nav navbar-nav navbar-right lang">
    <li  ng-class="{ active: $ctrl.getLanguage()==='fr'}" class="lang" ><a href="" ng-click="$ctrl.changeLanguageTo('fr')" ng-class="{ active: $ctrl.getLanguage()==='fr'}">FR</a></li>
    <li  ng-class="{ active: $ctrl.getLanguage()==='en'}" ><a href="" ng-click="$ctrl.changeLanguageTo('en')">EN</a></li>
</ul>

It's seems, it's not possible to apply a ripple on the <ul><li> which is in the <lang> component. I don't have the effect, how can I do ?

Thank you

Edit: Simple warkaround is to write: abm-component="" on each li or ul but I want to avoid this if possible

[tilwinjoy]

Hi, It only automatically applies ripple effect to the elements having ripple according to bootstrap material design project (based on CSSselectors) as you can see here

One option is what you mentioned (Which is why I added such a directive) another quick dirty hack would be to override that directive (Copy-pasta) and include the selectors you prefer.

A proper way would be to expose those selector map using the config service just like the error map, or make them injectable values. (I recently moved cross country it'll take sometime for me to do that)

[kevincaradant]

Alright thank you. For the moment, I use my workaround. If you apply your suggestion, feel free to say me your progression ;)