I am new to HTML and I have to modify a certain snippet of code so that it meets my needs. Here is the snippet, in pseudocode:
<app-myapp *ngIf="true"
[exclude] = "[this.myUser.id]"
">
</app-myapp>
Now what I need to do is the following: I also have an array of numbers inside the attribute myUser of my class called excludedUsers, and I want to include all the elements of this array in the [exclude] array that I am passing to my app. Obviously this does not work: [exclude] = "[this.myUser.id, this.myUser.excludedUsers]", because this.myUser.excludedUsers is an array. I do not know if a ngFor could work here. Could someone help me?
It's actually quite simple. It's called spread syntax and it expands all elements of an array into an array declaration.
[this.myUser.id, ...this.myUser.excludedUsers]
Related
In html am rendering some value in the and passing it as a input to a component like
below
<test-component
[title]= "data?.Kevin?.title"
</test-component>
Please be noted data?.Kevin?.title will give the title name.How ever, in the above, I want to render the name a bit dynamically like below
<test-component
[title]= "data?.{{name}}?.title"
</test-component>
{{name}} should render kevin and the tile value needs to be passed to the component.
Here the name is not being rendered correctly.
Any help is highly appreciated.
the solution is pretty simple: [title]= "data?.[name]?.title"
the equivalent of the first example would be: [title]= "data?.["Kevin"]?.title"
read more on https://www.w3schools.com/js/js_objects.asp see "Accessing Object Properties"
I have an angular page, where, during an *ngFor loop, I want to update a variable, then write it to the HTML during each iteration of the loop.
Like so:
HTML:
<table *ngFor="let data of Dataset">
somehowRunThis(data)
<div>{{methodResult}}</div>
</table>
TS:
...
methodResult: any;
...
somehowRunThis(data): {
let a;
...
this.methodResult = a;
}
etc etc.
Is there any way this can work? Attempting to add a method that returns within the curly brackets seems to not work, and there appears to be no effective way to run arbitrary methods from the HTML in Angular.
Thank you for any assistance you can provide.
Is there any particular reason why you want to trigger this update in HTML?
Depending on your needs you can use pipe (https://angular.io/guide/pipes) or transform the data to desired format in your component.
I would say it's not a good idea to have a method with side-call effects invoked in HTML.
There are a lot of ways to do this. A general advice: sometimes we are looking for an answer in the wrong places, be open :)
Instead of forcing ngFor, just run a simple array.map on your data before sending it to the template.
displayData = this.data.map(el => this.somehowRunThis(el))
this way you'll avoid having terrible performance.
If you don't care and still want to do this thing for some reason you can make your function return it and actually call in template:
{{ myFunctionReturnsText() }}
This is a bad idea because the function calls will run on each change detection so something like Pipes/Directives will be better.
I have a list of mat-card components that are individually expanded on clicking a button within each card. So far the Boolean variable has been defined within the HTML code itself rather than in the Angular .ts file, however I am wanting to transition this to use a Boolean in the .ts file.
I have attempted to assign a simple Boolean, however I now find that all of the cards expand at the same time...
I know what is wrong, but I cannot think about the way in which to fix it :-/
Here is a stackblitz
Since your cards are created with an ngFor directive from an array, the expanded data should be stored in an array too!
.ts
thisExpands = [];
.html
[ngClass]="{expanded: thisExpands[x]}"
(click)="thisExpands[x] = !thisExpands[x]"
Demo
I have a template dom-repeat element. I know that I can define the items attribute from an array, so that item can be accessed inside the template. However, I don't know how to access other objects inside the template if I bind them to customer polymer elements.
In this example, items is being defined by someItems, and item is passed into the element <my-el>. I also have a string mine that I want to pass into <my-el> and use there. I currently have the idea to do this in app-el.html, which contains the dom-repeat template:
app-el.html
<template is="dom-repeat" items="[[someItems]]">
<my-el item=[[item]] mine="[[mine]]"></my-el><br>
</template>
In theory, I would be able to access both in my-el.html like this:
my-el.html
[[item]] [[mine]]
However, when I try to access mine from inside <my-el> it is undefined. How can I correctly pass in this string so I can access it?
An MCVE can be found on this Plunker. Note how the item string is defined inside <my-el> but the mine string is not.
Your data bindings look correct, but there is no mine property for my-app. Did you mean to define <my-app>.myProperty as <my-app>.mine? Changing that property name to mine fixes your problem.
plunker
I'm trying to get sub elements of elements of an xml file. I tried using nested loops such as:
for each (var tempNode:XML in menu_xml.elements())
{
if (tempNode.children().length() > 0)
however couldn't accomplish that. Even if this this code works it will get elements for limited stages.
How can I get sub elements one by one, or is there a simpler way to do this?
EDIT: Here's the sample xml content:
<mainmenu>
<home/>
<portfolio/>
<contact/>
<friends>
<bestfriends>
<joe/>
<karen/>
<bob/>
</bestfriends>
<otherfriends>
<john/>
<peter/>
</otherfriends>
</friends>
<animals>
<cat/>
<dog/>
<horse/>
</animals>
</mainmenu>
EDIT 2: I havent decided how to use these nodes. Say I'll parse them to an array. arr[3][0][0] should be joe.
Why don't you use E4X? Here you can find some explanations:
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e72.html