<button type="button" onclick="alert('ex.HELLO')">PRESS ME</button>
-------------------------
need help with this
I want to customize the alert box that appears when I press a button, how?
There is no ability to customize the styling or css of an 'alert', the default visuals for this is down to the system/browser interpretation of this.
You can however create your own Modal/Alert (how to here: https://www.w3schools.com/howto/howto_css_modals.asp)
If your site includes Bootstrap, you can just use theirs which offers the ability to customize it with their helper classes and if needed your own CSS. http://getbootstrap.com/javascript/#modals
Related
I am trying to make the mid-section to be read only and just enabling the button "OPEN".
I have the below original code. "router-outlet" renders the combination of several feature components. And I do not want to disable each and every elements or feature components
<div="row mid-section">
<router-outlet></router-outlet>
</div>
<div class="row">
<button class="btn btn-default"> OPEN </button>
</div>
I tried by adding as below:
<div="row mid-section" readonly="readonly">
But it still allows to edit and click on button inside mid-section div.
I would really appreciate your help. Thank you!
The HTML readonly property doesn't work like that. Its only for form fields and must be on that actual DOM element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
Without seeing more of your code, I can't really give a better answer than these 2 options.
Option 1, a shared service that has that read only property. You could have a service, that has a behavior subject that you can update from the parent component. The inner components would all need to have that service injected, and do something appropriate when the value changes.
Option 2, you would need a container component that has a new boolean input, and it would need to pass that value down to all the children components (which would also need an input).
I am working to a little framework based on Angular/Material 9. I want to create custom directives that apply standard Material directives to their host element. For some UI elements, I prefer to use directives instead of creating custom wrapper components (using ng-content). For example, for buttons, I want use a "custom-button" directive like this:
<button type="button" custom-button>Hello world!</button>
The directive should apply the standard Material directives (and some other attribute, too) for buttons to the host element. The rendered HTML button should be:
<button type="button" custom-button mat-button mat-raised-button color="accent">Hello world!</button>
I know how to set properties/attributes, but obviously the button does not act like a "real" mat-button (it hasn't custom inner elements added by Material, nor the for the ripple effect).
I am pretty new with Angular, so I searched a lot for an answer. But I only found very complicated or outdated solutions (AngularJS). Any help?
I have a custom component in angular that handles images. I have alt text as an input to the element and the screen reader picks it up to utter it out. But whenever I tab to the image, it says 'Trash' group. I want the screen reader to read it out as 'Trash' button. How can I achieve this? The following is my current implementation:
Icn component:
<img [ngClass]="class" [file]="file" [alt]="alt">
Usage:
<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
I tried role="button" but that didn't work.
I don't know Angular so you may need to do some digging on how to structure this but your approach is making things difficult.
Instead make the button a <button>. This way you get all the native accessibility built in (e.g. accessible via tab by default, accepts focus, has hover and focus states etc.)and you will also get the correct announcements in screen readers.
Then place the icon inside the <button> and just style it appropriately.
<button> <!--add whatever directives angular requires here-->
<img [ngClass]="class" [file]="file" [alt]="alt">
</button>
Also you may consider using inline SVGs for your icons as they offer styling options and can change colour according to user preferences. It is also one less resource to download so will help with performance.
I figured out the solution to this problem by experimenting more with the roles.
The image tag doesn't take the role="button" as an attribute. Instead, the role needs to be assigned to the parent element of the image tag i.e., in my case the component icn like follows:
<icn class="del-icon" role="button" [file]="'trash'" [alt]="Trash"></icn>
Now, the screen reader software reads out as the 'Trash button' and gives further more instructions on how to interact with the button. And also if the above doesn't work, just by encapsulating the custom component in a span tag and assigning the role="button" to the span tag works like a charm.
<span class="del-btn-container" role="button">
<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
</span>
Note: Button role examples
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 am trying to make a button in a Modal take you to a new page but It wont change page.
Here is a pastebin for the whole lot - http://pastebin.com/2TBgYpbv
but the problem is this code here -
<button href="manager.php?staffname=<?php echo"$staffname";?>&ban=true" class="btn btn-primary">Confirm</button>
Please explain why it's not redirecting
Thanks in advance.
Change the button to an anchor. Keep the css classes etc. Or, add a button click handler to change window.location. I suggest the first option.
The button tag does not have an href attribute. Read more about button on w3schools