I have a status var in a scope of a controller.
Whenever my rest PUT succeeds I append a message to this js variable.
I show it in my template using {{status}}
How can I style this? I tried inserting <br> tags in this text but they just show up as regular text and dont insert a new line. How can I also bold certain tag?
In order for HTML to be rendered, use ng-bind-html
<div ng-bind-html="status"></div>
P.S. Don't forget to import ngSanitize module into your app.
You can also take a look at
https://docs.angularjs.org/api/ng/directive/ngClass
about ng-class directive
Why not use a tag or a tag to wrap your {{status}}, and add to the tag an id or classes with styles?
Related
I have a component where it renders the tags depends on the data passed as shown below:
<ng-container>
<ng-container [ngSwitch]="tag">
<p *ngSwitchCase="'p'" [innerHTML]="_getString()"></p>
<h1 *ngSwitchCase="'h1'" [innerHTML]="_getString()"></h1>
<h2 *ngSwitchCase="'h2'" [innerHTML]="_getString()"></h2>
<h3 *ngSwitchCase="'h3'" [innerHTML]="_getString()"></h3>
<h4 *ngSwitchCase="'h4'" [innerHTML]="_getString()"></h4>
<span *ngSwitchCase="'span'" [innerHTML]="_getString()"></span>
<code *ngSwitchCase="'code'" [innerHTML]="_getString()"></code>
<time *ngSwitchCase="'time'" [innerHTML]="_getString()"></time>
</ng-container>
I want to render an icon beside each text whenever required.
<span *ngIf="icon" class="css-{{icon}}" role="presentation"></span>
If I put the icon tag in between each tag, it gets replaced by the innerHTML data.
Is there any way I can render both the icon(using ng-content or something like that because I dont want to write the icon html inside every element) and innerHTML data?
I am new to Angular world so trying to learn. Any help would be appreciated.
Thank you.
It seems that your question is not specific for Angular, but a JavaScript behavior.
innerHTML gets or sets the HTML or XML markup contained within the element. So it means that it replaces whatever content was there to start with.
(https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
I think you can try using insertAdjacentHTML() instead - this should add HTML to the element that's already present there in the DOM.
Check the syntax and examples here: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Try passing the icon wrapped in a span tag to _getString() method. configure your method such that it returns the icon and the text
E.g
getString(icon){
return <span> ${icon} </span> your string here
}
in this case every time you call _getString pass the desired icon
I'm using Trumbowyg which is a javascript text editor. My problem is, when I paste text from another site into the editor, it adopts the style of the text from that site. How can I prevent this?
My editor is rendered in my Django template like this:
{{ post.content }}
Is there a template tag I can use to remove HTML? Because the external styling is inline styles, e.g. <span style='font-family: Arial;font-size:30px' etc..?
To remove styles from a formatted paste (styles pasted from clipboard) in Trumbowyg, set the removeformatPasted option to true:
$('.trumbowyg').trumbowyg({
removeformatPasted: true
});
But also keep in mind:
In order to use this option, you need to define a font size in your CSS or use a reset like normalize.
Remove format pasted is not active by default (set to false).
You want to remove HTML tags? If yes just use:
{{ post.content|striptags }}
How can I define custom html tags in ckeditor.
When user select a word e.g. Apple.
Then I want to replace this with profileTag Apple /profileTag".
But if the selected word already has a tag then it should append the profile tag.
For example if anchorTag Apple /anchorTag then after user selection it will be profileTag anchorTag Apple /anchorTag /profileTag.
The above thing is working. But when I execute the below code the output is null in case of custom html tag like profile tag.
var current_selected_element = editor.getSelection().getSelectedElement();
console.log(current_selected_element);
The problem is that CKeditor's advanced content filter is filtering out your custom tags ... you're going to have to configure the ACF to accept the custom tags your plugin is creating and inserting into the DOM. There are a couple ways this can be done. The most basic would be to implement config.extraAllowedContent = 'profile' or whatever the name of your custom markup will be. Otherwise you can work with the global CKEditor.filter object. There's more documentation on the CKEDITOR.filter object here.
I need to append a directive's template AFTER an input field. The original input field needs to remain - I can't just create a duplicate of it. My thought for this was to, in the controller, use jQuery to add a DIV after the input field, and add an attribute for the directive to the div. However, in practice, that doesn't work - the div is created and added, but the directive doesn't activate.
The problem, I know, is that the jQuery-added div is not yet recognized by the angularjs controller - it appears AFTER angularjs runs over the controlled html.
I know that part of the problem is that you're not supposed to use jQuery in the controller, but I honestly can't think of another way to do it. Is there some way to cause the angularjs controller to look at this new div?
The original HTML looks like the following.
<input name="generatedString_1234567890">
I run jquery over the page to add a controller to the body. The relevant code looks similar to this:
jQuery('body').attr('ng-controller','MainCtrl');
angular.module('app',['DataTools']);
angular.element(document).ready(function(){
angular.bootstrap(document, ['app']);
});
Inside the angularjs, I run a resource to get a json string containing the relevant changes to the DOM, in terms of attributes that need to get added to the inputs and certain understood flags that require specific coding. The relevant task I'm trying to accomplish looks like this, where $(this) is the input field for the DOM.
jQuery(document).find('input.FormField,select.FormField').each(function(){
// Inside a case statement based on certain flags
var d = $('<div/>');
d.attr("ng-model", 'adors.'+label);
// Relevant code that adds attributes to the div - including the required directives
$(this).hide().after(d);
}
I am trying to create code that looks more like this (VERY GENERIC):
<input name="generatedString_1234567890" ng-hide="true" ng-model="input.uniqueKey">
<div special-input="time" ng-model="input.uniqueKey">
<select ng-repeat="hour in hours">
<select ng-repeat="minute in minutes">
</div>
I want to show a code snippet of how to use a directive. However, the directive exists in this application, so when I have
<pre>
<code>
<bar-foo>bar foo</bar-foo>
</code>
</pre>
I'm using highlight.js, but angular doesn't care much and applies the directive to the bar-foo element. How can I disable the directive for that specific element ?
You are looking for ng-non-bindable:
<pre ng-non-bindable>
<code>
<bar-foo>bar foo</bar-foo>
</code>
</pre>
What I would is to add an attribute to <bar-foo> element like <bar-foo data-is-disabled="{{true}}" >. In the directive I would add at the very top of the link method:
if ($scope.$eval(attrs.isDisabled)) return ;`
If I needed to make sure to clear all content probably before return I could do something like:
element.replaceWith('')