Topic: how to implement two seperated components with Scrollspy in angular

tonyha premium asked 4 years ago


Expected behavior I would like to implement Scrollspy seperating with two components such as navbar mdbScrollSpy="scrollspy1" and actual section component with mdbScrollSpyElement Actual behavior

Resources (screenshots, code snippets etc.)

1) header component ->

<!-- Navbar brand -->
<mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>

<!-- Collapsible content -->
<links>

    <!-- Links -->
    <ul mdbScrollSpy="scrollspy1" class="navbar-nav mr-auto">
        <li class="nav-item">
            <a mdbScrollSpyLink="home" class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a mdbScrollSpyLink="features" class="nav-link waves-light" mdbWavesEffect>Features</a>
        </li>
        <li class="nav-item">
            <a mdbScrollSpyLink="pricing" class="nav-link waves-light" mdbWavesEffect>Pricing</a>
        </li>
    </ul>
    <!-- Links -->

</links>
<!-- Collapsible content -->

Actual section component --->

Home

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ipsam animi debitis maxime explicabo. Deserunt tenetur harum repellendus, architecto, expedita quo eos tempora esse nam fugiat nostrum obcaecati, quisquam officia? Quia odit soluta sed excepturi adipisci harum, dolorem ut, facilis commodi iure, voluptas assumenda tenetur. Quae distinctio assumenda aliquid accusamus. Magni, pariatur unde commodi blanditiis voluptate sequi quis dolorem labore? Quasi, unde, nihil vel harum totam voluptas laboriosam modi debitis consectetur ad, reprehenderit adipisci provident. Itaque libero quis fugit, quae maxime quibusdam qui adipisci nulla expedita laudantium necessitatibus culpa aut! Sunt repellat qui consectetur dolorum ex tempora corrupti distinctio inventore, facere aliquid omnis beatae ipsa eligendi eum magni neque doloremque mollitia incidunt, saepe voluptas! Minima similique enim repellendus. Neque, porro! Sed voluptatum aspernatur impedit corrupti. Facere doloremque impedit eveniet illo cum, distinctio optio nostrum quidem, temporibus minima quos necessitatibus eius, corporis repudiandae dolorum quam mollitia aliquid qui. Sunt, voluptate tempora! Quasi quam deleniti quos unde molestias illum velit assumenda quia odit quaerat, corporis magnam ipsum culpa alias dolorem, officia eius consequuntur veritatis, esse accusamus. Quia exercitationem maiores suscipit error. Molestias! Quae consequuntur maxime natus voluptate quibusdam recusandae. Blanditiis, officiis! Quia, rerum. Aspernatur, ut hic nisi accusamus cupiditate veniam! Ea sint deleniti laboriosam quia numquam culpa, dignissimos tempore consectetur quos asperiores. Voluptate, nihil. Exercitationem omnis quasi eaque autem officiis? Molestias rerum ipsum eos aperiam perferendis, quo aliquam voluptates ut eius repudiandae numquam reprehenderit, omnis blanditiis, provident necessitatibus nihil cupiditate! Earum, aperiam! Distinctio porro error in dolore nostrum quas ut unde doloremque architecto laboriosam accusamus fuga, consequatur facilis doloribus sint rem vel. Illum, exercitationem? Sit atque est cumque assumenda nesciunt, voluptatum tempore!

Features

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ipsam animi debitis maxime explicabo. Deserunt tenetur harum repellendus, architecto, expedita quo eos tempora esse nam fugiat nostrum obcaecati, quisquam officia? Quia odit soluta sed excepturi adipisci harum, dolorem ut, facilis commodi iure, voluptas assumenda tenetur. Quae distinctio assumenda aliquid accusamus. Magni, pariatur unde commodi blanditiis voluptate sequi quis dolorem labore? Quasi, unde, nihil vel harum totam voluptas laboriosam modi debitis consectetur ad, reprehenderit adipisci provident. Itaque libero quis fugit, quae maxime quibusdam qui adipisci nulla expedita laudantium necessitatibus culpa aut! Sunt repellat qui consectetur dolorum ex tempora corrupti distinctio inventore, facere aliquid omnis beatae ipsa eligendi eum magni neque doloremque mollitia incidunt, saepe voluptas! Minima similique enim repellendus. Neque, porro! Sed voluptatum aspernatur impedit corrupti. Facere doloremque impedit eveniet illo cum, distinctio optio nostrum quidem, temporibus minima quos necessitatibus eius, corporis repudiandae dolorum quam mollitia aliquid qui. Sunt, voluptate tempora! Quasi quam deleniti quos unde molestias illum velit assumenda quia odit quaerat, corporis magnam ipsum culpa alias dolorem, officia eius consequuntur veritatis, esse accusamus. Quia exercitationem maiores suscipit error. Molestias! Quae consequuntur maxime natus voluptate quibusdam recusandae. Blanditiis, officiis! Quia, rerum. Aspernatur, ut hic nisi accusamus cupiditate veniam! Ea sint deleniti laboriosam quia numquam culpa, dignissimos tempore consectetur quos asperiores. Voluptate, nihil. Exercitationem omnis quasi eaque autem officiis? Molestias rerum ipsum eos aperiam perferendis, quo aliquam voluptates ut eius repudiandae numquam reprehenderit, omnis blanditiis, provident necessitatibus nihil cupiditate! Earum, aperiam! Distinctio porro error in dolore nostrum quas ut unde doloremque architecto laboriosam accusamus fuga, consequatur facilis doloribus sint rem vel. Illum, exercitationem? Sit atque est cumque assumenda nesciunt, voluptatum tempore!

Pricing

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ipsam animi debitis maxime explicabo. Deserunt tenetur harum repellendus, architecto, expedita quo eos tempora esse nam fugiat nostrum obcaecati, quisquam officia? Quia odit soluta sed excepturi adipisci harum, dolorem ut, facilis commodi iure, voluptas assumenda tenetur. Quae distinctio assumenda aliquid accusamus. Magni, pariatur unde commodi blanditiis voluptate sequi quis dolorem labore? Quasi, unde, nihil vel harum totam voluptas laboriosam modi debitis consectetur ad, reprehenderit adipisci provident. Itaque libero quis fugit, quae maxime quibusdam qui adipisci nulla expedita laudantium necessitatibus culpa aut! Sunt repellat qui consectetur dolorum ex tempora corrupti distinctio inventore, facere aliquid omnis beatae ipsa eligendi eum magni neque doloremque mollitia incidunt, saepe voluptas! Minima similique enim repellendus. Neque, porro! Sed voluptatum aspernatur impedit corrupti. Facere doloremque impedit eveniet illo cum, distinctio optio nostrum quidem, temporibus minima quos necessitatibus eius, corporis repudiandae dolorum quam mollitia aliquid qui. Sunt, voluptate tempora! Quasi quam deleniti quos unde molestias illum velit assumenda quia odit quaerat, corporis magnam ipsum culpa alias dolorem, officia eius consequuntur veritatis, esse accusamus. Quia exercitationem maiores suscipit error. Molestias! Quae consequuntur maxime natus voluptate quibusdam recusandae. Blanditiis, officiis! Quia, rerum. Aspernatur, ut hic nisi accusamus cupiditate veniam! Ea sint deleniti laboriosam quia numquam culpa, dignissimos tempore consectetur quos asperiores. Voluptate, nihil. Exercitationem omnis quasi eaque autem officiis? Molestias rerum ipsum eos aperiam perferendis, quo aliquam voluptates ut eius repudiandae numquam reprehenderit, omnis blanditiis, provident necessitatibus nihil cupiditate! Earum, aperiam! Distinctio porro error in dolore nostrum quas ut unde doloremque architecto laboriosam accusamus fuga, consequatur facilis doloribus sint rem vel. Illum, exercitationem? Sit atque est cumque assumenda nesciunt, voluptatum tempore!


Arkadiusz Idzikowski staff commented 4 years ago

What is the exact problem here? There are two directives: mdbScrollSpyWindow (that listen to window scroll) and mdbScrollSpyElement (that listen to scroll of specific element). You should create two mdbScrollSpy directives with unique ids (mdbScrollSpy="unique1"; mdbScrollSpy="unique2").


tonyha premium commented 4 years ago

is there any way to implement two different components which one component contains 'mdbScrollSpyWindow' and the other component contains 'mdbScrollSpyElement '? After seperating between them, I would like to know how to communicate each other.


Arkadiusz Idzikowski staff commented 4 years ago

There are examples for both mdbScrollSpyWindow and mdbScrollSpyElement in our documentation: https://mdbootstrap.com/docs/angular/navigation/scrollspy/. Implementation of this components will depend on your app structure, I'm not able to help here without knowing what exactly you need to build and what problems you have encountered.

Could you provide more details about the communication between those elements?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: Mac
  • Browser: Chrome
  • OS: MacOS Mojave
  • Provided sample code: No
  • Provided link: No