You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@zeppelin.apache.org by Rey <c....@neurocom.lu> on 2019/08/22 09:02:10 UTC

angular front end display system understanding

Hello everyone

I am new to Zeppelin and I am new to Angular.

I would like to use the angular  interpreter in order to create a very 
customized UI. I am always stuck when I tried to create a component 
using Angular JS Material.

I tried to integrate such example  : 
https://material.angularjs.org/latest/demo/select#options-with-async-search 
inside a paragraph. But I have only the text displayed. The selection 
menu is never displayed.

This is my paragraph I am running (I tried to adapt the snippet of code 
from angular js material website to a Zeppelin paragraph):


%angular


<div ng-controller="SelectAsyncController" layout="column" 
layout-align="center center" style="padding:40px" ng-cloak="" 
class="selectdemoOptionsWithAsyncSearch" ng-app="zeppelinWebApp">
   <p>Select can call an arbitrary function on show. If this function 
returns a promise, it will display a loading indicator while it is being 
resolved:</p>
   <div layout="column" layout-align="center center">
     <md-select placeholder="Assign to user" ng-model="user" 
md-on-open="loadUsers()" style="min-width: 200px;">
       <md-option ng-value="user" ng-repeat="user in 
users">{{user.name}}</md-option>
     </md-select>
     <p class="md-caption">You have assigned the task to: {{ user ? 
user.name : 'No one yet' }}</p>
   </div>
</div>

<script>
angular.module('zeppelinWebApp')
.controller('SelectAsyncController', function($timeout, $scope) {
   $scope.user = null;
   $scope.users = null;

   $scope.loadUsers = function() {

     // Use timeout to simulate a 650ms request.
     return $timeout(function() {

       $scope.users =  $scope.users  || [
         { id: 1, name: 'Scooby Doo' },
         { id: 2, name: 'Shaggy Rodgers' },
         { id: 3, name: 'Fred Jones' },
         { id: 4, name: 'Daphne Blake' },
         { id: 5, name: 'Velma Dinkley' }
       ];

     }, 650);
   };
});
</script>


Is it possible to use that angular js material library  with a Zeppelin  
angular paragraph ?

Do you know libraries that can be easily integrated with the Zeppelin 
angular interpreter ?


Thank you very much for your help

C.Rey