Property binding is working fine if I have an input in my template
<div id="textAreaDiv"><input type="text" value={{item.mainText}}></div>
but I would like to have an editable div
<div id="textAreaDiv" contenteditable="true">{{item.mainText}}</div>
Is that possible? Can't find anything in the documentation.
Seems not to be supported. You should file a bug/feature request.
https://code.google.com/p/dart/issues/list
Related
Anyone know that "th:for" is in Thymeleaf? I know it's a simple question, but I can't find the answer online, even in the Thymeleaf documentation.
It is the Thymeleaf attribute equivalent of the HTML for attribute used by <label> elements. For example:
<div class="preference">
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
</div>
It is listed in the Thymeleaf documentation section 5.2:
There are quite a lot of attributes like these, each of them targeting a specific HTML5 attribute...
It's no different from most other HTML attributes which have a Thymeleaf version - you can use it with a Thymeleaf expression. If you don't need a Thymeleaf expression, just use the plain for attribute instead.
I have some components created for my angular application, and after upgrading my project to version 6 of Angular, I have received a message that worries me.
It looks like you're using ngModel on the same form field as
formControl.
Support for using the ngModel input property and ngModelChange event with
reactive form directives has been deprecated in Angular v6 and will be removed
in Angular v7.
For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlDirective#use-with-ngmodel
This is due to my following component:
<input type="text" id="{{id}}" name="{{name}}" [formControl]="ctrl" [(ngModel)]="value" appPfMaskCpf="999.999.999-99" placeholder="{{placeholder}}"
class="form-control">
<div *ngIf="flagCpfInvalido && value.length > 0">
<small class="text-danger">
CPF inválido.
</small>
<br>
</div>
It is very simple, it receives an input and I check the value.
How can I remove the use of ngModel in this case?
You should not be using ngModel which is part of template-driven form inside a Reactive form.
In stead of setting values using ngModel you can set the value using formControlName: Ex:
<form [formGroup]="form">
<input formControlName="first">
</form>
Set this value in component: this.form.get('first').setValue('some value');
Or you can choose to silence the console warning for now:
imports: [
ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives.
More details are available in documentation
I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>
I'm new to Angular2 and not able to explain the behavior observed where a change in an input form of one browser shows up immediately on a different one (even on a different device) showing the same page. What exactly is my "model" in this case?
And how is communication done from Client->Server->Clients, is this through an opened WebSocket? What server component is "forwarding" the changes?
"parameters" here is an array of {name, {value,unit}} retrieved through an http.get call.
<li *ngFor="let parameter of parameters">
<div>
<label>{{parameter[0]}}</label>
</div>
<input type="text" class="form-control"
[(ngModel)]='parameter[1][0]'>
</li>
Thanks
I´m working on a MVC3 project.
I already have a decimal value into a ViewData["nReceived"] calculated in the controller. After that the controller calls to Index view.
I'm able to display it on Index view outside of a element
<div class="bar bar-success" style="width: 42%;">Received #ViewData["nReceived"]</div>
but I need to use this value as a property of element replacing the width percentage.
I tried this with no success:
<div class="bar bar-success" style="width: #ViewData["nReceived"]%;">Received</div>
and also this:
#ViewContext.Writer
.Write("<div class=\"bar bar-success\" style=\"width: #ViewData["nReceived"]%;">")
Any ideas on how to get it working?
This should work use #()
<div class="bar bar-success" style="width:#(ViewData["nReceived"])%;">Received</div>
Also Since you are using MVC3, you can try ViewBag as well
<div class="bar bar-success" style="width:#(ViewBag.nReceived)%;">Received</div>
style='width: #Html.Raw(ViewData["nReceived"])' you're breaking your quotes and you need this to render out a little differently here