We Keep Coding

why icon not display in angular 5?

I am trying to use image viewer plugin in angular but my icon is not display
here is my code
export class AppComponent {
name = 'Angular';
images=['https://images.pexels.com/photos/144240/goat-lamb-little-grass-144240.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb']
}
https://stackblitz.com/edit/angular-u26jb5?file=src%2Fapp%2Fapp.component.ts
I am using this plugin
https://www.npmjs.com/package/ngx-image-viewer
I already follow all steps .I don't know why it is not showing icons

This happens because your url for image does not get sanitized by angular firewall. So angular is blocking the image from being loaded .
In order to sanititze the url
use safe pipe in code.
In view page:
<img [src]="catPictureUrl | safe: 'url'" alt="A Cat">
in app.component.ts:
public catPictureUrl: string = `https://www.petdrugsonline.co.uk/images/page-headers/cats-master-header`;

I really don't know why is this happening but even font-awesome is installed but the template is not getting the styles.
I tried adding the cdn to index.html and it just works fine.
Try adding cdn to index.html and you are good to go
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

SyntaxError: expected expression, got '<', what does that mean?

I know this is asked a few times on S.O.
but none of the answers seem to match my situation . So, I have a a basic Html page which tries to use an external JS. The JS file tries to change the content of a paragraph defined in the HTML on a button click, but does not seem to work.
I see the following errors in console :
1)SyntaxError: expected expression, got '<'
2)ReferenceError: change is not defined
JSFiddle showing exact source?(except that & tags are removed as jsfiddle - http://jsfiddle.net/p9ko4yde/
HTML Code :
<h1> Numbers with external script:) </h1>
<p id="number">1</p>
<button type="button" onclick="change()">Toggle between 1 and 2</button>
<script src="myScript.js"></script>
</body>
</html>
JS Code :
<script type="text/javascript">
function change(){
var number = document.getElementById('number').innerHTML;
if(number == '1'){
document.getElementById('number').innerHTML='2';
}
else{
document.getElementById('number').innerHTML='1';
}
}
</script>
File Structure is as below:

You don't need the <script> tags when in an external .js file. Use these tags to embed a script inside HTML only.

The syntax error is because you have <script> tags in your JS file. When you put JavaScript in its own file like that, you don't need to surround it with script tags; that's HTML, and this is a JavaScript file.
The reference error is happening because, due to the syntax error, the JS file isn't executing correctly and so the change function never got created -- fixing the syntax error should also resolve this.

In a js file, you do not use the HTML to declare that it is a js file. So, you can drop the script tag in myScript and change it to this :
function change(){
var number = document.getElementById('number').innerHTML;
if(number == '1'){
document.getElementById('number').innerHTML='2';
}
else{
document.getElementById('number').innerHTML='1';
}
}

Sometimes this error happens when the Javascript referenced file doesn't exist. Make sure that the file name is correct and you have the file in place. I know your problem is solved but maybe this answer solves someone else's :)

CKEditor baseHref not working and editor not working after minification/bundeling

I am developing a Web-Application using ASP.NET MVC 4 and I am trying to use CKEditor for some content editing.
In debug everything works fine as long as no bundeling or minification is happening, but as soon as this does CKEditor generates wrong URLs even if I have set baseHref:
CKEDITOR.replace('ckeditor',
{
autoUpdateElement: true,
baseHref: '#Url.Content("~/Scripts/ckeditor/")',
filebrowserImageUploadUrl: '/Uploads/Upload'
});
In debug the following is included:
<script src="/Scripts/ckeditor/ckeditor.js"></script>
And after bundeling/minifaction it is just:
<script src="/bundles/ckeditor?v=dLE-_JqB4vxXJ9idGep_8yUL8KfOwGhfYoEZAeIudoE1"></script>
and it trys to load the following JS files:
http://DOMAIN.net/CONTROLLER/ACTION/config.js?t=D26D
Which is wrong as it should be:
http://DOMAIN.net/Scripts/ckeditor/config.js?t=D26D
Does anyone know what I am doing wrong or how to fix this?
Alternatively I would also be fine with a possibility to disable bundeling/minification for that one bundle to avoid that problem.

Try to add the following content before include the ckeditor's js file:
<script type="text/javascript">
var CKEDITOR_BASEPATH = '#Url.Content("~/Scripts/ckeditor/")';
</script>
More information: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Specifying_the_Editor_Path
And it will also work with ckeditor 4.x.

I had similar problem but found this to work. Include it in the cshtml layout file.
<script>
CKEDITOR.basePath = "#Url.Content("~/lib/ckeditor/")";
</script>
or with JQuery
$(document).ready(function() {
CKEDITOR.basePath = "#Url.Content("~/lib/ckeditor/")";
});

I found that a similar approach to #bluee worked for me:
I put the following in my cshtml layout file:
<script type="text/javascript">CKEDITOR_BASEPATH = "#Url.Content("~/Scripts/ckeditor/")";</script>
#Scripts.Render("~/Scripts/ckeditor/ckeditor.js")
The subtle difference being using CKEDITOR_BASEPATH rather than CKEDITOR.basePath. This resolves the 'CKEDITOR is not defined' issue.

I met the same problem. In fact, the bundle system trouble the ckeditor loading. So you can avoid it doing the following :
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Script/CKEditor/ckeditor.js")
#Scripts.Render("~/Script/CKEditor/adapters/jquery.js")

How I can put mask Date and Time in TexBoxFor?

I'm working with ASP.Net MVC4 wiht view engine Razor. I like put mask date and time in TexBoxFor I installed for nugget jquery.maskedinput-1.3.min.js and add in the view
(document).ready(function () {
$("#FechaDen").mask("99/99/9999");
$("#HoraDen").mask("99:99:99");
});
But I have this error: Uncaught TypeError: Object [object Object] has no method 'mask'
How I can resolve this problem?

You seem to have forgotted to reference the jquery.maskedinput plugin in your page:
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.maskedinput-1.3.min.js")"></script>
Make sure that the path is correct and that the plugin is actually situated in this folder. Use the Network tab of a javascript debugging tool such as FireBug to ensure that there are no 404 errors with your script references.
Also make sure that you have added this script inclusion after jQuery. Be careful because in the ASP.NET MVC 4 Internet Project Template, the ~/Views/Shared/_Layout.cshtml file renders jquery as a bundle at the end of the DOM:
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
So if you are putting this reference inside your view make sure that this happens inside the scripts section:
#section scripts {
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.maskedinput-1.3.min.js")"></script>
<script type="text/javascript">
$("#FechaDen").mask("99/99/9999");
$("#HoraDen").mask("99:99:99");
</script>
}
Also notice that since this script is now at the end of the DOM I have gotten rid of the $(document).ready call which is no longer necessary (and which you got wrong in the code you have shown because you forgot to prefix it with a $).

Referencing javascript from trac wiki

I have a problem running javascripts from trac.
I know there are security issues around this, but my trac installation is only used as an intranet.
I have got the following code to work (requires setting rendering_unsafe_content = true under [wiki] in trac.ini):
{{{
#!html
<script type="text/javascript" >
document.write("This is a test")
</script>
}}}
However, replacing this with the javascript in a seperate file will fail:
{{{
#!html
<script type="text/javascript" src="/tracproject/htdocs/test.js" >
</script>
}}}
where tracproject is the root folder of trac and test.js contains document.write("This is a test").
Any clues?

Have you tried the 'Add Headers Plugin' (http://trac-hacks.org/wiki/AddHeadersPlugin) ? It looks like it allows you to do include custom javascript like you want but in a more straightforward way than having to modify templates directly.

The option is [wiki] render_unsafe_content (see documentation). You can reference the file in your site htdocs directory on the path /tracproject/chrome/site/test.js. I tried your example just now and it work correctly once the src path is changed.
See the TracInterfaceCustomization page for more details.