I have text which comes from for loop, for example "Hello: how are you?" and "Hi: I am fine".
I want to make the text before : to be in bold. So above example I need "Hello" and "Hi" to be bold as they are in front of ":"
So actually my html is . There is a for loop on node
<div >
<a>
{{node.childrenCount == 0 ? node.code + ': ' + node.name: node.code + ': '+ node.name + ' ('+ node.childrenCount + ')' }}
</a>
</div>
How do I do that using CSS?
It's not possible with CSS without modifying the markup.
If you can modify the template, you could write:
<div>
<a><strong>{{ node.code }}</strong>: {{ node.name }}</a>
</div>
(Edit to address ternary in updated question)
That ternary is conditionally rendering the childrenCount in parentheses if it isn't equal to 0, which could be written as:
<div>
<a><strong>{{ node.code }}</strong>: {{ node.name }}{{ node.childrenCount !== 0 ? ' (' + node.childrenCount + ')' : '' }}</a>
</div>
Try to use:
let str = "Hello: how are you? Hi: Im fine?";
str = str.replace(/[a-zA-Z]+:/g, '<strong>$&</strong>');
//result: "<strong>Hello:</strong> how are you? <strong>Hi:</strong> Im fine?"
Using strong tag helps screen readers, but you can also use b tag or modify a span tag with css property font-weight:bold;.
<strong>Hello:</strong>How are you?
just wrap what you want in < b > tags
<b>Hello:</b>How are you? <br>
<b>Hi:</b> I am fine".
Related
I am working on an angular application. I have following code in my html
<div>{{ data.date | date:'d-MMM-y' || '-' }}</div>
<div>{{ data.id || '-' }}</div>
The problem I am facing is, whenever for any field like date and id, if value coming from API is null then next div shifts upward. I want div to be in that particular place it is when value is not null. So, I want to have a dash "-" whenever a value coming from API is null. So in my code I added a || '-' to all the fields but still it is not working. I am not getting "-" in my html. How can I do that?
You were close to the result, you are just missing some parentheses:
<div>{{ (data?.date) ? (data.date | date:'d-MMM-y') : '-' }}</div>
Working Stackblitz: https://stackblitz.com/edit/angular-vb4peg?file=src/app/app.component.ts
Just comment the line this.data["date"] = new Date(); and you will see how it changes.
You can use on this case the nullish coalescing operator
it will be like:
<div> {{ (data.date | date:'d-MMM-y') ?? '-' }} </div>
<div> {{ data.id ?? '-' }} </div>
I'm trying to display a file name but when the name contains special characters it's completely ignored.
This is the code:
<p class="meta-description" [innerHTML]="{{ vm.previewing.filename + ' | ' + vm.previewing.emailSubject }}">
{ vm.previewing.filename }}
<span ng-if="vm.previewing.emailSubject"> | {{ vm.previewing.emailSubject }}</span>
Even adding [innerHTML] is not fixing the issue.
This is what shows up on the page if the file is named 'çx' for example:
<p class="meta-description ng-binding" [innerhtml]="x.pdf | ">
x.pdf
<!-- ngIf: vm.previewing.emailSubject -->
</p>
In case we are talking in AngularJS ,
Do you have the module angular-sanitize enabled ? If so use the ng-bind-html directive to parse special characters or markup to display. Also avoid mixing interpolation and property binding, choose only one to use.
<p class="meta-description" ng-bind-html="vm.previewing.filename + ' | ' + vm.previewing.emailSubject">
<span ng-if="vm.previewing.emailSubject" ng-bind-html="'|'+ vm.previewing.emailSubject"> </span>
A tip to make the code cleaner would be creating those string values on the controller side (like the concatenation of filename and email subject to the p element).
Please bear in mind that the bracket syntax "[]" is for Angular 2-11 property binding and not AngularJS.
Reference:
https://docs.angularjs.org/api/ng/directive/ngBindHtml
I have the following html code :
<aside id="side">
<a class="active" href="#!"> some text <a>
<a href="#!"> some text <a>
<p> active </p>
</aside>
I am looking for a regex that only finds the 'active' string that is inside <aside id="side"></aside> and also 'active' should be value of class and something like <p> active </p> should not be match.
I try to use :
<aside.*[\s\S\n]class="active".*</aside>
but I dont find any match.
Try this
/class="\w*\W*active\W*\w*"/
Example
The problem with your regex is that the . in .* does not catch newlines. A JavaScript regex has no modifier to have newlines included in ., but you can use [\s\S]* as a workaround. The workaround skips over all whitespace and non-whitespace.
Here is a working code snipped that demonstrates that:
var html1 =
'<aside id="side">\n' +
' <a class="active" href="#!"> some text <a>\n' +
' <a href="#!"> some text <a>\n' +
' <p> active </p>\n' +
'</aside>';
var html2 =
'<bside id="side">\n' +
' <a class="active" href="#!"> some text <a>\n' +
' <a href="#!"> some text <a>\n' +
' <p> active </p>\n' +
'</bside>';
var re = /<aside [\s\S]* class="active"[\s\S]*<\/aside>/;
console.log('test html1: ' + re.test(html1));
console.log('test html2: ' + re.test(html2));
Is there any way to get div's inner text except 'by '?
<div class="name">
"by "
<em>Some Author</em>
", "
<em>Another Author</em>
</div>
What's pretty strange about your HTML is the quotes and the whitespace between the "Some Author" <em> and the comma. I assume you mean this instead:
<div class="name">
by <em>Some Author</em>, <em>Another Author</em>
</div>
With XPath, you could fetch the nodes with a query like this:
//*[#class='name']/node()[position()>1]
If we're talking about a browser environment and you want a single string, not just a collection of nodes, you could do:
document.querySelector('div.name').textContent.replace(/^\s*by\s*/, '')
You can do it with Jquery like this... but it'll remove the "," too...
Check it out:
$(document).ready(function(){
var name = $('div').children('em');
$('div').html(name);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name">
"by "
<em>Some Author</em>
", "
<em>Another Author</em>
</div>
You can try the expression:
//em/text()
Output:
'Some Author'
'Another Author'
You can try below XPath to get all descendant text nodes, except the first one:
(//div//text())[position() > 1]
I have to show an <a> tag. But depending on whether a value exists or not, I need to set href.
This is what I have:
<a ng-show="source.element!=0" "href="#/resource/{{source.a}}/{{source.b}}/val">
{{source.element}})
</a>
<a ng-show="source.element==0" "href="">{{source.element}}</a>
If source.element is 0 , then nothing should happen on clicking on the value of source.element (href="")
Else, the page must be redirected according to the href.
Is there a better way to do this since this duplicates code?
Thanks..
create a method in scope
$scope.getUrl = function(source){
return source.element==0 ? '#' : '#/resource/'+source.a+'/'+source.b+'/val';
}
then call from view
<a ng-href="{{getUrl(source)}}">
{{source.element}})
</a>
For angular markup it's better to use ngHref .
Becuse if user click on href before angular load it'll go the wrong address.
You can use ng-if
<div ng-if="source.element!=0"><a ng-href="your-url">{{sourceElement}</a></div>
<div ng-if="source.element==0"><a ng-href="">{{sourceElement}}</a></div>
ngif Documentation
Use ng-switch to reduce the number of watches and code duplication:
<span ng-switch="source.element">
<a ng-switch-when="0">
{{source.element}}
</a>
<a ng-switch-default ng-href="#/resource/{{source.a}}/{{source.b}}/val">
{{source.element}}
</a>
</span>
In your controller:
$scope.source.url = $scope.source.element === 0 ? '' : '#/resource/' + $scope.source.a + '/' + $,scope.source.b + '/val';
And in your markup
<a "ng-Href={{source.url}}>{{source.element}}</a>
Create a directive with two attributes like condition and url:
app.directive('anchor', function() {
return {
scope: {
condition: '=expr',
url: '#',
prompt: '#'
},
restrict: 'AE',
replace: 'true',
template: '<div>' +
'<div ng-if="condition">' +
'<a ng-href="{{url}}">{{prompt}}</a>' +
'</div>' +
'<div ng-if="!condition">{{prompt}}</div>' +
'</div>'
};
});
<anchor expr="1 === 1" url="#/test" prompt="test" />
The jsfiddle link.