After Angular Material Migration from 14 to 15 this error appears:
Error: NG0300: Multiple components match node with tagname button: MatButton and MatIconButton
Ideas how this can be fixed?
The reason was using mat-button and mat-icon-button on same element
<button [matMenuTriggerFor]="menu" mat-button mat-icon-button>
To resolve this just use only one.
Related
I have a app.component.html and some images in .assets/images/
But browser annouce that ERROR TypeError: _co.url is not a function
Could you help me fix thí issue. Thanks
<mat-sidenav-container class="sidenav-container" autosize>
<mat-sidenav #sidenav class="mat-elevation-z4" mode="side">
<mat-nav-list *ngFor="let source of mSources">
<div mat-card-avatar [ngStyle]="{'background': url('../assets/images/abc-news.png')}" ></div>
<mat-list-item>{{source.name}}</mat-list-item>
</mat-nav-list>
</mat-sidenav>
</mat-sidenav-container>
Your formatting of the ngStyle value is incorrect. The value needs to be a string - as you have it, it is a function named 'url' because [ngStyle] will try to evaluate it as an expression. It should be:
[ngStyle]="{'background': 'url(\'../assets/images/abc-news.png\')'}"
But - since you aren't using an expression, you don't need [ngStyle] you can just use style:
style="background: url('../assets/images/abc-news.png');"
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>