I comment, and looked here and I can not find the solution, my problem is the following:
in my html template in angular, I need to pass a series of data to the metadata property of a button, I can't get the correct way to successfully concatenate the variable that contains the value.
this should be the html element:
<mati-button clientId="clientId" flowId="flowId" color="green"metadata='{"user_id":"1234778","email":"som#som.com"}'/>
I tried several ways but I can't insert the respective values....
example:
<mati-button metadata='{"userID": "{{user.id}}" }'></mati-button>
unsuccessfully...
Assuming mati-button is an Angular component with metadata as Input(), you are probably looking for
<mati-button
[clientId]="clientId"
[flowId]="flowId"
[color]="green"
[metadata]="{ userId: '1234778', email: 'som#som.com'}"
></mati-button>
See the guide on property binding to learn more:
To bind to an element's property, enclose it in square brackets, [], which identifies the property as a target property. [...] The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.
By "dynamic expression" they mean JS-expressions, i.e., a public variable available through the component's TypeScript, a boolean expression, an array, or, like in your case, a JS-object that you can construct inline.
You can try doing this
<mati-button metadata="{'userID': user.id }"></mati-button>
metadata='{" userID ": {{user.id}}}'
in the end I got it. Apparently I don't know why, but the third-party script hides that parameter and it couldn't be debugged in the console, but it does receive them without any problem! Thanks everyone for your help!
Related
I have an ARM template.
I know I can use a function called "trim" to remove spaces before and after a parameter.
But it doesn't not remove spaces inside a parameter.
e.g.
My parameter KidName contains - "Small Kid"
I want it to contain
"SmallKid"
trim(KidName) keeps the parameter with the same value.
Does anyone know or have any idea how I can do that?
Have you checked Replace function?
it could be something like this:
[replace(parameters(yourString'),' ', '')]
https://learn.microsoft.com/en-us/azure/azure-resource-manager/templates/template-functions-string#replace
I am faced with the question of how I should set up my Angular components with regard to inputs.
The first variant would be to create an input variable for each given value. This means that you would have to enter each variable individually when calling it:
The second variant would be to pack all the required values in a model and only include this model. So in the end only one input:
Now I don't know which of the two variants is better suited for a large app with many components.
Is there one i should prefer from these two or are there more i dont know yet?
It depends upon your component info what info you are passing for example if the component is a shared button in which expected inputs could be button name, class, status etc.
In that scenario instead of passing all inputs separately you could go with one object lets say props which contains button properties.
export interface IButtonProps {
text: string;
class: string;
disabled?: boolean;
}
buttonData: IButtonProps;
this.buttonData = {
...this.buttonData,
text: 'Submit',
class: 'primary',
disabled: false
}
In template instead of passing individual input pass an object of buttonData
<my-button [props]="buttonData"></my-button>
Your example doesn't really explain itself too well but here goes:
If your input's are all of the same type and used for the same thing, theres nothing wrong with putting all of them in an array and passing them to the child.
Instead of:
[input]="'string1'" [input2]="'string2'" you could do [input]="['string1', 'string2']"
However consider this:
[iconClass]="'my-icon-class'" [buttonClass]="'my-button-class'"
Each of the inputs do something completely different, so putting them inside of an array would be very bad practice.
What you could also do is put all inputs in an object, for example:
input = { iconClass: 'my-icon-class', buttonClass: 'my-button-class' };
[input]="input"
You should only be using this, if the inputs are somehow related or/and do the same thing / modify the same element in the child.
I am a beginner at Angular and I covering two way binding but for some reason I do not understand what I am doing wrong with the below any input would be appreciated.
I am simply trying to understand the concept so the below code is rather simple. Per my understanding
Adding the two way binding [()] to <app-child-comp> I pass the parent field "name" from the parent component to the parent view and using property binding it provides an initialization value ( default value ) to the child component that receives the value in the #Input field.
Once the field "#Input childName " has its value using normal interpolation I can use the value how ever I please in the child template.
Now by defining an EventEmitter and then using its .emit method I should be able to pass any changes on the variable back up to the parent component and update the DOM property to reflect the changes.
Problem:
Now this is my problem the parent --> child direction the bindings are working as intended,
the name "Fin" is appearing as I expect in the input of the parent Template and in the interpolation in the child template but when I want to alter the name in the child template and have it bubble back up to the parent property it fails to update although it updates the interpolation in the child template.
Ive been trying to figure this out now for a while and everything im researching I feel says im doing it correctly but if you could please explain what im doing wrong I would much appreciate it.
Im adding this so that anyone looking in the future can learn from my mistake.
There are two ways to perform event binding given a child component
The first way is by explicitly declaring the property and event bindings as follows <app-child-comp [childName]="name" (childNameChange)="name =$event"></app-child-comp>
The second way is to use the "Banana Box" Method where the child tag transforms into <app-child-comp [(childName)]="name"></app-child-comp>
I was trying to use the second method and something that wasn't immediately clear is that there is a naming convention when it comes to the field names in the child component that needs to be followed in order for the "Banana Method" to work
Rule: If your #Input field is named "x" then your #Output EventEmitter needs to be named "xChange" the "Change" is required as the second part of the name .
Syntax: inputName + Change
So in order to resolve my problem I needed to change the naming convention from
#Input() childName:string;
#Output() changedName = new EventEmitter<string>();
to
#Input() childName:string;
#Output() childNameChange = new EventEmitter<string>();
You have to add the output in your root component:
<app-child-app [(childName)]="name" (changedName)="name = $event"></app-child-app>
I'm trying to make a <select> behave with single or multiple selection depending on a condition. So far I have tried:
<select
ng-model="data.model"
ng-attr-multiple="{{myCondition ? '' : undefined}}">
(here's a plnkr I have been testing with https://plnkr.co/edit/ACKBMZSJc2MVSJaDBGMY?p=preview)
But it won't work. Even leaving ng-attr-multiple alone won't work. What am I missing here?
https://docs.angularjs.org/error/$compile/selmulti
Binding to the multiple attribute of select element is not supported
since switching between multiple and single mode changes the ngModel
object type from instance to array of instances which breaks the model
semantics.
If you need to use different types of select elements in your template
based on some variable, please use ngIf or ngSwitch directives to
select one of them to be used at runtime.
I tried binding a value to an input using a variable that has been declared in the data object, but I also need to add a prefix and a suffix
<input id="topnavback", v-bind:value="rgb({{themestopnavback}})", class="jscolor"/>
The value themetopnavback is the value defined in data and I want to put the rgb with bracktes around it.
But this always causes the whole page not to render the DOM which only occurs if you try to access a Vue variable which isn't existing in the data object. Is this just wrong or isn't it possible to bind a value with additional strings?
Thanks in advance
v-bind:value="'rgb(' + themestopnavback + ')'"