We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to give angular support for listview while using inside navigation drawer

Platform: JavaScript |
Control: ejNavigationDrawer |
Published Date: July 14, 2017 |
Last Revised Date: July 14, 2017

How to give angular support for listview while using inside navigation drawer?

We can achieve angular support the listview control which is rendered inside the navigation drawer. Please find the below code snippets.

First, we have to refer the angular supporting scripts to the sample and then we need to add the ng-app and ng-controller attributes to the sample where ng-app is necessary to make the control to get render with angular support. Here we set the angular binding for a list items through datasource property which is present inside the navigation drawer. Please refer the below code snippets.

[html]

<!DOCTYPE html>

<html ng-app="SynApp">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />

    <meta charset="UTF-8" />

    <link href="themes/default/ej.web.all.min.css" rel="stylesheet" type="text/css" />

    <title>EJ Navigation Drawer with Angular </title>

    <script src="scripts/jquery-2.0.0.min.js" type="text/javascript"></script>

    <script src="scripts/ej.web.all.min.js" type="text/javascript"></script>

    <script src="scripts/ej.unobtrusive.min.js" type="text/javascript"></script>

    <script src="scripts/jsrender.min.js" type="text/javascript"></script>

    <script src="scripts/angular.min.js" type="text/javascript"></script>

    <script src="scripts/ej.widget.angular.min.js" type="text/javascript"></script>

</head>

<body ng-controller="navPaneCtrl">

   <div class="header">

        <div id="header">

            Home

        </div>

    </div>

    <!--navigation wrapper-->

    <div class="navwrapper">

        <!--navigation drawer with angular attributes-->

        <div ej-navigationdrawer e-enablelistview="true" e-targetid="header" e-position="normal" id="navpane">

            <e-items>

                <e-item e-text="value1"></e-item>

                <e-item e-text="value2"></e-item>

                <e-item e-text="value3"></e-item>

                <e-item e-text="value4"></e-item>

            </e-items>

        </div>

    </div>

    <script>

        //angular controller to assign angular variable for all the list items

        angular.module('SynApp', ['ejangular'])

           .controller('navPaneCtrl', function ($scope) {

               $scope.value1 = "Home";

               $scope.value2 = "Profile";

               $scope.value3 = "Photos";

               $scope.value4 = "Location";

           });

    </script>

    <style>

        body

        {

            margin: 0;

        }

       

        .header

        {

            background: none repeat scroll 0 0 blue;

            height: 45px;

            width: 100%;

        }

       

        #header

        {

            background-image: url("themes/images/drawericon.png");

            background-repeat: no-repeat;

            height: 38px;

            width: 38px;

            color: white;

            font-size: 32px;

            padding-top: 4px;

            text-indent: 45px;

        }

              .navwrapper

        {

                position:relative;

            height:700px;

                } 

    </style>

</body>

</html>

 

Output:

 
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon