I want to the dropdown show the value when editing the user, but it happens only when I clicked the dropdown. When clicking the dropdown then I can see the value selected. What did I do wrong?
ts
ngOnInit(){
this.checkedClientele = this.clienteles;
if(this.clienteles)
{
const clienteleArray =this.clienteles.filter(o=>o.ClienteleId==this.user.clienteleId);
this.checkedClientele = clienteleArray[0];
}
}
html
<div class="col-lg-6 kt-margin-bottom-20-mobile">
<mat-form-field
class="mat-form-field-fluid" >
<mat-select
placeholder="Clientele"
formControlName="clientele"
[(ngModel)]="checkedClientele" >
<mat-option
*ngFor="
let clientele of clienteles"
[value]="clientele" >
{{ clientele.Name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
Related
So, I am using react, nodejs and mongodb to build a basic blog application.
So far, I have been able to add the comment feature and users can create, delete and edit comments. But I wanted to add the ability to reply to a comment. I added a 'Reply' text inside the area where I mapped the array of comments in my react.js component. So, when you click on the 'Reply' it toggles the textbox for reply. That means on first click, the textbox to reply to that specific comment shows up, on second click, that textbox hides.
The problem now is that the toggle is working for all the mapped array of comments. I am trying to assign the specific '_id' to the 'Reply' text and pass it to the textbox for the user to write their reply to that specific comment using the '_id'. This should prevent the reply textbox from toggling for all the comments at the same time. How best can I get this done? Here are my codes:
The useState that hides and shows the textbox
const [showReply, setShowReply] = useState(false)
The function that toggles the useState
const handleShowReplyComment = (id) =>{
console.log(id)
if(id){
setShowReply(!showReply)
console.log(id)
}
}
This function picks the '_id' of the comment that I clicked. But how to pass that '_id' to the textbox is my challenge.
return (
<div className="comment">
<h5 className='users-comment'>Users comments</h5>
{comments.map((singleComment, index)=>{
console.log(singleComment)
const {author, commentdescription, _id, createdAt} = singleComment
return(
<>
{updateComment == _id ?
<div className='comment-div' key={_id} >
<textarea className='comment-wrapper' type='text'
onChange={(e) => setCommentDescription(e.target.value)} value={commentdescription2}>
</textarea>
<button className={isLoading ? 'comment-btn-no-cursor comment-btn': 'comment-btn'}onClick={() => handleCommentUpdate(_id)}>Update Post</button>
{error && <p>what happened?</p> }
</div>
:
<div className='displayed-comments'key={_id}>
<div className="commentPic">
<img className="user-pics" src={PF + singleComment.author.profilePicture} alt="" />
</div>
<div className="comment-info">
<div className="comment-author-div">
<div className='comment-author-date-info'>
<h4 className="comment-author">{singleComment.author.username}</h4>
<p className="comment-date">{new Date(singleComment.createdAt).toDateString()}
</p>
</div>
{
singleComment.author.username == user?.username && <div className="comment-edit-delete-div">
<i className="singlePostIcon fas fa-edit" onClick={() => {setUpdateComment(_id); setCommentDescription(commentdescription)}} ></i>
<i className={isLoading? "cursor-not-allowed singlePostIcon far fa-trash-alt":"singlePostIcon far fa-trash-alt" } onClick={() => handleCommentDelete(_id)} ></i>
</div>
}
</div>
<p className="comment-content">{singleComment.commentdescription}</p>
<div>
</div>
<h5 className="reply-comment" onClick={() => handleShowReplyComment(_id)}>Reply</h5> //this is the text with the toggle onClick function that toggles the useState called 'showReply'
{showReply && <div className='reply-div'>//this is the textbox with the useState 'showReply'.
<textarea className='comment-wrapper '>
</textarea>
</div>}
</div>
</div>
}
</>
)
})}
</div>
)
What I want to achieve is that, if the user select the roles (multiselect) then the roles array includes superadmin, then I want to hide the element. The code I might use is
*ngIf="roles.include(x.name !=='superadmin')" but it doesn't work!.
What might be the solution for that?
<div
class="col-lg-6 kt-margin-bottom-20-mobile"
>
<mat-form-field
class="mat-form-field-fluid"
>
<mat-select
placeholder="Role"
formControlName="roles"
multiple
[(ngModel)]="checkedRoles"
>
<mat-option
*ngFor="
let role of userRoles"
[value]="role"
>
{{role.name}}
</mat-option>
</mat-select>
<mat-error
*ngIf="
isControlHasError(
'roles',
'required'
)
"
>
<strong>{{
"AUTH.VALIDATION.REQUIRED_FIELD"
| translate
}}</strong>
</mat-error>
</mat-form-field>
</div>
<!-- clientele starts -->
<div
class="col-lg-6 kt-margin-bottom-20-mobile"
*ngIf="roles.include(x.name !=='superadmin')"
>
<mat-form-field
class="mat-form-field-fluid"
>
<mat-select
matTooltip="if you are creating a user for admin or superadmin, leave it empty"
placeholder="Clientele"
formControlName="clientele"
[(ngModel)]="checkedClientele"
>
<mat-option
*ngFor="
let clientele of clienteles"
[value]="clientele"
>
{{ clientele.Name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
I am showing some dynamic value on a table. in the table each row have a delete button( Suppose Button A ). If click the delete button ( Button A ) open a modal to confirm delete and there have confirm button( Button B ). From confirm button I am calling the api to delete the entity with the entity id.
Now I have the id on Button A and I am sending the request from button B. How can I sent the id from Button A to Button B.
Button A:
<td>
<button data-toggle="modal" value = {{this.id}} data-target="#myModal">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
Modal With button B:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Delete</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-header">
Are you sure you want to delete the entry?
</div>
<div class="modal-footer">
yes
</div>
</div>
</div>
</div>
I have given the {{this.id}} on the url of button B but it is always deleting the top or last element ?
add a class (example .delete) to the button,
<button data-toggle="modal" value ={{this.id}} class="delete" data-target="#myModal">
<i class="fa fa-trash-o" aria-hidden="true">delete</i>
</button>
then add a class to the confirmation link (example .yes):
yes
then get onclick event on the button and get the value of the button and insert it in the href attribut :
$(document).on("click", ".delete", function () {
var value = $(this).val();
console.log("value : ", $(this).val())
$(".modal-dialog .yes").attr("href","/admin/dashbord/category/"+value+"/delete");
});
see this codepen
I have the following angular html component:
<div fxLayout fxLayout.xs="row" fxLayoutAlign="left" fxLayoutGap="5px" fxLayoutGap.xs="0">
<div flex class="item item-1" fxFlex="95%">
<mat-form-field class="large-field">
<input matInput placeholder="Full Name" aria-label="Full Name" [matAutocomplete]="auto" [formControl]="FullNameCtrl">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelected($event.option.value)">
<mat-option *ngFor="let data of filteredCompanyFullName | async" [value]="data">
<span>{{ data.FullName }}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div flex class="item item-2" fxFlex="4%">
<button matTooltip="Refresh" mat-icon-button (click)="refresh()">
<mat-icon>refresh</mat-icon>
</button>
</div>
</div>
What above does is showing an auto complete drop-down plus a refresh button. I am struggling to style above html to show something like the following picture:
However it looks like the following which is not the desired output:
What should I change to achieve the first image? I want the input field to take 95% width of the row and a small refresh button right next to it aligned to the right.
Desired Functionality
Two input fields that both have drag and drop functionality.
With the generated 'value' div beneath each input field.
Current Functionality
Four generated 'value' divs are being created instead of two.
Plugin Demo (select the Plugins tab and scroll to "drag_drop")
http://brianreavis.github.io/selectize.js
What I've Tried:
http://jsfiddle.net/rwone/E72q5/5/
HTML Form
<!-- simple html form - a container with left and right divs -->
<div class="my_form_page_content">
<form id="my_form_name" name="my_form_name">
<div class="my_form_container">
<div class="my_form_left">
<p>field one</p>
<p>field two</p>
</div>
<div class="my_form_right">
<div class="input_wrapper">
<input type="text" id="input-sortable-1" class="input-sortable demo-default" value="input 1 value, lala1, lala1a">
</div>
<div class="input_wrapper">
<input type="text" id="input-sortable-2" class="input-sortable demo-default" value="input 2 value, lala2, lala2a">
</div>
</div>
<div class="my_form_button">
<button type="submit">submit</button>
</div>
</div>
</form>
</div>
jQuery
// aim: to have a unique 'value' div beneath each input field.
// selectize drag and drop functionality
$('.input-sortable').selectize({
plugins: ['drag_drop'],
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});
// the js that should add a 'value' div after each input box
$(function() {
var $wrapper = $('.input_wrapper');
// show current input values
$('select.selectized,input.selectized', $wrapper).each(function() {
var $container = $('<div>').addClass('value').html('Current Value: ');
var $value = $('<span>').appendTo($container);
var $input = $(this);
var update = function(e) { $value.text(JSON.stringify($input.val())); }
$(this).on('change', update);
update();
$container.insertAfter($wrapper);
});
});
i have done a fiddle as per your input.
http://jsfiddle.net/Shinov/csNgy/
$input.parents(".field-row:first").append($container)