I'm trying to figure out how to link a button to open a new HTML component but no matter which method I've tried I cannot get it to work
First I tried a JS Function:
function openNext(){
window.location = '../nextpage.html';
}
on this button code:
<div class="content">
<button type="button" ng-click="openNext()" class="nextBtn mat-raised-button"> Next!</button>
</div>
But that didn't do anything, so tried a simple href link, still nothing.
So I thought it was something perhaps with the routing
Notice that you are only asking to load a component on the click of a button. Nothing simpler:
<div class="content">
<button type="button" ng-click="openNext()" class="nextBtn mat-raised-button"> Next!</button>
<the-html-component-you-want-to-open
ng-if="isMyComponentOpen == true"
></the-html-component-you-want-to-open>
</div>
In your controller:
$scope.isMyComponentOpen = false;
$scope.openNext = function() {
$scope.isMyComponentOpen = true;
}
On the other hand, if you are looking into switching pages in your application, or loading external dialogs/modals containing other components, then you are asking the wrong question.
Related
I am making a simple shopping website and i wanted to make a loop that created a display for all the items.
<script>
function Test(A) {
alert(A)
}
</script>
<body>
<h1>Hello</h1>
<button on:click = {Test("Hello")}>Test button</button>
</body>
Currently i am running this function and i am getting the alert when loading the website and then the button doesn't do anything. How do i fix this?
You want this:
<button on:click={() => Test("Hello")}>Test button</button>
By doing on:click={Test("Hello")}, you are saying "call Test when the page loads and add the return value as a click handler on the button." This is why the function is only called once. Instead, you want to pass a reference to a function -- this way, the function is called on each click.
I am trying to make the button redirect to http://www.hub.test.ru 500 milliseconds after being clicked, but it's not quite working.
How do I fix it?
Here is my code:
<div class="center">
<button class="bubbly-button" onclick="setTimeout("location.href = 'http://www.hub.test.ru';", 500);">Hub</button>
</div>
setTimeout accepts a function and a delay. ""location.href = 'http://www.hub.test.ru';"" is not a function.
Instead, wrap it in an arrow function. Your JS should look like this:
setTimeout(()=>{location.href = 'http://www.hub.test.ru'}, 500);
Result:
<div class="center">
<button class="bubbly-button" onclick="setTimeout(()=>{location.href = 'http://www.hub.test.ru'}, 500);">Hub</button>
</div>
However, you should not be using inline event handlers. I recommend using addEventListener:
document.querySelector('.bubbly-button').addEventListener('click', ()=>{
setTimeout(()=>{location.href = 'http://www.hub.test.ru'}, 500);
})
<div class="center">
<button class="bubbly-button">Hub</button>
</div>
in angular 2 there is a button that I want when click on it a div appear.
<button class="dokme" type="button" (click)="onSelect(signUp)" >Register</button>
<div *ngIf="selectedBtn">
<div>Hello</div>
</div>
and I couldn't complete my component, because I don't know how I should write it:
onSelect():void{
this.selectedBtn=...(?)}
Actually I know it can be similat to "Hide the empty detail with ngIf" in angular tutorial Hide the empty detail with ngIf, but the problem is I can't change that code to what I want. Because in that example there is hero and I don't know what should I replace it.
please help me in the simplest way it would be your kind.
The expression you pas into (click) will be executed when you click on the button.
If the expression you pass into *ngIf is true, the content inside the element will be present on the page. Otherwise, it will not.
So, what you ned to do is to change the value of selectedBtn when (click) event happens.
Template
<button class="dokme" type="button" (click)="onSelect()" >Register</button>
<div *ngIf="selectedBtn">
<div>Hello</div>
</div>
Component
onSelect() {
this.selectedBtn = true
}
Just set the variable to true
onSelect() {
this.selectedBtn = true;
}
ngIf works in a simmilar way that if statement in other programming languages so it checks for condition and if it is true (or if a function called in condition returns true). In this case, your ngIf is linked to component variable selectedBtn so only what you need to do is set it to true:
this.selectedBtn = true;
More easily, you can achieve the sane goal without creating new function in your controller.
<button class="dokme" type="button" (click)="selectedBtn=true" >Register</button>
<div *ngIf="selectedBtn">
<div>Hello</div>
</div>
Or if you want the button to toggle :
<button class="dokme" type="button" (click)="selectedBtn=!selectedBtn" >Register</button>
<div *ngIf="selectedBtn">
<div>Hello</div>
</div>
I'm following this angular recipes page for adding a modal dialog to my ui. It suggests the following markup, which I've added to one of my views.
... html for my view is here ...
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
... etc, from the recipe doc
</div>
What I want to see is my view, plus an "Open Modal" button on the bottom and nothing else. What I see instead is the button and the content of the modal already visible on the page.
The very next words in the recipe doc are:
Note that even though we don’t specify it explicitly the modal dialog
is hidden initially via the modal attribute. The controller only
handles the button click and the showModal value used by the modal
attribute.
Why is my modal mark up initially visible on the page? I think I have installed angular-ui properly... in my index.html:
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
And in my app JS:
angular.module('MonteAdmin', [
...
'ui.bootstrap',
...
])
That recipes page is likely out of date. At the time of the writing it might have been possible to pass a variable showModal to the modal directive to reveal or hide it. In your controller, you would have been able to show the modal by setting the scope variable showModal to true or false:
$scope.showModal = false;
$scope.open = function() {
$scope.showModal = true;
}
The current version does not work that way. You will have much better experience if you read the official documentation for the library at Angular UI Bootstrap
If you are using the latest version of the library, the directive is no longer modal but uib-modal. In addition, you have a bit more work to do to implement your modal.
Modal markup should be in a script tag, with a type set to text/ng-template as per the official example:
<script type="text/ng-template" id="stackedModal.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
</div>
<div class="modal-body" id="modal-body-{{name}}">
Having multiple modals open at once is probably bad UX but it's technically possible.
</div>
</script>
To actually open the modal, your button click should trigger the following example function:
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
appendTo: parentElem,
resolve: {
items: function () {
return $ctrl.items;
}
}
});
You must also define a controller for the modal, itself:
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.items = items;
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function () {
$uibModalInstance.close($ctrl.selected.item);
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
All of this code is found on the official documentation for Angular UI Bootstrap
I have a button in a div with a controller named controllerBubble. I would like this button show a div controlled by an other controller : controllerDependance. Is it possible to wrap the button in a div and the hidden div with same controller but it doesn't works.
This is my HTML :
<div ng-app="app">
<div ng-controller="mainController" ng-show="myvalue" class="ng-cloak">
<div id="panelSap" ng-controller="controllerDependance">
My hidden div
</div>
</div>
<div id="containerDetailsTicket" class="clearfix" ng-controller="controllerBubble">
Div which contains the button
<div id="containerButton" ng-controller="mainController">
<button ng-click="showAlert()">Afficher</button>
</div>
</div>
</div>
This is my controllers :
var d3DemoApp = angular.module('app', [])
d3DemoApp.controller('controllerBubble', function() {
});
d3DemoApp.controller('controllerDependance', function($scope) {
$scope.myvalue = false;
$scope.showAlert = function() {
$scope.myvalue = true;
};
});
d3DemoApp.controller('mainController', function AppCtrl($rootScope, $scope) {
$scope.myvalue = false;
$scope.showAlert = function() {
$scope.myvalue = true;
};
});
I created a Plunker
Any idea what's happening ? Someone can do work on the Plunker. I Hope someone can help me.
Thanks a lot.
Look, not sure why you want to have such a nesting of controllers but I am pretty much sure that it ain't good. I'll tell you why. In your code, you are trying to use same controller at two DOM ele. So, they are having 2 different scope $scope and so they are not working.
I have made a working plunker for you by using $rootScopebut its not a clean approach as you'll be having a global variable ($rootScope.myvalue) declared. Declaring global variable should always be avoided unless forced to.
Another suggested approach in plunker is to use $emit as event notifier. The $on would take appropriate action when the event is triggered. You can even pass values that too to different controllers.
Service can also be used to pass values among controllers .
Let me know if you need more info
Update 1:
If you want to remove some div (not hide) then you should try to use ng-if.