I was trying to display a list in html as label for radio button which should look like this:
| option1 |
| option2 |
The option number is not fixed,in my back-end, I use AngularJs to make the website dynamic.
My code looks like this:
{{opt}}
Now the result I have looks like this:
| option1 |
| option2 |
I know it is because I only create a but don't know how to fix it, could anyone give me some suggestions?
From my understanding of your question you are trying to get your label buttons to look like list items?
If so use this CSS to get the container of your radio boxes to look like list items:
.label {
display: list-item;
}
Also I would like to point out that Angular JS is NOT a back-end framework.
AngularJS is a structural (front end) framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.
(Source)
You can read more about what Angular JS is over here.
You can also read more about Angular's Api over here.
Good luck and all the best.
Related
I have the following design:
UI Design
I want an input field like this i.e. having a text like Shipper Name or Contact Number on top of the input field. How can I achieve this in HTML ? I am not able to find it on the internet.
Thank you
you can use material-ui to access these kind of components without having to code it from scratch.
Their TextField looks exactly the same in the image you provided:
https://mui.com/material-ui/react-text-field/
Their documentation you can follow to integrate their library on your project:
https://mui.com/material-ui/getting-started/installation/
Use fieldset and legend
<fieldset><legend>Shipper Name</legend><input type="text"></fieldset>
I want to bold some contents in the popup. But is not interpreted instead is being displayed among the content
Is there any other way, leaving matToolTip to provide popup over hover in Angular
<button [matTooltip]="help|translate" type="button" mat-button class="button-save" [disabled]="!isInfoAvailable">
<mat-icon>help_outline</mat-icon>
</button>
Expected output
firstname mike
lastname ross
Actual output
<b>firstname <\b> mike <\n>
<b>lastname <\b> ross
I think native Angular Material Tooltips don't allow HTML code, so I suggest you to use an other provider for the Tooltips, there are a lot of those who allows HTML code like ng-bootstrap or tippy.js
I personally suggest you to use Tippy.js, here's the link where you can see how use HTML code on it.
https://atomiks.github.io/tippyjs/#html-content
Hope it helps you.
If you need simple customization (changing background-color, color, font-size...) for the whole tooltip you can read this post otherwise you can read this answer ⬇️
A similar post already exists: Angular 2 Material tooltip with HTML content in angular
What you are looking for is a Popover. And as said, it doesn't exist now and it's not possible with tooltips.
Answer from #jelbourn, Angular member team:
When designing the tooltip we deliberately decided not to support
this. The Material Design spec is rather prescriptive about only text
appearing in tooltips. Rich content also presents a challenge for
a11y.
Source: https://github.com/angular/components/issues/5440#issuecomment-313740211
You can find the feature request for popover here.
Until an official release from Material team you can use an alternative. Here are some examples:
https://github.com/joejordanbrown/popover (documentation here)
https://github.com/ncstate-sat/popover
https://github.com/maxisam/ngx-mat-popover (using Material Menu)
https://ng.ant.design/components/popover/en (ng-zorro lib)
I would like to dynamically add tooltips to some text. Ideally I would like to do so with the built-in tooltips shipped with Angular Material 2, but also a custom solution will do.
As an example, in the sentence the dog is barking, I would like to add to the word dog a tooltip displaying german shepherd.
The text is currently shown like this: <p>{{ stringFromSecureServer }}</p>.
So far I've tried with a custom pipe (addTooltip) with which I find and replace text:
transform(value: string): any {
value = value.replace('dog', '<span matTooltip="german shepherd">dog</span>');
value = this.sanitizer.bypassSecurityTrustScript(result);
return value;
}
If then I inject in the page the text with <p [innerHTML]="stringFromSecureServer | addTooltip"></p>, the text is actually modified, but matTooltip (Angular Material 2 component) is converted to mattooltip and it won't work.
Assuming that the problem was somehow linket to AM2, I've tried with a custom Directive, based on the excellent guide by Netanel Basal.
While the custom [tooltip] Directive is working with statically typed DOM elements (e.g. <span tooltip="test">test</span>), this still does not work when I find and replace the text as shown above.
Is there a way to achieve what I'm trying to do?
PS
As far as I can tell, I should not have XSS issues because all the strings that I need to work on are NOT user generated. All strings are served by the server through an https connection (Let's Encrypt auto renewed cert)
I have this link:
[[user1 | Foo:555-5555]]
[[user2 | Bar:555-5556]]
On each user page I have:
===UserName===
==PhoneNumber==
I want to make the link become automatic, something like this:
[[user1 | UserName:PhoneNumber]]
Is it possible?
I could not find a wiki entrance query, but using Semantic from MediaWiki as sugested by Tgr, it did the trick.
I have written my own table module. Calling it in HTML code looks like this:
<my-table [data]="variableWithArr"></my-table>
Now, pretty nice table is being displayed. Cool. But what if I want to have a progress bar in some column of table? I thought that I could put a HTML code with component selector as value, for example bootstrap progressBar, like this:
for(let record of variableWithArr) {
record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}
Unfortunatelly, Angular displays only a HTML code but dooes not interpret it as component selector, so I receive something like that in DOM:
<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>
How to fix it?
This is not how Angular works - you can't insert arbitrary HTML (innerHTML or otherwise) and expect that directives will be picked up & applied. Making Angular work this way would require shipping entire compiler to a browser and would defeat the whole purpose of all the great optimizations that can be done with the ahead-of-time (AOT) compilation.
tl;dr; nope, you can't do this and this has nothing to do with the ng-bootstrap project, but rather with design decisions behind Angular.
By looking at the docs you need to use the property [innerHTML], but to be clear only use it when you trust the code!!
So should be something like this:
<td [innerHTML]="record"></td>