I'm trying to send the id of a element from html to the function, this because it changes in the ts, so I have a click function but function(this.id) doesnt work
here is my code
the html
<button id="btnNext" class="btn" (click)="nextGeneral(this.id)">next</button>
the ts
nextGeneral(id:number){
alert(id)
}
If I understand correctly, you want the id attribute from the <button> (i.e. btnNext) to be passed into the nextGeneral() function (although this function is currently expecting a number not a string, so correct me if I'm wrong).
This is how you could achieve that dynamically:
.html
<button id="btnNext" class="btn" (click)="nextGeneral($event)">next</button>
.ts
nextGeneral(event: PointerEvent){
const id: string = (event.target as HTMLElement).id
alert(id)
}
this is not available inside a template. You might want to use 'btnNext' as the parameter instead, but its too vague from your description.
So replace the template's (click)=nextGeneral(this.id) with (click)=nextGeneral('btnNext') and it will work and also might fit your requirements. Does it fit?
Stackblitz
One of the cleanest way to achieve it is by using template reference in angular.
<button id="btnNext" #myButton class="btn" (click)="nextGeneral(myButton)">next</button>
Inside your nextGeneral
nextGeneral(button: HTMLButtonElement) {
alert(button.getAttribute('id'));
}
Running Solution - https://stackblitz.com/edit/angular-ivy-ohxfa5?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
My problem is that in angular 4 there are few ways to data bind with HTML to TS like {{myText}}, [], () and other than those we can use [innerHTML]="myText"
what is the best way to bind simple variable to HTML among {{}}, [innerHTML] ?
Try like this :
<div [innerHTML]="htmlString"></div>
in typescript file :
htmlString: string = "Hello world"; <!-- if want to display string -->
htmlString: string = "<h1>Hello world</h1>"; <!-- if want to display html element -->
Bind it with {{yourText}} is it is not containing any HTML markups
Bind it with [innerHTML] = "youtText" if it has any HTML markups
I'm having a problem with sourcing an image with angular 4. It keeps telling me that the image is not found.
Folder structure:
app_folder/
app_component/
- my_componenet
- image_folder/
- myimage
I am using the image in mycomponent. If in mycomponent, I insert it directly with:
<img src="img/myimage.png"
This works fine, but I checked the html and it creates a hash. But my images have to be dynamically added to the html because they are part of a list. So, if I use:
<img src="{{imagePath}}">
which is basically img/myimage.png, it doesn't work. If I use:
<img [src]="imagePath">
It says NOT FOUND (htttps://localhost/img/myimage.png). Can you help me?
AngularJS
<img ng-src="{{imagePath}}">
Angular
<img [src]="imagePath">
Copy your images into the assets folder. Angular can only access static files like images and config files from assets folder.
Try like this: <img src="assets/img/myimage.png">
Create image folder under the assets folder
<img src="assets/images/logo_poster.png">
Angular 4 to 8
Either works
<img [src]="imageSrc" [alt]="imageAlt" />
<img src="{{imageSrc}}" alt="{{imageAlt}}" />
and the Component would be
export class sample Component implements OnInit {
imageSrc = 'assets/images/iphone.png'
imageAlt = 'iPhone'
Tree structure:
-> src
-> app
-> assets
-> images
'iphone.png'
in your component assign a variable like,
export class AppComponent {
netImage:any = "../assets/network.jpg";
title = 'app';
}
use this netImage in your src to get the image, as given below,
<figure class="figure">
<img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
#Annk you can make a variable in the __component.ts file
myImage : string = "http://example.com/path/image.png";
and inside the __.component.html file you can use one of those 3 methods :
1 .
<div> <img src="{{myImage}}"> </div>
2 .
<div> <img [src]="myImage"/> </div>
3 .
<div> <img bind-src="myImage"/> </div>
Well, the problem was that, somehow, the path was not recognized when was inserted in src by a variable. I had to create a variable like this:
path:any = require("../../img/myImage.png");
and then I can use it in src. Thanks everyone!
<img src="images/no-record-found.png" width="50%" height="50%"/>
Your images folder and your index.html should be in same directory(follow following dir structure).
it will even work after build
Directory Structure
-src
|-images
|-index.html
|-app
Angular can only access static files like images and config files from assets folder. Nice way to download string path of remote stored image and load it to template.
public concateInnerHTML(path: string): string {
if(path){
let front = "<img class='d-block' src='";
let back = "' alt='slide'>";
let result = front + path + back;
return result;
}
return null;
}
In a Component imlement DoCheck interface and past in it formula for database. Data base query is only a sample.
ngDoCheck(): void {
this.concatedPathName = this.concateInnerHTML(database.query('src'));
}
And in html tamplate <div [innerHtml]="concatedPathName"></div>
You have to mention the width for the image as default
<img width="300" src="assets/company_logo.png">
its working for me based on all other alternate way.
An important observation on how Angular 2, 2+ attribute bindings work.
The issue with [src]="imagePath" not working while the following do:
<img src="img/myimage.png">
<img src={{imagePath}}>
Is due your binding declaration, [src]="imagePath" is directly binded to Component's this.imagePath or if it's part of an ngFor loop, then *each.imagePath.
However, on the other two working options, you're either binding a string on HTML or allowing HTML to be binded to a variable that's yet to be defined.
HTML will not throw any error if you bind <img src=garbage*Th_i$.ngs>, however Angular will.
My recommendation is to use an inline-if in case the variable might not be defined, such as <img [src]="!!imagePath ? imagePath : 'urlString'">, which can be though of as node.src = imagePath ? imagePath : 'something'.
Avoid binding to possible missing variables or make good use of *ngIf in that element.
Check in your.angular-cli.json under app -> assets:[] if you have included assets folder.
Or perhaps something here: https://github.com/angular/angular-cli/issues/2231, can help.
You must use this code in angular to add the image path. if your images are under assets folder then.
<img src="../assets/images/logo.png" id="banner-logo" alt="Landing Page"/>
if not under the assets folder then you can use this code.
<img src="../images/logo.png" id="banner-logo" alt="Landing Page"/>
Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes.
For example :
'my-image-name.png' should be 'myImageName.png'
'my image name.png' should be 'myImageName.png'
If you put the image in the assets/img folder, then this line of code should work in your templates :
<img [alt]="My image name" src="./assets/img/myImageName.png'">
If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.
Add in angular.json
"assets": [
"src/favicon.ico",
"src/assets"
],
And then use it like this: <img src={{imgPath}} alt="img"></div>
And in ts: storyPath = 'assets/images/myImg.png';
Try This:
<img class="img-responsive" src="assets/img/google-body-ads.png">
This was my problem, I added src/app/types/types.d.ts with content:
declare module '*.png' {
const value: any
export default value
}
declare module '*.jpg' {
const value: any
export default value
}
declare module '*.svg' {
const value: any
export default value
}
I have an html form ( ) , I want that it is displayed when I click on a button.
the declaration of the form is the following :
<div id = "formulaire" class="gl" >
and the button is :
Edit
I use angularjs in my code . Please help me.
It better to use a simple variable than a function in this case. I would also recommend using controller scope when setting variables instead of the application scope so you don't run into issues with the variables when your application becomes large.
I also picked data-ng-click over ng-click because it will allow the html to validate correctly (which can be checked using the W3's validator).
Try this...
"use strict";
angular.module('myApp', [])
.controller("myController", function() {
this.edit = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div data-ng-app="myApp" data-ng-controller="myController as ctrl">
Edit
<div id="formulaire" class="gl" data-ng-show="ctrl.edit">
<form>
<fieldset>
<label>Field:</label>
<input type="text" />
</fieldset>
</form>
</div>
</div>
Have you looked into the ngShow directive? It ables you to show or hide a DOM element depending on whether the attribute expression resolves to a truthey or falsey value.
Add model change on click
Edit
And then display the form if model is true
<div id = "formulaire" class="gl" ng-if="show">
I am searching for the same answer that was given here:
HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?
But I want to do this in MVC4.
I got the following view:
#using (Html.BeginForm("Kompetens", "KumaAdmin"))
{
<div class="three columns" style="margin-right: 627px;">
<h6>Kompetens</h6>
<div style="width:456px;"> #Html.ListBox("kompetensId", (SelectList)ViewBag.KomId)</div><br/>
<h6>Lägg till kompetens</h6>
<div class="focus">
#Html.EditorFor(mm => mm.KompetensTest)
</div>
<input type="submit" style="margin-right: 205px;" value="Skapa"/><br/><br/>
</div>
}
Since this is my textbox:
#Html.EditorFor(mm => mm.KompetensTest)
I don't know how to apply the "onfocus" & onblur attributes on it like in the link above.
You need to create an Editor Template. Because the Html.EditorFor does not have the "object htmlattributes" parameter to do "new { onfocus = "js here" }".
Over the Views>Shared,
Create a folder called EditorTemplates
Then, you create a view using #model string/whathever this object is. Name the file as you want.
When you put the #model on a view you are specifying that it only accepts this type mas a model.
Inside this view, you create a Html.TextBox (not TextBoxFor) and voila.
On the Html.EditorFor method there is also a way to set which editor template you want to use. Choose the one you created by typing its name like this:
#Html.EditorFor(mm => mm.KompetensTest, "GreyedTemplate")
Code for the View I named as: GreyedTemplate.cshtml
#model string
#Html.TextBox("", Model, new { onfocus = "", onclick="" })
Note that the first parameter is empty. This was done on purpose, because when you use EditorFor(mm => mm.KompetensTest,"GreyedTemplate") it uses KompetensTest as the name of the field automatically.
You want to use the placeholder html attribute (http://www.w3schools.com/tags/att_input_placeholder.asp)
Something like #Html.EditorFor(mm => mm.KompetensTest, new { placeholder = "Text" })
#Gmoliv It worked finaly! I googeld arround and found that the "Editfor" does not have access to html attributes. Although I found "TextBoxFor" which has access to them, so the soloution is:
#Html.TextBoxFor(mm => mm.Profile, new { placeholder = "Ange Profil" })
#Pedro I really tried hard to make it work but the problem was that i could not get the value to be set so it was alwasy empty, i treid setting it in the view and in the templateView and it simply did not take. If you could i would appreciate a full code sample
Thanks alot!