Develop Reference

how can we put different value while embedding selector in other component in Angular 4

I have around 300 components and I am adding embedding one common menu html, and I want to change url value with unique value.
here is my files:
common.menu.component.html
<div class="packages-menu">
<ul>
<li *ngFor="let allPkgs of packages; let i = index;" routerLinkActive="active">
<a routerLink="/nepal-package-{{i+startingNight}}n" class="packages-link" title="{{allPkgs.title}}">{{allPkgs.title}} </a>
</li>
</ul>
</div>
I want to change routerLink value while embedding in other component
common.menu.component.ts
#Component({
selector: 'packages-menu',
templateUrl: './common.menu.component.html',
providers:[PackagesServices]
})
other.component.ts
while embedding it I am passing data-val to get different value.
<packages-menu data-val="different value"></packages-menu>
<div class="hti-modrentitle">
<h1>{{pkg.title}}</h1>
</div>
I want to put **data-val** value in routerLink so I can have different url for all components.
Is that possible or any other way to do it. Please help

Hide item that is part of a loop based on a condition

<ul *ngFor="#item of items; #i=index" >
<li [hidden]="{{ item.myattr === 'some_value' }}"> {{ item.val}} </li>
</ul>
I have the following code shown above. I want hide the list if the item has a value equal some value. In this case I have the items, they have an attribute called myattr, and if it is equal to some_value then the item should be hidden. The code I provided though does not work.

You don't need to use interpolation {{}} with property binding [] (actually, you can't):
<li [hidden]="item.myattr === 'some_value'">
Also, read Mistake #1: Binding to the native "hidden" property in http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html
So a better solution is likely
<li *ngIf="item.myattr !== 'some_value'">

You can basically use ng-hide also like;
<li ng-hide="item.myattr =='some_value'"> {{item.val}} </li>
assuming that item.myattr is the same type with some_value.

I think is better to use pipe to filter out unneeded items.
https://angular.io/docs/ts/latest/guide/pipes.html

append data from handlebars value

i'm using emberjs with handlebars and i have an issue.
The idea is append a value into the element, the result will show something like that:
<li data-obj="CASH_IN_BANK">CASH_IN_BANK</li>
i'm trying that:
<li data-obj="{{row.value}}">{{row.value}}</li>
but is not working the result out the taks is fine but the data-obj shows the handlebar script tags
<li data-obj="<script id='metamorph-9-start' type='text/x-placeholder'></script>TAG_CASH_IN_BANK<script id='metamorph-9-end' type='text/x-placeholder'></script>" >
Any Suggestions?

You need to use `{{bind-attr attribute=value}}. See: http://emberjs.com/guides/templates/binding-element-attributes/
in your case it would be...
<li {{bind-attr data-obj=row.value}}">{{row.value}}</li>

Call an angular function inside html

I was trying to see if there is a way to call a function I designed inside the scope:
<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
<li class = "ui-divider">
{{meter.DESCRIPTION}}
{{htmlgeneration}}
</li>
</ul>
$scope.htmlgeneration = function()
{
...
}
The function is called htmlgeneration. Essentially, what I want to do is dynamically append HTML inside the li element while using AngularJS.

Yep, just add parenthesis (calling the function). Make sure the function is in scope and actually returns something.
<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
<li class = "ui-divider">
{{ meter.DESCRIPTION }}
{{ htmlgeneration() }}
</li>
</ul>

I guess my problem was related to conflicts with Django tags. This post was helpful.
What worked for me was a simple solution involving using ng-bind and changing the code to something like this:
<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
<li class="ui-divider" ng-bind="htmlgeneration(meter.DESCRIPTION)">
</li>
</ul>

Angularjs best way to dynamically change CSS class based on input query

In the AngularJS phonecat tutorial, there is an input box which is used to apply a filter to ng-repeat. This works great for returning a subset array to display on the screen.
Here is what the code looks like:
Search: <input ng-model="query">
<ul class="phones">
...
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<img ng-src="{{phone.imageUrl}}">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
I was wondering what's the best way to dynamically add a CSS class to matching elements. An example use case of this would be to add a background-color (style .matching{}) to all matching elements.
Comparing the query text in ng-class did NOT work:
<li ng-repeat="phone in phones" class="thumbnail">
<img ng-src="{{phone.imageUrl}}">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
I am new to angular and trying to just get a feel for the framework. Do I have to bind the query text to the element somehow so that the comparison works? Would a better approach be to handle this through a custom directive?
Any help is appreciated - thanks!

Try setting the class to a function in the controller. ng-class="GetMatchingClass(phone)"
$scope.GetMatchingClass= function(phone){
if(phone.name.indexOf(query) != -1 ){return "matching"}
return "";
}

{{phone.name}}
that should do it for exact matches.