I need to pass the id of the element inside the typescript with [theID] of the :
<ng-template #popTitle let-language="language">Error</ng-template>
<ng-template #popContent let-greeting="greeting">{{texto}}!</ng-template>
<a
type="button" class="btn btn-outline-secondary ml-5" placement="top"
[ngbPopover]="popContent" [popoverTitle]="popTitle"
triggers="manual" [theID]="#p1" #p1="ngbPopover" (click)="toggleWithGreeting(p1, 'Bonjour')">
</a>
To be able to access from the parent the parameter that will remain inside
In short, the question is how can I use [var] = "# id"
The practical use that I am going to give it is in the toggleWithGreeting function where when invoking it from another place I have to pass the id of the element, for this I plan to put it inside in an input and call it from the father
I used an ViewChild()
#ViewChild("id") p1:PopoverComponent;
I've given it too many laps and I haven't fallen for the obvious
Related
I have this template
<ng-template #thumbnailTemplate let-context="thumbnailContext">
<div id="{{context.divId}}">
<button type="button" data-toggle="modal" (click)="showEnlargeImage(context)">
<img id="{{context.imgId}}" src="{{context.imgSrc}}"/> <!-- this will have width, height=80-->
</button>
<a *ngIf="this.isEditing" href="#" id="{{context.closeId}}" onClick="deleteThumbnailfromContainer(context)"></a>
</div>
</ng-template>
The <a> is shown dynamically depending on the value of isEditing. This part works fine. On clicking <a>, I expect that deleteThumbnailfromContainer gets called and the page doesn't redirect because deleteThumbnailfromContainer returns false. But the page gets refreshed. I also think that deleteThumbnailfromContainer is not getting called because deleteThumbnailfromContainer has an alert which doesn't pop up.
deleteThumbnailfromContainer(thumbnailContext:ThumbnailContext){
console.log("delete thumbnail clicked ");
let index = this.thumbnailContainerRef.indexOf(thumbnailContext.viewRefId);
console.log("deleting index "+index);
this.thumbnailContainerRef.remove(index);
alert();
return false;
}
The generated html looks like follows (looks alright to me).
<a _ngcontent-c9="" href="#" onclick="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
I can't figure out why the code isn't working correctly here.
I think you should try this out.
<a *ngIf="this.isEditing" href="javascript:void(0)"
(click)="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
I have a button like below:
<a href="{{ relatedEntry.url }}" data-target="http://go.redirectingat.com/?id=120996X1581244&url={{ affiliateLink|url_encode }}&sref={{ entry.url|url_encode }}" target="_blank" class="btn btn-voucher btn-lg btn-block popunder" onclick="$.popunder(this);">
Reveal Code & Visit<i class="material-icons">chevron_right</i>
</a>
But I'm trying to add a Google event tracking code as well within this button:
onclick="ga('send', 'event', 'Deal', 'Deal Click');"
I've added both, but this seems to break the popunder.
You can trigger 2 or more functions on a trigger, separated by semicolons.
Here is a quick prototype where a button click will call two separate functions:
<button onclick="a();b();">Double Action</button>
<div id="a"></div>
<div id="b"></div>
javascript functions:
function a(){
document.getElementById('a').innerHTML ='A';
}
function b(){
document.getElementById('b').innerHTML = 'B';
}
here is a working jsFiddle
The only catch is that the first function does not cause an action that prevents calling or processing of the next function(s). Like redirect url, or fatal exception.
I am working on a book collection program and I have a static sidebar which will have options and when you click on some of the options it sends you to a url.
I can't get the going to url part to work.
So I just have a sidenav, then a menu item called Store and then a submenu with an item called Amazon.
There may be typos, as I typed this as the code is on a different computer. Basically, how do I get where a submenu will send me to a url? I can do it from the menu item.
<md-sidenav #sidenav mode="side" opened="true" class="app-sidenav">
<md-nav-list>
<button md-list-item>Book Choices</button>
<button md-button>
<span md-list-item
[mdMenuTriggerFor]="amazon">Stores</span></button>
</md-nav-list>
</md-sidenav>
<md-menu #amazon>
<button md-button>
<span md-menu-item>
<span (click)="'http://amazon.com'">Amazon</span>
</span>
</button>
</md-menu>
You cannot navigate to a url using this expression (click)="'http://amazon.com'". You need to use window.location.href or window.open method. Here is how you can do that:
<md-menu #amazon>
<button md-button>
<span md-menu-item>
<span (click)="gotoUrl('http://www.amazon.com')">Amazon</span>
</span>
</button>
</md-menu>
in your typescript code, define the gotoUrl() method:
gotoUrl(url:string){
window.location.href=url;
}
if you want to open the url in a new tab in the browser, then use this code:
gotoUrl(url:string){
window.open(url, "_blank");
}
So while you can use (click) events in angular, if all you need to do is navigate to another url you can always just use good old html and an anchor link. If that's all your looking for keep it simple
<md-menu #amazon>
<button md-button>
<a md-menu-item href="http://amazon.com">
Amazon
</a>
</button>
</md-menu>
If you still want to use a click you can, and the answer below was correct it just had a typo
So add a method in your component like:
goToUrl(url: string) {
window.open(url);
}
And then in your view
<md-menu #amazon>
<button md-button>
<span md-menu-item (click)="goToUrl('http://amazon.com')">
Amazon
</span>
</button>
</md-menu>
this thing (click)="'http://amazon.com'" does nothing at all since you just passed a string.
have you tried (click)="window.open('http://amazon.com', '_blank')"?
or create a function that does the window.open(parameter)
openlink(url: string)
{
window.open(string, "_blank");
}
// HTML attribute
(click)="openlink('http://amazon.com')"
I have a component that show/hide element by clicking a button.
This is my html
<div *ngFor="let history of histories | sortdate: '-dateModified'">
<p><b>{{ history.remarks }}</b> - <i>{{history.dateModified | date:'short'}}</i></p>
<a href="google.com"
[class.datatable-icon-right]="history.$$expanded"
[class.datatable-icon-down]="!history.$$expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(history)"></a>
<!-- hide/show this by clicking the button above.-->
<div *ngFor="let step of history.steps; let i = index">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
<hr />
</div>
and my .ts
toggleExpandRow(row) {
console.log('Toggled Expand Row!', row);
//row
return false;
}
trying to search but, can't find any same sample.
On jquery, I can do this, but on Angular2, I am having hard time to figure this.
There are two options:
1- You can use the hidden directive to show or hide any element
<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
2- You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled.
<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
Use the ngIf in your repeated rows. Create a boolean property called showStep to indicate whether the row should be expanded or not.
<div *ngFor="let step of history.steps; let i = index" ngIf="history.showStep">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
Then, in your .ts file:
toggleExpandRow(history) {
history.showStep = !history.showStep
//note the same porperty of showStep that is used in your html
}
Extra:
In fact, to save a few lines of codes, you don't even need the toggleExpandRow function at all. You can do it inline in your html:
//other attributes omitted for brevity
<a (click)="history.showStep = !history.showStep">
This drives me crazy. I want to pass a string literal as a parameter to a function in HTML onclick property containing a double quote.
My HTML element looks like this:
<button onclick = "ok_button_click(""Harry Potter "")" type="button" class="btn btn-default">ok</button>
But when I load the page and open it by Inspect Element, I see a space inserted between the first quote resulting in this:
<button onclick = "ok_button_click(" "Harry Potter"")" type="button" class="btn btn-default">bad</button>
Why does the browser insert a space ???
If you are trying to pass a string value with quotes then you have to use " like this:
<button onclick = "ok_button_click('"Harry Potter"')" type="button" class="btn btn-default">bad</button>
If you just want to pass in a string literal you can just use a single quote (or the opposite of what the attribute started with) like this:
<button onclick = "ok_button_click('Harry Potter')" type="button" class="btn btn-default">bad</button>
That is because when the DOM is being parsed the browser uses " as delimiters, so in your case it is assigning ok_button_click( to the attribute onclick and Harry Potter as a separate (and unknown) attribute.
A better way of writing this code would be mixing single and double quotes as in:
<button onclick="ok_button_click('Harry Potter')" type="button" class="btn btn-default">ok</button>
A good start on HTML debugging is to run it through a validator, like in https://validator.w3.org/#validate_by_input
Try :
<button onclick = 'ok_button_click("Harry Potter")' type="button" class="btn btn-default">ok</button>