Load template on click angular - javascript

Have tried loading the template on click of the button but some where approach is wrong templates are not loading.
Here adding the tried plunker:
Plunker
Can anyone let me know where had gone wrong.

I think problem is following:
You haven't called the function. you have to say cClick().
You said:-
<button ng-model='template' ng-click='cClick'>Click</button>
try this:-
<button ng-model='template' ng-click='cClick()'>Click</button>

Related

Call Angular2 component function from HTML by clicking on a button

I am pretty much new in TypeScript and Angular2. I have a problem when I want to call a component function by clicking on the button in HTML.
If I use **onclick="locateHotelOnMap()"** on HTML button element I get this error:
ReferenceError: locateHotelOnMap is not defined
at HTMLButtonElement.onclick
Can someone help me with this?
In Angular1, I've called my controller funtions using directive ng-click.
How should I do it now?
Thanks in advance.
you need to call the function like this (click)="componentFunctionName()" See below example.
<button (click)="locateHotelOnMap()">Click Me!</button>
In Angular 2, the events can be called using () around normal javascript handlers like
<button (click)="locateHotelOnMap()">Hello World</button>

How to display a div tag if any form errors exist in angular?

I know how to do one off validations in angular. What I am looking to do is to display a warning at the top of the page if any errors exist in the below forms that were trying to submit. How do I accomplish this?
Is there a form.$errors? For if any error occurs on the page?
So can I do something like this?
<div id="errorInfoHeader" ng-show="formName.$errors">
Yes, you're on the right track:
formName.$invalid
is what you're looking for.
<div id="errorInfoHeader" ng-show="formName.$invalid">
See this plunkr that demonstrates what you're trying to do:
http://plnkr.co/edit/9Ny58FY9rv74sxXryKmh?p=preview
You can use $valid like this:
<div id="errorInfoHeader" ng-show="formName.$valid">

ng-click Vs click event

I am working on a website based on angular js.
Currently, I have written about 5000 line code in angular js.
So I have to make some changes without touching my angular js.
I want something like this:
$(document).on('click','#buttonid',function(){
//performing some necessary task then call ng-click method
ngclickmethod();
});
HTML Code:
<a ng-click="ngclickmethod()" id="buttonid">
Please advise how can I achieve that.
Many Thanks
So it looks like you are trying to call an angular function outside of angular. Try this..
angular.element(document.getElementById('yourControllerElementID')).scope().ngclickmethod();
this will call the method you want. Be sure the controller element ID is the controller that contains the ngclickmethod function

Show/Reveal Content

I'm just starting out with Javascript. I cannot figure out for the life of my why a basic function won't work. I'm trying to make so when you click the button, the "World" disappears.
I'm not really seeing a logical reason as to why this shouldn't work; I'm basically copying from w3schools introductory JS tutorials.
I thought it was an issue with the new "hidden" attributed in html5, but I tried the usual "style="display: none;"" route too and it didn't work.
Here is the JSFiddle: http://jsfiddle.net/6qDap/966/
Thanks in advance for helping me with such a simple question!
HTML:
<button type="button" id="my_button" onclick="hide()">Hello</button>
<div id="my_div">World</div>
JS:
function hide()
{
document.getElementById('my_div').setAttribute('hidden');
}
I just realized your code should work correctly. You should try putting the script in the head to make sure it loads before the DOM.
Ignore my previous answer:
I think you're looking for display: none
Here's a jsfiddle to show an example
The attribute probably needs to be set to a value, try:
document.getElementById('my_div').setAttribute('hidden', 'hidden');
Or alternatively, set the style attribute.
document.getElementById('my_div').setAttribute('style', 'visibility: hidden;');
To make it work on jsfiddle you should load the javascript on
No wrap - in - <head> or
No wrap - in - <body>
function revealPhotos() {
document.getElementById("div_2008").style.display = "none";
}
Here is your updated fiddle

Ng-include is only appearing after the second time

So I have a dialog directive that I'm using in a template. I'm doing something like:
<my-dialog>
<div>
<ng-include src="'myTemp.html'"></ng-include>
</div>
<my-dialog>
For some weird reason when I open my dialog, nothing appears when it's opened the first time. The second time populates my dialog with myTemp.html. Do I need to do things with $templateCache to notify angular about myTemp.html so that it works the first time?
Sorry I did have the '' around the src, I just forgot to add it for this submission =/.
ng-include src is expecting a variable, isn't it?
So, I'm guessing that the src in your example should be wrapped in ''. So, it will be:
<ng-include src="'myTemp.html'"></ng-include>
See if that helps.
Here's the official documentation: https://docs.angularjs.org/api/ng/directive/ngInclude
src in the ng-include tag expects an expression. so to pass it a string you need to put quote around it:
<ng-include src="'myTemp.html'"></ng-include>

Categories

Resources