In our Angular project, we use interpolation as shown below, but we also need to use this interpolated value in the [state] property. But we haev not managed so far. Any idea?
If we set id values as shown below, there is no problem.
<a routerLink="/ticket/details/" [state]="{ id: '5' }" >{{row.TicketId}}</a>
But we cannot get dynamically by obtaining row.TicketId (it is obtained as label in {{row.TicketId}}) but cannot concatenate with id parameter.
<a routerLink="/ticket/details/" [state]="{ id: {{row.TicketId}} }" >{{row.TicketId}}</a>
The brackets in [state]="..." tell Angular to evaluate the template expression, so you cant use interpolation there. So, as I said in comment it should be:
[state]="{ id: row.TicketId }"
Try [state]="{ id: row.TicketId }"
Related
Help with filter function!
I have a table with phone number and name as columns.
The JSON object would look something like this :
Details = [
{PN : '123-456-7890',
NAME : 'PERSON A',
},{
PN: '192-453-7655',
NAME: 'PERSON B',
}
]
I need to search on keyup and filter the data. The user can search in any of these patterns:
xxxxxxxxxx,
xxx-xxx-xxxx,
xxx-xxxxxxx,
xxxxxx-xxxx.
and still needs to get the data having xxx-xxx-xxxx as phone number in the table. Search should start as soon as the keyup triggers.
I tried using match and test methods, but couldn't make connection between search input, regex and the elements from table.
Can anyone suggest how I can tackle this situation?
Please use this regex -
/^\d{3}-\d{3}-\d{4}$|^\d{3}-\d{7}$|^\d{6}-\d{4}|^\d{10}$/
Angular Code -
matchNumber(){
var str = "12311111455";
var res = str.match(/^\d{3}-\d{3}-\d{4}$|^\d{3}-\d{7}$|^\d{6}-\d{4}|^\d{10}$/);
if(res.length > 0){
console.log('Matched);
}}
Valid Numbers
1234567890
123-456-7890
123-4567890
123456-7890
Invalid Numbers
123453647564756876
111223-234234
Check DEMO -
Check Valid Numbers
I am trying to make this property binding to work. I want to use ternary operator where conditions are interpolated strings. HTML is compiling, but the element is not showing.
<si-icon [icon]="item.isSelected ? 'element-face-{{item.faceColor}}-filled' : 'element-face-{{item.faceColor}}'"></si-icon>
Can someone point me what I am doing wrong here? Thank you!
Solution 1: In HTML
<si-icon [icon]="
item.isSelected
? 'element-face-' + item.faceColor + '-filled'
: 'element-face-' + item.faceColor">
</si-icon>
Solution 2: Get style name from component.
getIconStyle(isSelected: boolean, faceColor: string): string {
return isSelected
? `element-face-${faceColor}-filled`
: `element-face-${faceColor}`;
}
<si-icon [icon]="getIconStyle(item.isSelected, item.faceColor)">
</si-icon>
Sample Stackblitz Example
I have the following code:
...
<tr ngFor= "let i = index">
<myCustomElement myName="{{'nameEdit'+i}}">
<button
<--This is where I get the "Got interpolation ({{}}) where expression was expected" error-->
(click)="myFunction(requestForm.controls.'nameEdit'{{i}}.value)">
</button>
</myCustomElement>
</tr>
...
My goal is pass to myFunction the value of nameEdit for each element (so this will be nameEdit1, nameEdit2, nameEdit3 and so on. My existing code results to an Got interpolation ({{}}) where expression was expected error.
What's the proper way to pass my value to myFunction?
(click)="myFunction(requestForm.controls['nameEdit' + i].value") should do the trick
Since double quotes for event directives (...) are interpolated, the {{ ... }} is unnecessary. You will need to also use the javascript object identifier [...] with the dynamic text.
Lastly, this will obviously return error if the controls doesn't have a key with the name you're trying to parse. It would be best practice to have myFunction(...) manage this case.
Working stackblitz example that outputs the values: https://stackblitz.com/edit/angular-whq8ll-od64hx?file=app/slider-overview-example.html
I used yeoman angular generator to scaffold my app, and now I'm working on a specific view.
I'm building a simple ng-repeat function, in order to clean up my html and avoid repeating the same markup 4 times.
I am making content panels, and want to add a class specific to the content, so I can style it with Sass. I tried using ng-class but so far I've been unable to make it work.
I am new to AngularJS, I tried reading the official ng-class documentation and this writeup but so far I'm unable to make it work. I guess it just takes a while to get used to Angular.
here's my view:
<div data-ng-controller="LandingController">
<div ng-repeat="panel in panels">
<div class="panel-heading">
{{ panel.title }}
</div>
<div class="panel-content" ng-class="{{panel.contentClass}}" data-ng-bind-html="panel.content">
</div>
</div>
</div>
and the controller:
'use strict';
angular.module('angularApp')
.controller('LandingController', function ($scope) {
$scope.panels = [
{
title: 'lokacija',
contentClass: 'location',
content:'<p>Institut Jožef Stefan<br>Jamova 30<br>1000 Ljubljana</p><br><div class="map-container"></div>'
},
{
title: 'kontakt',
contentClass: 'location',
content: ''
},
{
title: 'delovni čas',
contentClass: 'location',
content: ''
},
{
title: 'katalog',
contentClass: 'location',
content: ''
}
];
});
ng-class operates in three different ways, depending on which of three types the expression evaluates to:
If the expression evaluates to a string, the string should be one or more space-delimited class names. (this will match with your case)
If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.(EX: 'ng-class="{'my-class': (true/false expression)}")
If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this. (EX: ng-class="[style1, style2, style3]") refer ng-class doc and you will get more info.
so you can directly use ng-class="panel.contentClass" this will match with the first list item witch is If the expression evaluates to a string, the string should be one or more space-delimited class names..
you can simply change ng-class="{{panel.contentClass}}" to ng-class="panel.contentClass" because ng-class accepts a expression not a interpolated value.
<div class="panel-content" ng-class="panel.contentClass" data-ng-bind-html="panel.content">
DEMO
You are using ng-class in wrong way. ng-class is use to add/remove class conditionally and dynamically.
Here is full documentation of ng-class.
ng-class requires json in which key is class name and value is condition. if value satisfies, it add that class else not.
for Ex.
<div class="panel-content" ng-class="{'my-class':panel.contentClass}" data-ng-bind-html="panel.content">
it adds my-class if value of panel.contentClass is true.
if you are taking class name from panel.contentClass then better way to use class attribute only instead of ng-class. Here is reference.
For ex.
<div class="panel-content, {{panel.contentClass}}" data-ng-bind-html="panel.content">
I'm using PURE from BeeBole for filling some HTML templates with JSON, everything works perfect except that I can't find how to pass a default value when a missing property, and I wanted to do this from this side since from the server there is nothing I can do. So for example I have this JSON object:
var example = {records: [ {id: '1', name: 'Bill', nick: 'B'}, {id: '2', name: 'Amy'} ]}
When I render this in a table, on the directive when I ask for 'nick' I get 'B' for the first and nothing for the second, but for this case I would like to set a default value such as '-' when the property is not found.
Is this possible?
Thank you
A bit late on this one.
If you want to show the nick in a SPAN, it should look something like:
'span':function(){
return this.nick || '-';
}
instead of:
'span':'nick'
You would probably get a quicker answer on the forum