How to render a hyperlink in a component template in Angular 6? - javascript

I have an Angular 6 application where a component is used to display a message on the page. Some of the messages contain hyperlinks embedded in them (in HTML markup). However, when the messages are displayed on the page, they are getting displayed in plain text (hyperlinks are not rendered, but the markup is displayed to the user instead).
You can visit Stackblitz # https://stackblitz.com/edit/angular-jj5nms for a sample application that I created to explain the issue.
Expected message display:
Click here.
Actual message display:
Click <a href='http://www.google.com'>here</a>

If you want to render HTML a then you need to bind to the innerHTML property of an element, for example:
<p [innerHTML]=“message | async”></p>
Where message is your observable from the service.
Using handlebars to render message is just rendering plain text, binding to innerHTML and using the async will render your html content

You can use innerHTML
In your component:
linkHtml = "Click <a href='http://www.google.com'>here</a>"
In your template:
<div [innerHTML]="linkHtml"></div>

You can use like that:
in your .ts file :
dummyLinkText: string = "Click <a href='https://www.google.com'>here</a>";
and in your .html file:
<div [innerHTML]="dummyLinkText | translate"></div>

Related

HTML DOM not rendering open attribute value inside react application

Simple react application trying to add open attribute in span tag its not rendering in html output
Same is working as expected in simple HTML page
HTML Sample: https://codepen.io/karthikeyan-sivagurunathan/pen/qBKvVgQ
<div>
<span open="(" close=")">
<span>x2+y2</span>
</span>
<span>=z2</span>
</div>
React Sample: https://codepen.io/karthikeyan-sivagurunathan/pen/vYrPWQw
I don't understand what are those open and close attributes for span tag...
but maybe you want something like this?
<details open={false}>
<summary>2+2</summary>
<span>=4</span>
</details>

Customise Kendo dropdownlist message to replace "no data found"

In our .NET Core 3 web app, we're using Kendo with our razor views.
We're using an Html.Kendo().DropDownListFor control which, when it has no data to display, shows the text:
"NO DATA FOUND"
We want to replace this string with a custom message. We know we can replace the string in kendo.all.min.js, but we're aware this would get overwritten once we update Kendo.
How can we specify the text string programatically, within the DropDownListFor control itself?
You can setup and assign a template to use and customize the no data message. I have also added the span with a style to remove the upper case text-transform that Kendo adds. Like so:
<!-- Template -->
<script id="noDataTemplate" type="text/x-kendo-template">
<span style="text-transform: none;">
<strong>My Custom No Data Message here</strong>
</span>
</script>
<!-- DropDownList initialization -->
#(Html.Kendo().DropDownList()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.NoDataTemplateId("noDataTemplate") // Reference to the template.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Template_GetCustomers", "ComboBox");
});
})
)
More information here: https://docs.telerik.com/aspnet-core/html-helpers/editors/dropdownlist/templates#no-data-templates
I suggest you to create a JS file for your project and overwrite any message you want, so you can update kendo without any problem.
Now, to anwser your question, in case of DropDownList you can change the value of the following property like this:
kendo.ui.DropDownList.prototype.options.messages.noData = 'Sorry, no data here';
You can do that with any other widget.

Dynamically render page type property as HTML in Kentico macro transformation

I'm using the Kentico CMS application to build and render website pages. I've defined a page type and a transformation for the page type. Currently the transformation has it's Transformation type set to "Text / XML". On the page type I've defined a property of data type "Long text" and am using a "Rich text editor" for the Form control. The content of this field (HTMLContent) is expected to be a valid HTML element. And I'm attempting to render the HTML using "HTMLEncode(HTMLContent)".
However, when I dynamically render the string as HTML in my Macro it results in a string containing the HTML element and not the HTML element itself. i.e: "Some Content" instead of Some Content.
Is it possible to accomplish this dynamic rendering of HTML in a Kentico Macro?
Relevant Source:
{%
return
"<div>" +
HTMLEncode(HTMLContent) +
"</div>";
%}
You are seeing the HTML printed on the web page because you are using the HTMLEncode() method - you don't need to use this method for what you are trying to achieve.
Just reference the page type field directly in the macro and the HTML generated in the rich text editor will be rendered. Assuming the name of the page type field is "HTMLContent", enter this into your transformation:
<div>
{% HTMLContent %}
</div>
Relevant Kentico documentation can be found below:
https://docs.kentico.com/k10/developing-websites/loading-and-displaying-data-on-websites/writing-transformations/using-transformations-in-macro-expressions#Usingtransformationsinmacroexpressions-Displayingpagesfromthecontenttree

Angularjs - Retrieve html of page given a link

How can I get html-code of a webpage from an angular directive?
in my example I have an html code:
<div class="modal-body" data-ng-bind-html="myHTML">
</div>
I want to place inside the div the content of another page! In my directive I do something like:
$rootScope.myHTML = link;
Where link should contains the whole html of the page! If myHtml="http://www.google.com", how can I retrieve the content of 'link'?
It sounds like you really just want to apply the external site inside your view, and then you should just link it in an iframe.
<iframe src="http://www.google.com"></iframe>
you can directly insert all the html of directive in html it self only. In your parent html you can insert directive.html like
<directive></directive>

angular-block-ui doesn't execute my html as a custom message

I want to block my UI and show a spinner while it is blocked.
I tried to use the following :
blockUI.start("<div class='dots-loader'>Minions are Working!</div>");
// some code that fetches data from server
blockUI.stop();
here 'dots-loader' is taken from the css provided by : http://www.css-spinners.com
on suceess, it does block the ui and display the message, but it displays my html as text.
is there any way to achieve this spinner thing inside the blockUI custom message??
although this is not a good solution to customize a library file but I have to do this to achieve loading image instead Loading text.Because angular-block-ui.ng.html has only Loading.. see below link
https://github.com/McNull/angular-block-ui/blob/master/src/angular-block-ui/angular-block-ui.ng.html
here the html
<div class="block-ui-overlay"></div>
<div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">
<div class="block-ui-message" ng-class="$_blockUiMessageClass">
{{ state.message }}</div>
</div>
in your project open angular-block-ui.js file or min file. go to below the file and found this code below.
// Automatically generated.
// This file is already embedded in your main javascript output, there's no need to include this file
// manually in the index.html. This file is only here for your debugging pleasures.
angular.module('blockUI').run(['$templateCache', function($templateCache){
$templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}</div></div>');
}]);
now add your code <div class='dots-loader'>Minions are Working!</div>
after {{state.message}} finally it look like .
$templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}
<div class='dots-loader'>Minions are Working!</div></div></div>');
}]);
then just give a blank space text
blockUI.start(' ');
hope you will find better solution. Thanks

Categories