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>
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 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 have been trying to add icon from http://seehowsupport.com/font-awesome/ website to my p-button.
<div class="ui-g-12">
<button pButton id="selectFile" (click)="selectFile()" label="+ Select File..."></button>
</div>
here, in place of '+' in label, i wish to set icon from above url. I have heard changing some content attribute in css to \f067 can do it but m not sure how to.
Thanks
Icon on a button is specified with icon attribute and position is customized using iconPos attribute. Default icon position is left. To display only an icon, leave label as undefined.
Here are two ways by which you can add icons to primeng Button.
<button pButton type="button" icon="pi pi-check" iconPos="left"></button>
<p-button label="Click" icon="fa fa-check" iconPos="left"></p-button>
working Example
For more read on documentation -
https://primefaces.org/primeng/#/button
Use This way where it shows in their documentation and it works.
<div class="ui-g-12">
<button pButton id="selectFile" (click)="selectFile()" label="Select File..."><i class="fas fa-500px"></i>Text</button>
</div>
Link for How to use it https://fontawesome.com/how-to-use/svg-with-js
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>
I have created a button using
<button type="button" class="btn btn-success btn-lg ">Register</button>
How could I give a link to another page when the button is pressed?
Use a anchor instead, and you can still style it as a button..
Register
Bootply: http://www.bootply.com/99320