Develop Reference

Set css variable with HTML5 color picker in Angular 5?

I have an Angular 5 application with items styled in CSS with CSS variables, as in
--color-links: #0000ff;
a { color: var(--color-links); }
So, I was trying to wire up an HTML5 color picker to allow changing this variable on the fly.
I saw this article which showcases this pen where the author is using some simple JS to do something like I am trying to do, but with document.addEventListener. I was trying to come up with a pure Angular/HTML5 method.
So, I created a picker:
<div class="form-group">
<label for="color-picker-link">Link color</label>
<input type="color"
id="color-picker-link"
(change)="setColor()"
[(value)]="linkColor">
</div>
And in my Component, I create the variable linkColor and setting it to #0000ff. That part works, the picker defaults to blue.
public linkColor = '#0000ff';
setColor() {
console.log('value', this.linkColor);
}
However, the variable always logs as the original 30000ff even though the picker obviously changes.
So, what I need to do is get the value the picker was changed to. Not sure why it's not working.
Also, the sample Codepen I linked to above uses this function to set the variable value once retrieved, although I don't think it would work in an Angular app:
function setThemeVar(name, value, unit) {
var rootStyles = document.styleSheets[0].cssRules[0].style;
rootStyles.setProperty('--theme-' + name, value + (unit || ''));
}
If I can solve getting the value from the picker on change, and then fire a function passing that retrieved value I can probably figure out the rest.

To get the selected value from the picker use ngModelChange event with ngModel directive.
<input type="color"
id="color-picker-link"
(ngModelChange)="setColor($event)"
[ngModel]="linkColor">
setColor(newColor) {
console.log('value', newColor);
this.linkColor = newColor;
}

How to use ng-repeat inside a directive proper way in angularjs

Plunkr
I made a autofill dropdown using angular custom directive.All is working fine.
But I want to make this directive reusable!!!!
Currently my directive is tightly depended on Id and Name property of selected item.
I want to assign text property(Which I want to bind the text into list items html) and value property(which will be available in my app controller) like textfield="Name" and value-field="Id".
Imagine If my data object does not contain Name or Id property , my
directive would not work.
HTML:
<autofill-dropdown items="searchCurrencies"
textfield="Name" valuefield="Id" selected-data="Id" urllink="/api/SetupCurrency/Autofill?filter=">
</autofill-dropdown>
Template :
<div class="pos_Rel">
<input placeholder="Search Currency e.g. doller,pound,rupee"
type="text" ng-change="SearchTextChange()" ng-model="searchtext"
class="form-control width_full" />
<ul class="currencySearchList" ng-show="IsFocused && items.length">
<li class="autofill" ng-repeat="item in items" ng-click="autoFill(item)">
{{item.Name}}
</li>
</ul>
</div>
So,finally what I want to accomplish , I'm going to bind Name property(or other,depends on what value I set to "text-field" attribute onto my html) to listitems and whenever user select an item, it will give me the selected Id(or other property ,depends on what value I set to "value-field" attribute onto my html).
Plunkr Here
Update:
I think my question not so clear.
I have written same directive 2 times to accomplish and also 2 times same template :(
Please look through my updated plunkr.
Updated Plunkr

I want to say that I am not quit sure if I understood your question in the right way so I try to repeat it.
textfield="Name" valuefield="Id" selected-data="Id"
You want to store the Value of the Property of the selected Item of your custom directive.
The Value should be stored in the Variable provided in the attribute "textfield"
The attribute "valuefield" should define the name of the property of the selected Object
If this is the case you have to get rid of the two-way databinding for your valuefield. Because you only want to provide a String (like "Id" or "Name").
I altered your plunkr again. First of all I made the new scope variables:
scope: {
'items': '=',
'urllink':'#',
'valuefield':'#',
'textfield':'=',
'Id':'=selectedData'
}
Valuefield is now only a text binding. So if you want to change it in the angular way you have to provide a scope variable outside of the directive and a '=' twoway binding inside :D
$scope.autoFill = function (item) {
$scope.IsFocused = false;
$scope.searchtext = item.Name;
$scope.Id = item.Id;
$scope.textfield = item[$scope.valuefield];
}
Also I added the last expression to your autofill function. The name of the property (valuefield) will be written into the textfield variable which is linked with your outside scope (in this case "Name"):
textfield="Name"
If this is not what you asked I am sorry but I am new to stackoverflow and I still can not comment :P
https://plnkr.co/edit/zE1Co4nmIF3ef6d6RSaW?p=preview

Ng-Checked default value undefined

I am wanting to know: how does one get a DEFAULT value for the ng-model inside a CHECKBOX to be true? The code i have will check the box but whenever i evaluate the model it keeps saying UNDEFINED...why is that?
<input ng-change="docModel.check()"
type="checkbox"
ng-model="amountSelected"
ng-checked="true" />

To define the default value when using AngularJS, simply give a value to the model variable in your controller:
$scope.amountSelected = true;

According the officiel AngularJS documentation ngChecked directive:
Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior
link to the doc

Toggle with ! operator not working on page load JavaScript

I have an onClick (using angular.js ng-click) where i have to toggle color of a table row with on click.
This is the initial implementation.
<tr>
<td ng-class="{'setType': types.isTypeSet('TYPE') == true}" ng-click="types.setType('TYPE')">
<img class="typebox-img" src="">
<div class="typebox">TYPE</div>
</td>
</tr>
where 'type' is the type of table row and 'types' is the angular controller.
types.setType(type):
...
this.types[type] = ! this.types[type];
...
while this toggles values from the second click on, it doesnt change the value on the first click.
I implemented the functionality using the if-else statement, but cant figure out why this wont work as it is a pretty basic thing to do.
this.types[type] is set to false as default.
Could someone explain why is this happening..

It doesn't surprise me that this doesn't work:
ng-click='types.setType('type')
Use " for the inner quotes to make the parser understand what you're trying to do (or the other way around):
ng-click='types.setType("type")'
Incidentally, you don't need a function to do this. Just initialize in your controller a bool:
$scope.toggle = true
And use in your view like this:
ng-click='toggle = !toggle'

Dynamic variables in ng-model

Im new in Angular and I stared working in one project witch is using it for front end side. The thing is. I have a dropdown witch has values 1,2,3 etc... and when you select something in dropdown, depending on what you click. currentEntry variable is changing value and im filtering data value="{{entry['properties'][currentEntry]['password']}}". This works perfectly when I have simple input tag.
But when I do this:
<input type="password" name="pasword" ng-model="password" ng-change="addProperty(password,'password')" class="form-control" placeholder="Password" value="{{entry['properties'][currentEntry]['password']}}">
whats happening up there is that ,value properity is changing when i do inspect element in code but not on the client.
Than i realized that value is stored in ng-model, so I need to somehow create this models dinamicaly for example when I click on drop down item witch has value 1 ng-model should look like this ng-model="password1" etc...
I have this number stored in variable "currentEntry" so i tried to do something like this
<input type="password" name="pasword" ng-model="password{{currentEntry}}"......>
but I get syntax error
Token '{' is an unexpected token at column 9 of the expression [password{{currentEntry}}] starting at [{{currentEntry}}].
How to solve this?

You can't do dynamic variables like that in Javascript (this is not php). Instead use a function or an object.
Function
$scope.password = function(){
//use $scope.currentEntry here
return value;
}
and in your view
<input type="text" ng-model="password()"/>
Object
Another possibility would be this
<input type="text" ng-model="passwords[currentEntry]">
Where $scope.passwords is an object containing your passwords as such.
$scope.password= {1: 'a password', 2: 'another password'}
Also see Use dynamic variable names in JavaScript for more on dynamic variables in Javascript.