I need help in css to obtain a Button
<button mat-icon-button>
<mat-icon>format_align_left</mat-icon>
</button>
Equivalent (in design) to a Button toggle
<mat-button-toggle-group>
<mat-button-toggle>
<mat-icon>format_align_left</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
Because in a real toolbar (see button toggle for example), some of the command (eg : indent) are not toggled but just clicked.
But i don't find the exact css to apply on my button...
Thank you for your help !
You can use any of the built-in angular styles directly, such as mat-button-toggle-checked which applies the toggle button's filled background color.
A toggle button that is not "on" or pressed is basically a raised button without a minimum width. So, to make a regular button look like a toggle button:
<button mat-button mat-raised-button style="min-width: unset;">
<mat-icon>format_align_left</mat-icon>
</button>
A toggle button that is "on" or pressed is basically a raised button without a minimum width filled with the "on" color from the toggle button. So, to make a regular button look like a toggle button that is "on":
<button mat-button mat-raised-button style="min-width: unset;"
class="mat-button-toggle-checked">
<mat-icon>format_align_left</mat-icon>
</button>
You can combine the two in one button to produce your own "standalone" toggle button using ngClass and some simple logic:
<button mat-button mat-raised-button style="min-width: unset;"
[ngClass]="{'mat-button-toggle-checked' : on}"
(click)="on = !on;">
<mat-icon>format_align_left</mat-icon>
</button>
But of course you don't need to do that because you can use a single mat-button-toggle inside a mat-button-toggle-group with the multiple option to have a standalone toggle button:
<mat-button-toggle-group multiple>
<mat-button-toggle value="left">
<mat-icon>format_align_left</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
Related
I want to search the Angular component name for this widget which is three dots, and when we click it then something like a context-menu appears:
How is it called?
Search here for that icon https://material.io/resources/icons/?search=dot&style=baseline.
And here you have some examples of creating this type of menu https://material.angular.io/components/menu/examples
I guess this is what you're looking for, here is my code that works
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon button with a horizontal three dot icon">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Edit</button>
<button mat-menu-item>View</button>
<button mat-menu-item>Delete</button>
</mat-menu>
To change the three dot to be vertical, simple change this
more_horiz
to
more_vert
I have a mat-icon button,however after adding [routerlink]="[/edit-job]" I am not able to view the button icon. Although I can see mat-tooltip and on clicking it redirects me to edit page but I am unable to viewe Icon.
Current Code for Mat-Button
<button
mat-icon-button
[routerLink]="['/edit-job']"
matTooltip="Edit Job"
></button>
However If I change my code to this I am able to view Icon properly
<button mat-icon-button (click)="editJob()" matTooltip="Edit Job">
<mat-icon>edit</mat-icon>
</button>
Can someone tell what am I doing wrong and how to fix it.
I am attaching a screenshot for better understanding.
As shown on the documentation you should add the import on app-module
https://material.angular.io/components/button/api
The import to add is :
import {MatButtonModule} from '#angular/material/button';
And thats an example of material button :
<button mat-icon-button>Click me!</button>
You have to include <mat-icon>edit</mat-icon> inside the <button> tag for the first case too.
as #Sumit Vekariya said add <mat-icon>edit</mat-icon> to your button
Ex:
<button mat-icon-button [routerLink]="['/edit-job']" matTooltip="Edit Job">
<mat-icon>edit</mat-icon>
</button>
Requirement is to show an information message as to why save button is disabled. For the save button to enabled, some mandatory filters have to be chosen. So for the user to be aware of it, im trying to display a popover on the disabled button which shows the necessary information. I would want to display the popover to display on top of the button as soon as it is disabled. As of now my present code tries to achieve most of the requirement, except that i have to physically hover or click on the button to display the popup. I want to show the popup as soon as the button is disabled due to some logic in the code behind.
<button id="btnCancel" title="Cancel" aria-label="Cancel Filter dialog" class="btn btn-cancel"
style="margin-right: 5px;" (click)="close();" (keydown)="trapFocus('cancel',$event)">CANCEL</button>
<button id="btnApply" title="Apply" class="btn btn-primary"
[disabled]="!(checkIfAnyFiltersAreSelected() && checkIfMandatoryFiltersAreSelected())"
(click)="onApply()" (keydown)="trapFocus('apply',$event)">
<span triggers="hover" *ngIf="!checkIfMandatoryFiltersAreSelected(); else elseTemplate" [ngbPopover]="popContent"
popoverTitle="Mandatory Filters">
APPLY
</span>
<ng-template #elseTemplate>
APPLY
</ng-template>
</button>
<ng-template #popContent>Necessary Information to be shown here</ng-template>
Tried to follow the solution in this question, but the answer is not clear and is not solving the issue
ngbPopover will not close and will open on load
You can accomplish this by defining a manual trigger for the popover and passing the popover into the function that determines whether the button is disabled, so that if the button is disabled the popover can be opened programatically.
HTML Template
If you define the button as follows:
<button type="button" class="btn btn-outline-secondary mr-2"
placement="top" ngbPopover="Displayed when button is disabled"
triggers="manual" #p="ngbPopover" [disabled]="isDisabled(p)">
Apply
</button>
triggers="manual" means it won't be triggered automatically by hovering over the button
#p="ngbPopover" is the reference to the NgbPopover object
[disabled]="isDisabled(p)" is a function that returns a boolean indicating whether the button should be disabled or not. Passing in p (the NgbPopover) allows it to be opened programatically in the isDisabled function.
TypeScript
The isDisabled function looks like this:
isDisabled(popover) {
if (this.disabled) {
popover.open();
}
return this.disabled;
}
This checks the value of the disabled property (this is just a boolean I've defined in the TypeScript file), and will open the popover if it is true. It then returns the value so that the HTML template can enable/disable the button accordingly.
Please see this StackBlitz for a demo. If you toggle the checkbox (which is bound to the disabled TypeScript property, you will see that the popover is displayed when the button is disabled.
I am using angular 7 and material design toolkit. I have a form which has multiple validations and two buttons; One is for opening the file picker ('upload image' button) and other is for submitting the form .Whenever I click the 'upload image' button, whose 'type' is unspecified,all the validations/errors in the form instantly appears on the corresponding fields.Is there anyway to avoid this?
This is the HTML code for 'upload image' button:
<input
style="display: none"
type="file" (change)="uploadFile($event)"
#fileInput>
<button mat-button color="primary" (click)="fileInput.click()">Select File</button>
</div>
Thanks in advance.
When a button's type is not specified and it's found inside a form, it is automatically treated as type=submit button. You need to specify type=button if you do not wish it to trigger the submit mechanism.
<button mat-button type="button" color="primary" (click)="fileInput.click()">Select File</button>
Use the button type as button, under a form a button with no type is considered as Submit.
<button type="button" mat-button color="primary" (click)="fileInput.click()">Select File</button>
I am testing out Material Design Light component library.
I have some input attributes that are in the form of buttons and I was wondering how can I switch those input buttons to the button attribute because MDL uses the button attribute. Though I don't know how I'd do this and keep the properties that the input attributes have such as “accept”, “type”, etc. The code I’m testing with currently is right here:
https://jsfiddle.net/ErraticFox/46654fzy/
<input id="uploadSound" accept='audio/wav, audio/x-wav, audio/mpeg, audio/vorbis, application/ogg' type="file">
<!--
MDL Button:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
-->
You can't change input to button in this case because it would lose funcionality but you can make it look like button by hiding <input> and taking advantage of <label> and it's for attribute which will delegate event to input with given id.
Example: https://jsfiddle.net/k2eau0oe/