I am new to angular and I am currently using Angular 7. I can't add the variable to data-link property.
In my ts file I have a variable :
export class PortfolioComponent implements OnInit {
var = "#item1";
}
And in HTML I have:
<li class="item group1" data-link="{{var}}">
text
</li>
But this doesn't work, and shows the following error:
Can't bind to 'link' since it isn't a known property of...
The var is reserved word in javascript - typescript so you can't use it like this.
The var statement declares a variable.
You can find all reserved words here enter link description here
This is how your code will work:
TS
export class PortfolioComponent implements OnInit {
element = "#item1"; // Change var to anything not reserved
}
HTML
<li class="item group1" data-link="{{element}}">
text
</li>
Related
I've declared a simple string variable in razor page to store a dynamic id of a div.
#{
int i = 0;
string divId = "Ratting_"+#i;
}
and used it like
<div id="#divId">
Test Div
</div>
But when I'm accessing it in javascript like this
<script>
var id = #divId;
console.log(id);
</script>
It represent a html element instead of a string. I know if I put the #divId inside a '' then will put string. But my question how this #divId just identified the html element.
On browser console I'm getting this
I'm trying to get Angular Dart to display a link in a tag from an HTML string.
At first, I tried to just set the inner HTML of the container to be the HTML string, but that didn't work, so I then I tried to use Dart's DomSanitizationService class, but that also doesn't seem to work.
What I have so far is
Dart:
class SomeComponent {
final DomSanitizationService sanitizer;
SafeUrl some_url;
SomeComponent(this.sanitizer) {
some_url = this.sanitizer.bypassSecurityTrustUrl('https://www.google.com');
}
String html_string = '''
<a [href]="some_url">Hi</a>
''';
String get Text => html_string;
}
HTML:
<div [innerHTML]="Text"></div>
The error I'm getting is Removing disallowed attribute <A [href]="some_url">. The text Hi seems to show, but there is no link anymore.
Just as you bypassed URL sanitanization, you have to bypass HTML sanitanization as well using bypassSecurityTrustHtml to return markup.
https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustHtml
I'm trying to do the following:
import 'dart:html';
import 'package:angular/angular.dart';
import 'package:markdown/markdown.dart' as md;
#Directive(selector: '[markdown]')
class MarkdownDirective {
#Input('markdown')
String marked;
MarkdownDirective(Element el) {
final html = md.markdownToHtml(marked);
print(el.innerHtml); // this is empty
print(html); // obv null
el.setInnerHtml(html);
}
}
I'm expecting innerHtml to have the value of the "markdown" content but it is null before it enters this directive.
<div markdown>{{report.summary}}</div>
I've tried this too and no luck:
<div [markdown]="'{{report.summary}}'" >{{report.summary}}</div>
Got interpolation ({{}}) where expression was expected at column 1 in ['{{report.summary}}'] - not understanding completely why it doesn't work./
The error message is not related to directive at all, but to it's use in <div [markdown]="'{{report.summary}}'" >{{report.summary}}</div>.
Use either [markdown]="report.summary" or markdown="{{report.summary}}", but not both. The two variants I posted are equivalent (see here).
just change how you set the markdown attribute... try:
<div markdown="**my message**"></div>
or
<div [markdown]="myVar"></div>
// somewhere in your class
String myVar = '**my message**';
Dart automatically blocks unsafe content. You would need to specifically bypass security. One way you can do that is here: https://webdev.dartlang.org/api/angular/angular.security/DomSanitizationService-class
I have a Component and I use it in this way:
<ImgList>
<img src="../assets/img/file1.jpg" width="30px" height="20px" />
<img src="../assets/img/file2.jpg" width="30px" height="20px" />
</ImgList>
I want in export class ImgListComponent to take a reference to the first image, I tried:
#ContentChildren('img', {read: ElementRef}) imgEls: QueryList<ElementRef>;
and in:
ngAfterContentInit() {
console.log(this.imgEls.toArray[0])
}
but console displays undefined.
The first parameter of ContentChild and ContentChildren isn't a CSS selector but a component reference. You can create a fake component to reference all the images, like:
#Directive({selector: 'img[foo]'}) exports class ImageDirective {}
then you can implement your ContentChildren in this way:
#ContentChildren(ImageDirective) imgEls: QueryList<ImageDirective>;
remember to declare the new directive in your module.
I have created a folder in Umbraco and I would like to display a random image from that folder on my page.
I found a solution from a few years ago which was giving me compile errors
dynamic folder = Library.MediaById(1054);
var randomImage = folder.Children.Where("nodeTypeAlias = \"Image\"").Random();
I found that I have to add the proper inherits in my file
#using umbraco.MacroEngines
#inherits DynamicNodeContext
but this it gives me an error because I already have a #model I'm using in the first line
The 'inherits' keyword is not allowed when a 'model' keyword is used.
Thanks for any help
You can take a look and learn from sample macro partial views pre-installed in each Umbraco website. There is a snippet called List Images From Media Folder.
The code of the default snippet looks like this:
#inherits Umbraco.Web.Macros.PartialViewMacroPage
#*
Macro to display a series of images from a media folder.
How it works:
- Confirm the macro parameter has been passed in with a value
- Loop through all the media Id's passed in (might be a single item, might be many)
- Display any individual images, as well as any folders of images
Macro Parameters To Create, for this macro to work:
Alias:mediaId Name:Select folder with images Type:Single Media Picker
*#
#{ var mediaId = Model.MacroParameters["mediaId"]; }
#if (mediaId != null)
{
#* Get all the media item associated with the id passed in *#
var media = Umbraco.Media(mediaId);
var selection = media.Children("Image");
if (selection.Any())
{
<ul>
#foreach (var item in selection)
{
<li>
<img src="#item.umbracoFile" alt="#item.Name" />
</li>
}
</ul>
}
}
We need to remember to add the parameter to macro if we're using them there.
Then we can use both: Media or TypedMedia helper methods to retrieve folder (which is typical media item with different type), despite of the required returned type. I usually use TypedMedia to be able to operate on strongly typed object and preview properties in Visual Studio.
If we create macro properly and insert it on the template using code like this (with proper folder ID):
#Umbraco.RenderMacro("Test", new { mediaId="1082" })
we should see a list of images from this folder (all of them at that moment).
The final part is almost the same as you previously did it, but we need to adjust it a little bit. My final code and suggestion is below:
#inherits Umbraco.Web.Macros.PartialViewMacroPage
#{
var folderId = Model.MacroParameters["mediaId"];
if (folderId != null)
{
var media = Umbraco.TypedMedia(folderId);
var rand = new Random();
var imagesInFolder = media.Children("Image");
if(imagesInFolder.Any()) {
var pick = imagesInFolder.ElementAt(rand.Next(0, imagesInFolder.Count()));
if (pick != null)
{
<img src="#pick.GetCropUrl()" alt="#pick.Name" />
}
}
}
}
Let me know if it solved your problem :)