Is there a way to add a value into my title attribute inside my Dropdown tag. For example I want to get title='Lead' + {this.state.candidate.length}. I am also using Dropdown from 'rsuite'.
<Sidenav className="nav1-full" defaultOpenKeys={['1']} activeKey="1">
<Sidenav.Body>
<Nav className="nav-bar">
<Dropdown className="nav1-body" eventKey="1" title="Lead">
<Dropdown.Item eventKey="1-1" href="/candidates/1">
Exploratory
</Dropdown.Item>
<Dropdown.Item eventKey="1-2" href="/candidates/2">
Phone Intro
</Dropdown.Item>
</Dropdown>
</Nav>
</Sidenav.Body>
</Sidenav>
Since anything inside {} is an inline JSX expression, you can do:
title={"Lead" + this.state.candidate.length}
You can also use ES6 string interpolation/template literals with `` (backticks) and ${expr} , like this:
title={`Lead${this.state.candidate.length}`}
Hope it helps.
You need to wrap your prop in brackets {} instead of quotes
In the brackets you can write any javascript code:
<Dropdown title={'Lead ' + this.state.candidate.length}>
ES6 way:
<Dropdown title={`Lead${his.state.candidate.length}`}>
title={`Lead${this.state.candidate.length}`}
Should do the trick
Try this. Simple template string solution.
title={`WhateverYouWantHere`}
Related
I'm confused. I'm trying to check in a loop if the outputted key is a mail key, if yes, I want to wrap the output into a <a> tag to make the email clickable. Somehow it's not working and it's printing the whole content inside the div:
<div>{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}</div>
Current result on the page:
{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}
I'm not sure if I understood the whole thing correctly. I'm coming from PHP and there I can do something like this. Can someone please explain me my issue?
If you surround the html elements inside the div with quotes like you did, you are telling angular that the divcontent is actually a text value. So it will end up displaying your condition as text.
You can add dynamic html by binding to innerHtml property like suggested, however I find it cleaner to keep display logic in the template using one of the options below. Besides, they will avoid the extra overhead of calling a function every round of change detection
*ngIf
<div >
<a *ngIf="contactInfo.key === 'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngIf="contactInfo.key !== 'mail_outline'">{{contactInfo.value}}</ng-container>
</div>
Or use *ngSwitch, which will be more adequate if you've got several different cases
<div [ngSwitch]="contactInfo.key">
<a *ngSwitchCase="'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngSwitchDefault>{{contactInfo.value}}</ng-container>
</div>
Use angular Html binding. Update your html
<div [innerHtml]="getLink()"></div>
In your typescript
getLink(){
if(this.contactInfo.key === 'mail_outline')
{
return `<a href='${this.contactInfo.value}'>${this.contactInfo.value}</a>`;
}
else
{
return this.contactInfo.value;
}
}
Thanks.
Currently, I'm defining the element width with this syntax:
<div [style.width.px]="size" [style.height.px]="size"></div>
What I want is to use a similar syntax but to define the border-width css property, something like this:
<div [style.border-width.px]="borderSize"></div>
How can I accomplish that?
I figure out that I could do something like this:
// Html
<div [style.borderWidth.px]="borderSize"></div>
// Typescript
#Component(...)
export class LoaderComponent {
borderSize = 2;
}
<div [style.border-width.px]="borderSize"></div>
every css property which has - in them, need to remove the - and camelcase the next letter.
like:
[style.borderWidth.px]="size here"
[style.paddingLeft.px]="size here"
[style.marginRight.px]="size here"
Is there a way to add white space in MVC while using variables? for example foreach(item in collection) {#item #item}. How to make a blank space something like " " in it?
You can use pre tag , which defines preformatted text.
foreach(item in collection) {
<pre>#item #item</pre>
}
have you tried this can be repeated i.e. you can do line breaks with <br />
In my application I have used a space after the link's name ("Details ") as shown here
#Html.ActionLink("Details ","Details", new { Variable_ID = item.VIP_ID})
#Html.ActionLink("Edit", "Edit", new { Variable_ID = item.VIP_ID })
so my links will look like this: Details Edit, instead of DetailsEdit.
You can also put a separation bar like this "Details | ", so you can have
Details | Edit
<span> </span>
Insert " " to add more blank spaces
//This will work for sure, as MVC C# using razor syntax then you just need to put space between those two only
foreach(var item in collection) {
<span>#item #item</span>
}
If you wish to add single space between item:
foreach(item in collection)
{
<p>#item #item</p>
}
But you will have better flexibility if you wrap it in a HTML element like div or span,
and then add padding/margin to the element using CSS.
foreach(item in collection)
{
<div class="user-defined-classname">#item</div>
<div class="user-defined-classname">#item</div>
}
In CSS
.user-defined-classname{
padding-left|right|top|bottom: 10px
}
Suggestion:
The "Views" folder is specifically meant to just contain your view files (i.e. .cshtml files).
Try adding your CSS file to a folder in the root of the ASP.NET project. Often, this folder is named "Content", but you can rename it as "Styles" or something else. Then you can load your CSS file from within a view using a link tag:
<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />
This may help.
One more variant:
#(string.Format("{0} {1}", item, item))
I have a string with lots of " which i replace with an empty String and this works.
But I also want to make a line break when a comma appears.
Already tried it with ('\n'), ('\r'), ('<br>'), ('<br/>') but nothing works.
in my angular controller I have the string
self.msg = msg.replace(/"/gi, '').replace(/,/gi, '\n');
self.testAlerts = [{ type: 'success', msg: self.msg}];
I want to show this message in the alert box in my html
<div uib-alert ng-repeat="alert in testAlerts" type="{{alert.type}}" >{{alert.msg}}</div>
Why do the line breaks not work?
Use ng-bind-html instead of interpolation:
<div uib-alert ng-repeat="alert in testAlerts" type="{{alert.type}}" ng-bind-html="alert.msg"></div>
Here's a plunkr for demonstration.
If anybody from Angular world is happen to be here you can use
[innerHTML] instead of [ng-bind-html] from #RamblinRose's answer
Or even, just add css white-space class
<div uib-alert ng-repeat="alert in testAlerts" style="white-space: pre-line;" type="{{alert.type}}" >{{alert.msg}}</div>
I have dynamic HTML attributes generated using Razor.
Everything seems to work fine except when I generate an attribute value with a whitespace within like:
item.Name = "Organisation Structure";
When I then try to render this value in a dynamic attribute, Razor thinks that the text after the whitespace is another entirely different attribute.
<a href="#item.Url" #(!item.HasSubItems ? "data-tab-title=" + item.Name : "")></a>
Which renders wrongly as:
instead of like this:
I have even tried to use Html.Encode(item.Name) like below:
<a href="#item.Url" #(!item.HasSubItems ? "data-tab-title=" + Html.Encode(item.Name) : "")></a>
Please, any solutions to this problem will be highly appreciated.
I solved the problem by simply doing a String.Replace(""," ")
<a #(!item.HasSubItems ? "data-tab-title=" + item.Name.Replace(" "," ") : "") href="#item.Url" ></a>
This solved the problem rather nicely.
You could try :
#{
var dynamicLink = string.Format("<a href='{0}' {1}></a>", item.Url, (!item.HasSubItems)? "data-tab-title='" + item.Name +"'" : "");
}
#Html.Raw(dynamicLink)