var app2 = angular.module("webApp2", [])
.controller("webCtrl2", function ($scope, $window, $state, $http) {
console.log("hi " + $state.params.usermail);
$scope.uName = $state.params.usermail;
$scope.useriden = $state.params.user;
console.log("hbdhakkdjf" + " " + $scope.uName)
//$scope.data = $window.sessionStorage.getItem("Mydata");
//console.log("data "+$scope.data);
var usersList = [];
var frndsAdded = [];
$http.get("http://192.168.2.3:3000/userslist")
.then(function (response) {
usersList = response.data;
//$scope.friendsList = response.data;
//.................................................................
$http.get("http://192.168.2.3:3000/sendfriendrequests/" + $scope.uName)
.then(function (response) {
frndsAdded = response.data;
},
function (response) {
console.log("error");
});
// console.log("array print" + JSON.stringify($scope.usersList));
}, function (response) {
console.log("response");
});
console.log(frndsAdded);
console.log("print userid" + $scope.useriden);
$scope.addFrnd = function (frnd, index) {
var data = {
"userId": $scope.useriden,
"requestname": frnd,
"username": $scope.uName
};
console.log(data);
var req = {
method: 'POST',
url: 'http://192.168.2.3:3000/friendrequests',
data: data
}
$http(req).then(function (response) {
console.log("hjhuhjh" + JSON.stringify(response.data));
$scope.usersList.splice("index");
}, function (response) {
console.log(JSON.stringify(response));
});
}
$scope.logoutFn = function () {
$state.go("signup");
}
});
<nav class="navbar navbar-default well well-sm">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebChat</a>
</div>
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li style = margin-top:5%>
<div class = "dropdown">
<a href="#" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i>Add Friends<span class = "caret"></span>
</a>
<ul class = "dropdown-menu list-group" style = " overflow: scroll">
<!--<li class = "list-group-item" ng-repeat = "seeFrnd in usersList track by $index" ng-bind = "seeFrnd.username">name
<button class = "btn btn-primary" ng-click = "addFrnd()">Add Friend</button>
</li>-->
<li class = "list-group-item" ng-repeat = "seeFrnd in usersList track by $index"><span ng-bind="seeFrnd.username"></span>
<button class = "btn btn-primary btn-sm" ng-click = "addFrnd(seeFrnd.username,$index)" class = "buttn" style="float: right">Add Friend</button>
</li>
</ul>
</div>
</li>
<li>
</li>
<li>Logout</li>
</ul>
</div>
</nav>
<div ui-view></div>
I am doing chat application here I am getting two arrays.one is for users list and other is for friends list.both arrays are in different functions.I need to compare that both arrays.how could i do that?
angular.forEach(arr1, function(value1, key1) {
angular.forEach(arr2, function(value2, key2) {
//Comparison logic
});
});
Define the two arrays on $scope. You have to use your logic to compare two arrays inside the second API call after getting the second array values. If you want to do it outside then you have to wait for the asychronous API call to finish, so that you will get the complete array.
$scope.usersList = [];
$sccope.frndsAdded = [];
$http.get("http://192.168.2.3:3000/userslist").then(function(response) {
$scope.usersList = response.data;
//$scope.friendsList = response.data;
//.................................................................
$http.get("http://192.168.2.3:3000/sendfriendrequests/" + $scope.uName).then(function(response) {
$scope.frndsAdded = response.data;
//Comaprison Logic
for (var i = 0; i < $scope.usersList.length; i++) {
for (var j = 0; j < $scope.frndsAdded.length; j++) {
if ($scope.usersList[i].request == $scope.frndsAdded[j].request)
//ur logic
}
}
}, function(response) {
console.log("error");
});
// console.log("array print" + JSON.stringify($scope.usersList));
}, function(response) {
console.log("response");
});
Related
I have a button that is generated using the database information. For example if I insert a name "john" with age 15 into the database, a button with the text "john" along with his age will be generated onto the html page. This is done using appendData function and the buttons are displayed by looping through the data and appending it onto the html page.
I want it as such that if I click on the button with the text "john" I will be displayed the word "john" and 15 on the side.
I tried sending data[i] but its not working. Can someone please help? thank you
<div id="myData" ></div>
<aside>
<p>Details: </p>
<p id="configurationdetails"></p>
</aside>
<script>
fetch('http://localhost:3000/result')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = '<div class="container"> <div class="solid"> <button id="btn" class="btn" onclick="showinfo('+data[i]+')">' + 'name '+data[i].person_name +data[i].age+ '</button> </div></div>';
mainContainer.appendChild(div);
}
}
function showinfo(info) {
document.getElementById("configurationdetails").innerHTML = info;
}
A quick way to fix it is to not pass the object, but just the value i in the showInfo function:
data = [{person_name:"henk", age:33}, {person_name:"wim", age:34}]
appendData(data)
function appendData(data) {
// save data for later
window.data = data
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = '<div class="container"> <div class="solid"> <button id="btn" class="btn" onclick="showinfo('+i+')">' + 'name '+data[i].person_name +data[i].age+ '</button> </div></div>';
mainContainer.appendChild(div);
}
}
function showinfo(i) {
document.getElementById("configurationdetails").innerHTML = data[i].person_name + " " + data[i].age;
}
i just created ectra div with id "contentFromUrl" when the page first load and call api so it fills the data in div and when button click it again fetch fills the data.
i provided two cases which one you like you can choose!
<div id="myData" ></div>
<div id="contentFromUrl"></div>
<aside>
<p>Details: </p>
<p id="configurationdetails"></p>
</aside>
<script>
fetch('http://localhost:3000/result')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = '<div class="container"> <div class="solid"> <button id="btn" class="btn" onclick="showinfo('+data[i]+')">' + 'name '+data[i].person_name +data[i].age+ '</button> </div></div>';
document.getElementById("contentFromUrl").innerHTML = data[i].person_name +data[i].age;
mainContainer.appendChild(div);
}
}
function showinfo(info) {
document.getElementById("configurationdetails").innerHTML = info;
document.getElementById("contentFromUrl").innerHTML = info.person_name + info.age;
}
i am new to angular 4 i want to develop a shopping cart functionality with some different render functionality in html. i can't able to find any solution till now.
already tried with jquery append function but it wont work in edit functionality in feature.
Below gif image shows my requirement
if i click any catagory it will directly append to top of the list with selected catagory.
Then if i click another catagory for same person it will apply after i click apply button
component.html
<ul class="selected-friends" id="appendtext">
</ul>
<ul class="list-friends" id="listFriends">
<div *ngFor="let data of result" [attr.id]="'FriendList' + data.id" #item>
<li class="checkedCatagory">
<div class="sf-left">
<h3>{{data.fullName}}</h3>
<span id="appendCatagoryList"></span>
</div>
<div class="sf-right">
<div class="edit-con sf-icon" data-toggle="collapse" [attr.data-target]="'#list' + data.id">
<i class="fa fa-list" aria-hidden="true"></i>
</div>
<div class="del-con sf-icon" [attr.id]="'#list' + data.id" (click)="delete(data.id)">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</div>
</div>
</li>
<!-- Main List started -->
<li class="mainlistname" data-toggle="collapse" [attr.data-target]="'#list' + data.id">
<label class="catagory_list" [attr.for]="data.id"><input type="checkbox" [attr.id]="data.id" [attr.value]="data.id">
{{data.fullName}}</label>
</li>
<ul class="sub-friends-list collapse" [attr.id]="'list'+data.id">
<p class="mainlistname">Assign Category to this participant</p>
<p class="checkedCatagory">Edit or Assign another category to this participant</p>
<li *ngFor="let catagoryDetail of catagoryList">
<label class="catagory_list">
<input type="checkbox" class="catagory_list_checkbox" (click)="resize(data.id, catagoryDetail.id);addToCart(data.id,catagoryDetail.id,data.fullName,catagoryDetail.title)" [value]="catagoryDetail.id" [attr.id]="'catagoryId'+catagoryDetail.id">
<span [attr.id]="'catagoryName'+catagoryDetail.id">{{catagoryDetail.title}}</span>
<span class="pull-right fnt-16">AED</span>
<span class="pull-right fnt-16" id="'fee'+catagoryDetail.id">{{catagoryDetail.fee}}</span>
<!-- <p>18-99 Years Male/Female</p> -->
<p *ngIf="catagoryDetail.gender === 1">{{catagoryDetail.ageMinMale}}-{{catagoryDetail.ageMaxMale}} Years Male</p>
<p *ngIf="catagoryDetail.gender === 2">{{catagoryDetail.ageMinFemale}}-{{catagoryDetail.ageMaxFemale}} Years Female</p>
<p *ngIf="catagoryDetail.gender === 3">{{catagoryDetail.ageMinFemale}}-{{catagoryDetail.ageMaxFemale}} Years Male/Female</p>
</label>
<span class="checkedCatagoryhidden">
<p *ngFor="let catagorySelected of catagoryList" [attr.id]="'catagorySelected'+catagorySelected.id">
{{catagorySelected.title}} :
<span *ngIf="catagorySelected.gender === 1">{{catagorySelected.ageMinMale}}-{{catagorySelected.ageMaxMale}} Years Male</span>
<span *ngIf="catagorySelected.gender === 2">{{catagorySelected.ageMinFemale}}-{{catagorySelected.ageMaxFemale}} Years Female</span>
<span *ngIf="catagorySelected.gender === 3">{{catagorySelected.ageMinFemale}}-{{catagorySelected.ageMaxFemale}} Years Male/Female</span>
<span class="pull-right fnt-16">AED {{catagorySelected.fee}}</span>
</p>
</span>
</li>
<li class="checkedCatagory" class="apply checkedCatagory quantity">
<span class="quantity_catagory">Qty: <span [attr.id]="'sectionquantity'+data.id"></span></span>
<span class="catagory_amount">Total: AED <span [attr.id]="'sectionprize'+data.id"></span></span>
<button class="btnapplyqnty">Apply</button>
</li>
</ul>
</div>
</ul>
component.ts
addToCart(id, catagoryId, fullName, catTitle){
var currentUserObj = <any>{};
var self = this;
var sum;
currentUserObj[id] = {};
currentUserObj[id].participantid = id;
currentUserObj[id].participantName = fullName;
// console.log(fullName)
this.cart.cartItems[id] = {};
if(jQuery("#catagoryId"+catagoryId).is(":checked")) {
currentUserObj[id]['categoryInfo'] = [];
currentUserObj[id]['categoryName'] = [];
currentUserObj[id]['categoryFee'] = [];
var totalPrize = 0;
jQuery('#list'+id).find('.catagory_list input:checked').each(function(){
var currentCategoryId = jQuery(this).val();
var currentCatagoryName = jQuery('.catagory_list input:checked+#catagoryName'+catagoryId).text();
currentUserObj[id]['categoryInfo'].push(currentCategoryId);
currentUserObj[id]['categoryName'].push(jQuery(this).next('').text());
currentUserObj[id]['categoryFee'].push(Number(jQuery(this).next().next().next().text()));
});
sum = currentUserObj[id]['categoryFee'].reduce(this.add, 0);
currentUserObj[id].quantity = currentUserObj[id]['categoryInfo'].length;
this.cart.cartItems[id] = currentUserObj[id];
currentUserObj[id].participantTotalPrize = sum;
console.log('sum',sum)
this.saveCart();
} else {
var currentCategoryId;
currentUserObj[id]['categoryInfo'] = [];
currentUserObj[id]['categoryName'] = [];
currentUserObj[id]['categoryFee'] = [];
jQuery('#list'+id).find('.catagory_list input:checked').each(function(){
currentCategoryId = jQuery(this).val();
currentUserObj[id]['categoryName'].push(jQuery(this).next().text());
currentUserObj[id]['categoryInfo'].push(currentCategoryId);
currentUserObj[id]['categoryFee'].push(Number(jQuery(this).next().next().next().text()));
});
sum = currentUserObj[id]['categoryFee'].reduce(this.add, 0);
currentUserObj[id].participantTotalPrize = sum;
currentUserObj[id].quantity = currentUserObj[id]['categoryInfo'].length;
this.cart.cartItems[id] = currentUserObj[id];
if(currentUserObj[id].quantity === 0) {
console.log("completed delete", this.cart.cartItems[id])
delete self.cart.cartItems[id];
}
this.saveCart();
}
}
add(a, b) {
return a + b;
}
saveCart() {
if (window.localStorage) {
console.log("tfgb",this.cart);
sessionStorage.setItem('cart',JSON.stringify(this.cart));
}
}
resize(id, catagoryId) {
let navObj = this;
var appendSelectedCatagory = document.getElementById('appendtext');
jQuery(appendSelectedCatagory).prepend(jQuery('#FriendList'+id));
if(jQuery("#catagoryId"+catagoryId).is(":checked")) {
this.displaySelectedList(id, catagoryId);
var totalPrize = 0;
navObj.quantity = 0;
jQuery('#list'+id).find('.catagory_list input:checked').each(function(){
var currentCategoryId = jQuery(this).val();
navObj.eventRegistrationService.getEventCatagoriesList(navObj.eventId)
.subscribe((res)=>{
for(let i in res.data){
var catList = res.data[i];
if(catList.id == currentCategoryId){
totalPrize += catList.fee
navObj.quantity += 1;
}
}
jQuery('#sectionprize'+id).html(totalPrize);
jQuery('#sectionquantity'+id).html(navObj.quantity);
})
})
} else {
this.eventChecked -= 1;
var totalPrize = 0;
navObj.quantity = 0;
jQuery('#list'+id).find('.catagory_list input:checked').each(function(){
var currentCategoryId = jQuery(this).val();
navObj.eventRegistrationService.getEventCatagoriesList(navObj.eventId)
.subscribe((res)=>{
for(let i in res.data){
var catList = res.data[i];
if(catList.id == currentCategoryId){
totalPrize += catList.fee
navObj.quantity += 1;
}
}
jQuery('#sectionprize'+id).html(totalPrize)
jQuery('#sectionquantity'+id).html(navObj.quantity)
})
})
this.checkedCatagory.pop(catagoryId);
let checkBoxList = '#appendtext #list'+id;
if(jQuery(checkBoxList+' :checkbox:checked').length == 0){
jQuery('#listFriends').append(jQuery('#FriendList'+id));
jQuery("#FriendList"+id+ " input[type='checkbox']").prop("checked", false);
sessionStorage.removeItem(id);
}
}
}
displaySelectedList(id, catagoryId){
this.eventChecked += 1;
let getselectList = sessionStorage.getItem('selectedFriends');
jQuery('#appendCatagoryList').append(jQuery('#catagorySelected'+catagoryId))
}
delete(id){
jQuery('#listFriends').append(jQuery('#FriendList'+id));
jQuery("#FriendList"+id+ " input[type='checkbox']").prop("checked", false);
console.log('asdasdsa',id);
//this.quantity = 0;
sessionStorage.removeItem(id);
}
I am trying to implement a simple pagination with directives in angularjs
Controller
//load the result server
$scope.getData = function(page) {
$http.post('/search?page='+page,searchParams).then(function (response) {
if(response.data.status){
$scope.arts = response.data.result;
$scope.currentPage = response.data.currentPage;
$scope.pageCount = response.data.pageCount;
}else{
$scope.arts = [];
}
},function (err) {
$scope.arts = [];
console.log(err);
});
}
When the HTTP call is finished i am using a directive is to print the pagination links.
HTML
<ul class="pagination pagination-circle pg-blue mb-0 paginate">
<pagination pagecount="pageCount" currentpage="currentPage"></pagination>
</ul>
Directive
This directive just build pagination links and returns to
app.directive('pagination',function () {
//custom directive for build pagination
return {
restrict: 'E',
scope: {
pagecount: '=',
currentpage: '='
},
link:function (scope,elem,attr) {
var element = angular.element(document.getElementsByClassName('paginate'));
var str ='';
var i = 1;
if (scope.currentpage > 5) {
i = +scope.currentpage - 4;
}
for (i; i<=scope.pagecount; i++) {
if (scope.currentpage == i) {
str+='<li class="page-item active"><a href="#" class="page-link" >'+i+'</a></li>'
}else{
str+=' <li class="page-item"><a class="page-link" href="" ng-click="getData('+i+')">'+i+'</a></li>'
}
if (i == (+scope.currentpage + 4)) {
break;
}
}
element.prepend(str);
}
};
})
But the problem is ng-click="getData()" in the anchor is not worked why its not getting worked.
the difference is getData() is defined in controller
I think href="" might be redirecting or refreshing your page, which is why ng-click is not getting triggered.
Try it as below.
href="#"
or
href="javascript:void(0)"
You need to pass that function to directive for access that function from directive.
Html
<ul class="pagination pagination-circle pg-blue mb-0 paginate">
<pagination pagecount="pageCount" get-data="getData()" currentpage="currentPage"></pagination>
</ul>
Directive
This directive just build pagination links and returns to
app.directive('pagination',function () {
//custom directive for build pagination
return {
restrict: 'E',
scope: {
pagecount: '=',
currentpage: '=',
getData: '&' /**This is how you can access function of controller**/
},
link:function (scope,elem,attr) {
var element = angular.element(document.getElementsByClassName('paginate'));
var str ='';
var i = 1;
if (scope.currentpage > 5) {
i = +scope.currentpage - 4;
}
for (i; i<=scope.pagecount; i++) {
if (scope.currentpage == i) {
str+='<li class="page-item active"><a href="#" class="page-link" >'+i+'</a></li>'
}else{
str+=' <li class="page-item"><a class="page-link" href="" ng-click="getData('+i+')">'+i+'</a></li>'
}
if (i == (+scope.currentpage + 4)) {
break;
}
}
element.prepend(str);
}
};
})
Now with my code i see all pages, but i want to limit the number of links.
If i have 10 pages, but i want to see only five:
1 2 3 4 5,
5 6 7 8 9.
How can i do that? This is plunk demo on part of my code
This is my controller:
var booksController = function () {
function all(context) {
var size = 2,
page = +context.params['page'] || 0;
templates.get('books')
.then(function (template) {
var booksRef = firebase.database().ref('books');
booksRef = booksRef.orderByChild('timestamp');
booksRef.on('value', function (snapshot) {
this.data = [];
snapshot.forEach(function (child) {
this.data.push(child.val());
}.bind(this));
var pagesLen = Math.ceil(data.length / size),
pages = [];
for (var i = 0; i < pagesLen; i+= 1) {
pages.push({
page: i,
displayPage: i + 1
});
}
data = data.slice(page * size, (page + 1) * size);
context.$element().html(template({
books: data,
pages: pages
}));
});
});
}
return { all: all };
}();
And my hadlebars template:
<section id="primary-content">
<div class="wrapper">
<h1 class="above">Books: </h1>
{{#each books}}
<h1>{{title}}</h1>
{{/each}}
<div id="medium">
</div> {{!--end medium--}}
<ul class="pagination">
{{#pages}}
<li>
<a class="btn btn-sm btn-default" href="#/books/{{page}}">{{displayPage}}</a>
</li>
{{/pages}}
</ul>
</div>
I am new to angular and I have been trying to make a pretty advanced directive.
Most of the directive works, but there are two issues presenting themselves currently and I think they are both related to the scope.
Here is my directive:
angular.module('test')
.directive('testKitDesigner', function () {
panels = [];
function bindEvents() {
console.log("bindingEvents");
var styledElements = ["piping", "panel-1", "panel-2", "panel-3", "panel-4", "panel-5", "panel-6", "panel-7", "panel-8", "panel-9", "panel-10"];
for (var i = 0; i < styledElements.length; i++) {
var target = document.getElementById(styledElements[i]);
console.log(target);
if (target) {
bindEvent(target);
}
}
};
function bindEvent(target) {
console.log(target);
target.bindEvent("ngClick", selectPanel);
};
function selectPanel(event) {
var path = angular.element(event.target);
panels = []; // Reset
if (attrs.testKitDesigner && attrs.testKitDesigner === 'advanced') {
panels.push(path);
} else {
var parent = path.parent();
var paths = parent.children();
for (var i = 0; i < paths.length; i++) {
var current = angular.element(paths[i]);
var tag = current[0].nodeName;
if (tag === 'path' || tag === 'polyline') {
panels.push(current);
}
}
console.log(panels.length);
}
};
return {
restrict: 'A',
templateUrl: 'Views/Templates/designer.html',
link: function (scope, element, attrs) {
scope.step = 0;
scope.sport = 'General';
scope.garment = 'Dress';
scope.design = 'Angelus';
scope.nextStep = function () {
scope.step++;
};
scope.setSport = function (sport) {
scope.sport = sport;
scope.setSvg();
scope.nextStep();
};
scope.setGarment = function (garment) {
scope.garment = garment;
scope.setSvg();
scope.nextStep();
};
scope.setDesign = function (design) {
scope.design = design;
scope.setSvg();
scope.nextStep();
};
scope.setSvg = function () {
var children = element.children();
var template = scope.sport + '/' + scope.garment + '/' + scope.design;
for (var i = 0; i < children.length; i++) {
var child = angular.element(children[0]);
if (child.hasClass('base')) {
child.attr('test-svg', template);
bindEvents();
return;
}
}
}
scope.setColor = function (color) {
for (var i = 0; i < panels.length; i++) {
var panel = angular.element(panels[i]);
var parent = panel.parent();
if (parent.attr('id') === 'piping') {
panel.css({
'stroke': color
});
} else {
panel.css({
'fill': color
});
}
}
};
scope.init = function () {
bindEvents();
};
scope.init(); // Set our defaults;
}
}
})
.directive('testSvg', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.contentUrl = 'Views/Templates/' + attrs.testSvg + '.svg';
attrs.$observe('testSvg', function () {
console.log(attrs.testSvg);
scope.contentUrl = 'Views/Templates/' + attrs.testSvg + '.svg';
});
},
template: '<div ng-include="contentUrl"></div>'
};
});
And the designer template looks like this:
<div class="base" test-svg="/General/Polo/Angelus">
</div>
<div class="options">
<h1>Simple kit designer</h1>
<div ng-hide="step != 0">
<p>Choose your sport.</p>
<ul class="list-unstyled">
<li><a href ng-click="setSport('Netball');">Netball</a></li>
<li><a href ng-click="setSport('General');">General</a></li>
</ul>
</div>
<div ng-hide="step != 1">
<p>Choose your garment.</p>
<ul class="list-unstyled">
<li><a href ng-click="setGarment('Dress');">Dress</a></li>
<li><a href ng-click="setGarment('Polo');">Polo</a></li>
</ul>
</div>
<div ng-hide="step != 2">
<p>Choose your design.</p>
<ul class="list-unstyled">
<li><a href ng-click="setDesign('Angelus');">Angelus</a></li>
</ul>
</div>
<div class="colors" ng-hide="step != 3">
<p>Click an area to change the colour.</p>
<ul id="colour-picker" ng-hide="!picking" class="colours">
<li><a class="colour-red" href ng-click="setColor('red');"></a></li>
<li><a class="colour-orange" href ng-click="setColor('orange');"></a></li>
<li><a class="colour-yellow" href ng-click="setColor('yellow');"></a></li>
<li><a class="colour-green" href ng-click="setColor('green');"></a></li>
<li><a class="colour-blue" href ng-click="setColor('blue');"></a></li>
<li><a class="colour-indigo" href ng-click="setColor('indigo');"></a></li>
<li><a class="colour-violet" href ng-click="setColor('violet');"></a></li>
</ul>
</div>
</div>
Now, what should happen, is that when the user selects a sport or garment or design, the test-svg attribute should change to the new values and then the relevant svg will be loaded.
The attribute does change, but the observe function never gets called. I am certain that this is something to do with the scope but I can't figure it out.
You are adding test-svg attribute during link phase of test-kit-designer. The test-svg attribute are not compiled as directive so the $observe is not triggered, read up on $compile to solve your problem.
However, I would recommend restructuring your code. Consider using test-svg in the template, exposing template from setSvg in test-kit-designer and two-way binding it to another variable in test-svg.