Render value inside the another value in HTML - html

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"

Related

How to get a I18n variable value I can return to my Angular parent component?

I'm new to Angular and I just put in place an i18n (2 languages) system for a website I am creating. Everything works properly but in order to switch from one language to another in my header, I feel stuck.
I followed the Angular documentation to transfer my variables from child to parent component and I ended with this:
<input type="text" id="item-input" #lang>
<button type="button" (click)="changeChosenLang(lang.value)">
{{ 'global.lang' | translate }}
</button>
As you can see, I write my language in the input form and I send it to the proper component with a button. What I wanted was to click on my 'global.lang' text and to be able to send its value to the parent component, since the value is the language which is not actually used.
I don't know how to put my 'global.lang' text in a variable, neither what kind of balise I can use. Also I didn't know how to summarize my problem to search for it on StackOverflow so if you know a similar post, don't hesitate to post the link.
Thank you for your reading!
I found a less tortured way (poor brain) to have the result I wanted:
<span (click)="changeChosenLang()">
{{ 'global.lang' | translate }}
</span>
First I temporary changed my button to a span balise and I deleted the parameter from my changeChosenLang() function. Then, I transferred a variable 'lang' from my parent component to this one, witch contains the value of the language chosen in my app constructor. At each click, I change its value in my changeChosenLang() function and everything works great!
I hope it can help someone someday. The moral of this post is: the simpler, the better! Have a good day.

How to get a web element with a class attribute with several values

This is my problem: i have this html
as you can see there are two <div class="sc-fjhmcy dbJOiq flight-information"></div> and, i want to get the element using the class attribute, but only with the flight-information value, because
I think the part that is written as nonsense code ("sc-fjhmcy dbJOiq...) change daily
I have already tried with this xmlpath, $x('//div[contains(#class, "flight-information)"'], but its not working,
What could I do?...
I checked your code and I think that there is no big issue with this.
You need to use one class name to get the element, not two names, as below.
$(".sc-fjhmcy")
Then, this will be run correctly.
Best regards

can't get value from html tag

I'm trying to retrieve the value inside an html tag. I can retrieve the whole tag but not the value inside.
in app.component.html:
<p #docTitle>the thing I want to extract</p>
in app.component.ts
docTitle;
#ViewChild('docTitle') docTitle;
ngAfterViewInit(){
console.log(this.docTitle.nativeElement.value); //this gives me the whole tag
}
i've tried
<p id="docTitle">what I want to retrieve</p>
with
document.getElementById('docTitle').value //same as above, gives whole tag
The point of this whole thing is to retrieve the value (which is translated in different languages with i18n) in order to use it to settle the html page's title.
Thanks for the help.
docTitle.getElementById('docTitle').innerText
or
docTitle.getElementById('docTitle').textContent
or
docTitle.getElementById('docTitle').innerHTML
value is for input elements
You could do:
ngAfterViewInit(){
console.log(this.docTitle.nativeElement.innerHTML);
// OR
console.log(this.docTitle.nativeElement.textContent);
}

Trying to set a html property based on a code behind value

I'm trying the following:
<div id='divOwner' runat=server visible='<%# isAccountOwner(Me.UserId) %>'>
I would expect this to switch visible / invisible based on the value of isAccountOwner. This is not working as expected, and is always coming up visible. Can somebody enlighten me please?
Thanks
#in code nuggets (<% %>) is used with data bound controls like gridview, repeater control etc. For your div to work like this you need to call the DataBind method of this Div or one of its paremt control.
So, In page load include this line:-
divOwner.DataBind();
And make sure isAccountOwner returns a Boolean.

reading cookie value in play framewrok 2.2 scala template

I am trying to read a cookie value inside the play framework template (not inside a controller). I am trying the following which is not working:
# val cookieVal = request.cookies.get('PLAY_SESSION').value
Any suggestions to fix this will be greatly appreciated. The reason why I am trying this is to change how the page gets rendered based on a cookie value.
In templates you define vals as follows:
#defining(request.cookies.get('PLAY_SESSION').value) { theValue =>
<div>Hello #theValue</div>
}
I personally prefer to read the cookies in the controller and pass them to the template if needed.
suppose PLAY_SESSION stored "37f0983881ba00636868b42234a360d466fb944c-block_status=0&userId=159313257462171"
and you have to render on the basis of the value of block_status.
then in this case you can get its value by
session.get("block_status").get
to use it in template you have to import#implicit session:play.api.mvc.Session at your template.
now you can easily get values at template by #session.get("block_status").get
request.cookies.get("Org").get.value