We Keep Coding

How I can set focus on the element when I am setting it to content editable in Angular 6?

I am using the contentEditable attribute of Angular 6 for editing the content of the element (in the ngFor)
How I can set focus on a tag element when it's contentEditable attribute is true?
<div class="tag" *ngFor="let tag of tags">
<span [contentEditable]="underUpdateTagId==tag.id" [textContent]="tag.title
(input)="tag.title=$event.target.textContent">
</span>
<span *ngIf="underUpdateTagId!=tag.id" class="edit text-info" (click)="beforeEdit(tag)">
<i class="fas fa-pencil-alt"></i>
</span>
<span *ngIf="underUpdateTagId==tag.id" class="update text-success" (click)="editTag(tag)">
<i class="fas fa-check save"></i>
</span>
<span class="delete text-danger" (click)="delete(tag)">
<i class="fas fa-trash-alt"></i>
</span>
</div>
The user interface:

We can use ViewChildren to get a hold of all the spans, by placing a template reference, pick up the span that is selected and set the focus to the element.
So I suggest adding template reference and in your beforeEdit() pass the index of the tag (we get it from ngFor), so we can refer to it when we want to place the focus on the field:
<!-- add template reference in below span tag --->
<span [contentEditable]="underUpdateTagId==tag.id" ... #spans>
<!-- pass index as from ngFor iteration to beforeEdit() -->
<span *ngIf="underUpdateTagId!=tag.id" class="edit text-info" (click)="beforeEdit(tag, i)">
<!-- more code --->
In the component we refer to spans, the template reference. And when clicked upon specify that the span with the index passed should be focused:
#ViewChildren("spans") spans: QueryList<ElementRef>;
underUpdateTagId = null;
beforeEdit(tag, index) {
this.underUpdateTagId = tag.id;
// wait a tick
setTimeout(() => {
this.spans.toArray()[index].nativeElement.focus();
});
}
STACKBLITZ
PS, this sets the focus in the beginning, you might want it at the end, maybe this question can help you with it if that is the case: Use JavaScript to place cursor at end of text in text input element

Changing icon images with the switch statement

Depending on a notification type, I need to change icon image of this notification.
There are three types of notifications.
notifications_type:
answer_created
user_subscribed
answer_selected
Icon image is placed inside i tag in a span tag. I don't want to use any conditions, instead I want to do this with switch statement. How am I supposed to do this?
Here is my code:
<div class="media g-mb-20">
<span v-bind="changeIcon" class="u-icon-v3 g-rounded-50x g-mt-2 g-mr-15 g-height-40 g-width-40 g-bg-gray-light-v5">
<i class="icon-bubble g-font-size-18 g-color-gray-light-v1"></i>
</span>
<a href="#"
class="media-body g-brd-around g-brd-gray-light-v4 g-py-10 g-px-15 g-bg-gray-light-v5--hover u-link-v5 g-rounded-3">
<p class="mb-0 g-font-size-16 g-color-gray-dark-v3">
<span class="g-font-stag-medium">{{ item.message }}</span>
</p>
</a>
</div>
I suppose that I need to bind a function with the help of a v-bind directive to a span with an icon. Then I would add the switch statement to this function.

You don't need to bind anything, it's just a matter of using the right classes. define your icon as such:
<i class="g-font-size-18 g-color-gray-light-v1" :class="switchIcon"></i>
then you define a new computed property:
computed: {
switchIcon () {
switch (this.notification_type) {
case 'some_type':
return 'icon-bubble'
default:
return ''
}
}
}
this way, when notification_type is equal to some_type, your icon will render as:
<i class="icon-bubble g-font-size-18 g-color-gray-light-v1"></i>

jquery to match <p> values based on a given value

I have a grid of staff in divs on a page and within each div i have added a new 'filter-content' div which contains the ids of various criteria that apply to this member of staff. Such as 'specialisms', 'region', 'joblevel' etc.
Here is my mark up:
foreach (SearchFirmRecruiter searchFirmRecruiter in Model.OrderBy(o => o.LastName))
{
bool blnUserDeactivated = searchFirmRecruiter.DateRemoved.HasValue;
string strCipher = #searchFirmRecruiter.getSearchFirmRecruiterCipherId();
<div class="col-md-4">
<div class="panel panel-default text-center #(blnUserDeactivated ? "deactivated" : "")">
<div class="panel-body">
<i class="fa fa-user-circle-o fa-3x"></i>
<p class="h4"><b>#searchFirmRecruiter.FirstName #searchFirmRecruiter.LastName</b></p>
<div class="filter-content">
<p class="specialisms"><b>#searchFirmRecruiter.Specialism</b></p>
<p class="regions"><b>#searchFirmRecruiter.Regions</b></p>
<p class="supplierType"><b>#searchFirmRecruiter.SupplierType</b></p>
<p class="jobLevel"><b>#searchFirmRecruiter.JobLevel</b></p>
</div>
<p>#searchFirmRecruiter.Email</p>
#if (blnUserDeactivated)
{
//Set the value
blnShowDisabledRecruitersLink = true;
<a data-href="#Url.Content("~")SearchFirm/ActivateRecruiter/#searchFirmRecruiter.getSearchFirmRecruiterCipherId()" data-toggle="confirmation" data-btn-ok-icon="fa fa-check" data-btn-cancel-icon="fa fa-remove" data-container="body" data-placement="top" class="btn btn-sm btn-success"><i class="fa fa-check margin-right-spacing"></i>Enable</a>
}
else
{
<i class="fa fa-pencil margin-right-spacing"></i>Edit
<span data-toggle="tooltip" data-placement="bottom" data-container="body" data-trigger="hover" title="" data-original-title="This user will no longer be able to access their jobs and submit any candidates"><a data-href="#Url.Content("~")SearchFirm/DeactivateRecruiter/#strCipher" data-toggle="confirmation" data-btn-ok-icon="fa fa-check" data-btn-cancel-icon="fa fa-remove" data-placement="top" class="btn btn-sm btn-danger"><i class="fa fa-remove margin-right-spacing"></i>Disable</a></span>
}
</div>
</div>
</div>
}
On the page the filter-content div looks like this:
,19,17,25,
,6,9,12,16,19,
,1,
,1,2,4,
Down the left hand side of the page i have some filter options, one for each of the classes above. So these will list all the 'specialisms', 'regions' etc as checkboxes. When a filter checkbox is selected i am running a javascript function to filter for that filter type. So, for example, if a user selects the 'Accountancy' specialism and that is id 25. I want to only show the members of staff that have that 'Accountancy' specialism.
As the filters are clicked so the members of staff will be shown if they meet the criteria.
I am completely new to JQuery but i'm pretty sure this is the best way to achieve what i want.
I have a javascript function for each filter which passes in the selected filter value, within this funtion, ideally, i want to firstly hide all the divs and then show only the ones that match the filter criteria. At the moment i am just playing around with trying to return the specialisms, once i have those i can do some logic to determine if the passed in specialismId is contained and therefore whether this member of staff should be shown or not
function filterSpecialism(specialismId) {
alert(specialismId);
alert($(".filter-content").find('p').find('specialisms').val)
}
Here is an image of how the page currently looks, so within this example Accountancy is selected as the filter, this is specialism id 25 so only James Dibner and Harjinder Royston should be shown
example
I hope that all make sense and i appreciate any answers or suggestions. Many thanks all

angularJS : disable link based on variable value, and display message box

I am struggling to figure out how to disable a ng-click event based on the value of a boolean variable.
I have a form, on which the user has to click a (+) sign/ link to add a new record, when the user does this, a small function is triggered, and sets a boolean to false.
Code:
vm.addNewRecord = function (formClass) {
vm.hasID = false;
};
The form has an icon/ link that allows the user to save information about participant, to the record.
Code:
<div class="icon">
<a ng-click="addParticipants(data)">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
That issue is that this information depends on a record id, but this id does not exist yet.
I need to be able to disable the ng-click of: addParticipants(data) is the value of hasId = false, and at the same time (somehow) allow the user to click it to display a message in the lines of: "Please save this record before adding participants."
What I have tried so far, and without success:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-disabled="!hasID">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
And:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-class="{'disabled': !hasID}">>
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
I checked the value of hasID and it is false but I am still able to click on the (+) sign for addParticipants. And also, I am not sure how if I manage to disable the click, I am going to display the message instructing the user to first save the main record and then adding participants will be possible.
If anyone could offer some help to resolve this, that would be much appreciated.
Thank you.

To disable a link you can do like
<a ng-click="hasID && datagrid.add(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>
But it's much better to have a method inside your controller like
vm.addToGrid = function(id) {
if (id) {
$scope.datagrid.add(id);
} else {
alert('Save the record before');
}
}
<a ng-click="vm.addToGrid(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>

Angular, how to set class to the clicked list item and remove from others li items?

I have this list where I'm trying to set class to the clicked list item (but class should be set only for clicked item).
I tried to do by this way but without luck:
<a href=""
ng-ctrl="ThemesCtrl"
ng-click="checkThemeContent(theme);"
ng-repeat="theme in themes"
ng-hide="theme[filterProp] !== filterValue"
class="list-group-item">
<b>{{theme.name}}</b>
<span class="themesListIcons">
<i class="fa fa-check-square-o"></i> {{theme.avg_score}}
<i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
</span>
</a>
How can i do it please in the right way?
Thanks for any help.

Great.
Sorry because I have not plunker account, so I must explain you on theoretical way.
George, you have to create function in controller that selects your item, for an example, in your case:
$scope.checkThemeContent = function (name) {
$scope.selectedName = name;
}
After this step, you must only call this function in your HTML like this:
<a href=""
ng-class="{selected:theme.name==selectedName}"
ng-click="checkThemeContent(theme.name)"
ng-repeat="theme in themes"
class="list-group-item">
<b>{{theme.name}}</b>
<span class="themesListIcons">
<i class="fa fa-check-square-o"></i> {{theme.avg_score}}
<i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
</span>
</a>
Please take look on ng-click part. You have to pass some property ('theme.name') of item (in your case 'theme') from list ('themes'), because you can't compare objects.
In ng-class you must also pass the same property as in ng-click.
Hope it helps.

you need change the syntax ng-class directive
<a href=""
ng-class="{'selected':$index==selectedIndex}"
ng-ctrl="ThemesCtrl"
ng-click="checkThemeContent(theme);currentTheme=theme"
ng-repeat="theme in themes"
ng-hide="theme[filterProp] !== filterValue"
class="list-group-item">
<b>{{theme.name}}</b>
<span class="themesListIcons">
<i class="fa fa-check-square-o"></i> {{theme.avg_score}}
<i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
</span>
</a>

If the 'selectedIndex' is your scope variable that represents your selected item in the controller and the 'selected' is your CSS class, try to change the ng-class part like this:
ng-class="{selected: $index==selectedIndex}"