I have mat-table and select button above mat-table. Once I click select butotn, I am pulling datas from web API and I want data to be viewed in table. But clever!! Angular team does not support this or not documented. Very classical things are not supported in angular-Material components.
Let me ask question:
.html
<button class="btn btn-primary"
(click)="list()">
Select
</button>
<mat-table [dataSource]="dataSource1" class="mat-elevation-z8">
......
</mat-table>
.ts
list() {
dataSource1 = .....
}
How can I provide this ? Table is not rendered after datas are successfully assigned to dataSource1 in list() method. What should I do to rerender
you should use renderRows method of MatTable.
https://material.angular.io/components/table/api#MatTable
.html
<button class="btn btn-primary"
(click)="list()">
Select
</button>
<mat-table #myTable [dataSource]="dataSource1" class="mat-elevation-z8">
......
</mat-table>
.ts
#ViewChild("myTable") myTable:MatTable;
list() {
dataSource1 = .....
myTable.renderRows();
}
I searched a lot and after searching for 10 hours , I realized that I had applied Angular material 7.x component and after changing the sample for material 5.2.5 , It worked for me
Related
I have a standard Angular Material Menu in a toolbar...
<button mat-icon-button #videoMenu #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="vidmenu" matTooltip="Watch videos" class="toolbar-btn"
(click)="onShowVid()">
<mat-icon [style.color]=vidIconColor [style.background-color]=vidIconBackcolor>local_movies</mat-icon>
</button>
<mat-menu #vidmenu="matMenu">
<button mat-menu-item>
<img src="assets/images/vid_welcome.jpg" height=40px/>
<span> Welcome</span>
</button>
<button mat-menu-item>
<img src="assets/images/vid_video1.jpg" height=40px/>
<span>Video 1</span>
</button>
<button mat-menu-item>
<img src="assets/images/vid_video2.jpg" height=40px/>
<span>Video 2</span>
</button>
</mat-menu>
In testing, users are not seeing the material menu icon no matter how large we make it. One user suggested we start the experience off with the menu open... that way they can see the choices, click on one, and the menu closes. Then they will know it's there for future use.
I have researched remotely triggering the click() to open it on during ngOnInit(), but all examples are in older angular versions, and even if I got it working, I'm guessing it will be buggy.
Is there a way to simply set a menu to a default state of being "open", and then just function normally from there?
Ensure you are using the following directive on the button which is used as the menu trigger on the UI.
<button
[matMenuTriggerFor]="menu">
</button>
<mat-menu #menu="matMenu">
...
</mat-menu>
Then in the .ts code of your component, ensure you have the following import:
import { MatMenuTrigger } from "#angular/material/menu"
Create the following property:
#ViewChild(MatMenuTrigger) adjustersMenuTrigger: MatMenuTrigger
Then finally to open the menu programmatically, use the following code:
this.adjustersMenuTrigger.openMenu()
I use this navigation in my Angular 5/Angular Materials application:
<!-- Navigation -->
<mat-toolbar color="warn">
<mat-toolbar-row>
<span class="nav-icon">
My Icon
</span>
<span class="nav-spacer"></span>
<button mat-button [routerLink]="['/home']">Home</button>
<button mat-button [routerLink]="['/login']">Login</button>
<button mat-button (click)="logout()">Logout</button>
</mat-toolbar-row>
</mat-toolbar>
<!-- Router Outlet -->
<router-outlet></router-outlet>
Actually I could not find how to set the active menu button active. Is there a way of doing this, e.g. with Route?
In Angular 6 you can add the routerLinkActive attribute to buttons. When the corresponding route is the current one, the content of this attribute will be added to the element's css classes.
For example:
<button mat-button [routerLink]="['/home']" routerLinkActive="mat-accent">
Home
</button>
When this button is clicked and the corresponding route becomes the active one, it will get the additional mat-accent CSS class.
Reference: Angular.io docs, Angular API docs
Hopefully, this helps someone the active class was not working for me I'm using Angular version 12.0.5
I replaced:
<button mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton">Anxiety Depression Graph</button>
With:
<a mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton" >Anxiety Depression Graph</a>
CSS:
.activebutton
{
background-color: rgb(51, 51, 51);
color: white;
}
This solved my active button issues.
I want to create a theme for my angular 4 app using angular material 2.I created the initial part but it doesn't work. What have I done wrong in this code?
--Theme.scss
#import "~#angular/material/_theming";
#include mat-core();
$app-primary: mat-palette($mat-blue, 600);
$app-accent: mat-palette($mat-green, 600);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn );
#include angular-material-theme($app-theme);
-- Component
<button color="primary" class="mat-raised-button">Pick Up</button>
<button color="accent" class="mat-raised-button">Drop Off</button>
-- angular-cli.json
"styles": [
"styles.css",
"theme.scss"
]
It's a simple fix. Like I said in the comment on your question, just remove the underscore. Easy.
You should also use the mat-raised-button attribute instead of the class (if you're using 2.0.0-beta.11 and above).
<button color="primary" mat-raised-button>Pick Up</button>
<button color="accent" mat-raised-button>Drop Off</button>
If you're using 2.0.0-beta.10 or below, use the md-raised-button attribute.
<button color="primary" md-raised-button>Pick Up</button>
<button color="accent" md-raised-button>Drop Off</button>
How should I display a Thymeleaf i18n messages on the code below:
<button th:text="#{msg_warning}" onclick="return confirm("[[#{msg_confirm_warning}]]")">
Delete
</button>
Even using th:attr
<button th:text="#{msg_warning}" th:attr="onclick='return confirm(\'#{msg_confirm_warning}\');'">
Delete
</button>
The output should be the string value of msg_confirm_warning whenever the button is clicked. But it displays [[#{msg_confirm_warning}]] string instead.
Well I guess I made the wrong syntax. With the code below, it solved my problem.
<button th:text="#{msg_warning}" th:attr="onclick='return confirm(\'' + #{msg_confirm_warning} + '\');'">
Delete
</button>
I've been trying to add icons to my save, delete, etc. buttons. I have about five buttons using the <g:actionSubmit> tag to call an action in a controller to perform the corresponding functions. My problem is that FontAwesome and bootstrap's glyphicons require the <i class="icon-***"> tag to be used like so:
<a href="http://google.com">
<i class="icon-ok"></i> Google
</a>
In grails this format of the tag in between the initial tag is not possible (at least with actionSubmit). The value attribute is the string that is displayed. Is there any work around for this? Keep in mind I still need to map the buttons action back to a controller which is why I've had issue using a straight <button> tag like what is recommended for bootstrap.
UPDATE:
I'm having a lot of problems using the current 2 answers. They both work for adding the icons, but I'm getting some nuisances that I'm having to hack a lot of things up to fix. I thought about another solution but am having some problems implementing it. I'd like to write my own tag lib using the base of the taglib as the actionSubmit tag lib below:
def actionSubmit = {attrs ->
attrs.tagName = "actionSubmit"
if (!attrs.value) {
throwTagError("Tag [$attrs.tagName] is missing required attribute [value]")
}
// add action and value
def value = attrs.remove('value')
def action = attrs.action ? attrs.remove('action') : value
out << "<input type=\"submit\" name=\"_action_${action}\" value=\"${value}\" "
// process remaining attributes
outputAttributes(attrs)
// close tag
out << '/>'
}
The only change I need to make is to give it the ability to take the
<i class="icon-ok"></i>
tag in between a:
<g:actionSubmit ...> </g:actionSubmit>
Does anyone have suggestions or for this implementation?
Don't use actionSubmit, just use a <button> and provide the link/action properties like so:
<button type="submit" class="btn">
<i class="..."></i> Update
</button>
here's a more detailed example
<button type="submit" class="btn btn-danger" name="_action_delete" value="Delete">
<i class="..."></i> ${message(code: 'default.button.delete.label', default: 'Delete')}
</button>
Note: actionSubmit passes the following input name/values for update, save and delete
name="_action_update" //update
name="_action_update" //save
name="_action_delete" //delete
so you would just need to do the same if you're app is dependent on them
Try passing the class name to remoteLink, which creates a link that uses Ajax to call a remote function and you can add your fontAwesome classes to it.
<g:remoteLink class="btn icon-ok" action="index" >
click (without i tag)
</g:remoteLink>
or
<g:remoteLink action="index" >
<i class="btn icon-ok">click (with i tag) </i>
</g:remoteLink>
Both approaches should work.