Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
Christian Oleson
@Christian-Oleson
jrd6dk
@jrd6dk
Can anyone see an issue in making NavigateToPage on MatTable Public, and should I make a pull request for it? Or does anyone have a better suggestion?
Simon-Miller
@Simon-Miller
@fpugliesedotcom I tend to favour matSelectItem although others might choose the MatSelect or MatSelectValue.
Alexandre Fortin
@afortin7
Hi all, Is there a way to set focus on a MatTextField on load ?
Alexandre Fortin
@afortin7
If anyone search how to do, I follow these steps : https://www.peug.net/en/how-to-set-the-focus-to-an-input-element-with-blazor/
NeelBhatt
@NeelBhatt
Hello all, I am trying to use DatePicker in a component I am creating for date range. So basically date range component will have start and end date, 2 separate date picker matblazor. Question is what is a better way to handle validations like end date should not be greater than start date and all those validations. That should be handled within child component? Does anyone have similar example to take reference from? Note that I started working on blazor last week so I am fairly new :D Thanks in advance.
codenetw
@codenetw_gitlab

How to use MatSelectItem, i get compiletime error on simple operation ValueChange
`

<MatSelectItem ValueChanged="@(async (string x) => { await OnChangeExchange(x); })" Value="Exchange.All" Label="Exchange" Items="@exchanges"></MatSelectItem>

@code {
IReadOnlyList<Exchange> exchanges = Enum.GetValues(typeof(Exchange)).Cast<Exchange>().ToList();
private async Task OnChangeExchange(string value)
{

}
}
`

error: Type arguments for the method "TypeInference.CreateMatSelectItem_1 <TValue> (RenderTreeBuilder, int, int, EventCallback <TValue>
, int, TValue, int, string, int, IReadOnlyList <TValue>) "cannot be determined by use. Try to explicitly define the type arguments.

Christian Oleson
@Christian-Oleson
Use the type argument for the select item component
1 reply
Christian Oleson
@Christian-Oleson
Great!
Simon-Miller
@Simon-Miller
@codenetw_gitlab Someone will correct me if I'm wrong here, but I believe 'Value' is a single item of the same type as the item in your collection (Exchange) and you bound 'exchanges.All'. That doesn't exist as a property of IReadOnlyList<T>. So the razor compiler is getting confused, and is asking what type you think the singular is supposed to be. If you use @bind-value="@mySingularProperty" where you define a property in your @code{ } area, then you can receive the output from the MatSelectItem without resorting to events. Personally, I tend to write getter/setter code in my properties if I wish to process the selected item immediately in some way.
blazor fiddle
Alexandre Fortin
@afortin7

I'm using MatSelectItem and binding the Disabled Property. When the property is initially true and then made false, the selection box does not open to show the options. Before I submit a bug in the repo, can someone else verify as well?

I have the same problem when I update my package to 2.8. The only workaround I found is to use the 2.6.2 version... I still want to use the latest feature that the package offer, have you submit the bug to the repo ?

Simon-Miller
@Simon-Miller
@afortin7 see: SamProf/MatBlazor#826
In the meantime, I created a component that takes parameters matching MatBlazor's MatSelectItem, and wrapped 2 of those in an @if(disabled) { <MatSelectItem /> } else { <MatSelectItem /> }
Chadley08
@Chadley08
Hello, we are attempting to use CSS isolation on some custom components that have MatBlazor components in them. When we run the app, the IDs that are supposed to be generated for the components are not applied to the MatBlazor components. So for example, if I have a NavMenu.razor component that has a MatNavMenu and some MatNavItems, and I want to apply some custom styling using CSS isolation to the MatNavItems, the IDs from Blazor are not showing up in the generated HTML. Is there a way to require MatBlazor to use the IDs generated by Blazor CSS isolation?
Chadley08
@Chadley08
Here is the HTML generated
image.png
And here is the css class file generated by blazor
image.png
So the .mdc-nav-li class generated when MatBlazor is creating the HTML does not have the correct selector from Blazor when it performs its CSS isolation magic.
Simon-Miller
@Simon-Miller

@Chadley08 Your own component will have its CSS isolation, as will MatBlazor's. Each being isolated by the nature of isolation. (That's a Blazor feature, not MatBlazor)

You're asking is there's a way for a CSS isolated component to NOT be CSS isolated - more like "scoped" to your component. I've no idea if that exists?

It sounds like you actually want to define a css class, and just pass on the CSS class name in the "Class" parameter of your MatBlazor components? If not, you can write to the "Style" parameter each time you use a MatBlazor component. That would give you isolation in the raw sense.

vallgrenerik
@vallgrenerik
Hi!
Is it possible to style the icon in a MatButton?
image.png
Increase font and align it properly
Simon-Miller
@Simon-Miller
@vallgrenerik You can add css via the Class or Style properties. I've made an example using a css class that looks for the child span having the 'material-icon' class itself. see for yourself here in this BlazorFiddle.
vallgrenerik
@vallgrenerik
Thanks a lot @Simon-Miller ! Awesome
Another question: When using a MatDialog, how do i detect if the modal is closed by "clicking outside" the modal?
Simon-Miller
@Simon-Miller
@vallgrenerik You should use @bind-IsOpen to share the state between your own code, and a MatDialog. I tend to make a hand-coded property where the setter can run some other code. It acts like an event-callback because you can run code on the setter. So when MatDialog closes, it sets the IsOpen to false, and your code can run. I've modified one of the MatDialog examples here to demonstrate. Note the text that appears at the top when the dialog is closed in any way.
vallgrenerik
@vallgrenerik
Thanks again @Simon-Miller ! Really appreciate it!
I solved it like this (With IsOpenChanged) Do you see any problems with this?
image.png
Don't know if it's readable, but i have a modal with a video.
When the modal is closed, I want to pause the video.
It works now :)
Simon-Miller
@Simon-Miller
@vallgrenerik Glad I could help. There's no issue with what you're doing. You've just separated boolean value from changes, hence why you've providing a value as input only, and then responding to its change with a callback to your code. If this feels better to you, you've no reason to worry. Personally, I prefer to have less parameters as possible, so as not to overwhelm the next person who reads the code after me.
Oh, one thing, your event handling code - - as it looks like you're going to communicate with your component via a @ref= then unless you're also going to access your component behind an interface, - the event handling code is marked public, and should likely be private or protected virtual?. Happy coding!
vallgrenerik
@vallgrenerik
@Simon-Miller Awesome. Yes thanks, changed IsOpenChanged to private. Thank you
José Alejandro Gil
@josegilx
Hola buenas tardes, alguien sabe como cambiar el idioma a MatDatePicker, a español. Muchas gracias.
Christian Oleson
@Christian-Oleson
Hola Jose, no se si hay una manera a cambiar el languaje a otra que ingles....
José Alejandro Gil
@josegilx
@Christian-Oleson Esta bien, muchas gracias, seguiré investigando.
Christian Oleson
@Christian-Oleson
Si quieres, eso sería algo bueno implementar en MatBlazor como un contributor.
vallgrenerik
@vallgrenerik
Hi!
Has anyone tried Dotnet 6 Preview 3 with hot reload?
I've tried it and it works great with a new simple Blazor WASM (ASP.Core Hosted).
But when I install and import MatBlazor, the Hot reload functionality crashes and stops.
Do you think this is a bug with MatBlazor or with Dotnet 6 preview?
Albawab
@Albawab
Hallo!
Is there anyone who can help me?
I want menubalk with Blazor like Outlook/microsoft
Thank you.
Screenshot 2021-04-13 091516.jpg
Simon-Miller
@Simon-Miller
@Albawab There's no single component in MatBlazor to do this. The drop-down menus could be done using MatMenu easily enough. MatMenu . Note that in the example a MatButton is used to activate the menu. So in the same respect, if you wanted something else to appear, it doesn't have to be a MatMenu. I guess something more advanced like the MatDrawer is what you're looking for, where you can hide a bunch of content, but instead you just want a single ellipses button. So you can create your own DIV containing all of that, and control its visibility based on a button click to hide/show it?
Albawab
@Albawab
@Simon-Miller Thank you.
Christian Oleson
@Christian-Oleson
@vallgrenerik ,
I assume hot reload won’t work since Matblazor doesn’t run in .NET 6 yet. No support has been explicitly added for it
Aşkın Nur Sinani
@nursinani
Hello guys, I m using matblazor datepicker and so far it works great. However I need to use local time and change the culture so that I can use specific month names, weekday names .. How can I solve it?
Christian Oleson
@Christian-Oleson
I don’t believe that date picker supports that yet. I could be wrong, but it used to not support it.
Aşkın Nur Sinani
@nursinani
you re right it doesnt support it thanks anyway
Christian Oleson
@Christian-Oleson
It is definitely something you could add via a PR. 🙂
vallgrenerik
@vallgrenerik
Hello again! :)
Is it possible to add just a timepicker? Not a picker with date + time. Just time :) Thanks!
Simon-Miller
@Simon-Miller
@vallgrenerik Not sure what the official team would say - but as best I can see, you can't easily switch off the date-part of the date picker. Time appears to be an optional extra, and wasn't designed to be used independent of the date. Having said that, I've just had a bit of a play. You'd have to get heavy-handed with some css to force the display:none !important; to be applied to .flatpickr-months and .flatpickr-innerContainer. You'd need to adjust the formatting of the output so it only shows the time too. Sure sounds like a whole new component to me! Perhaps raise this as a MatBlazor Feature Request over on issues
vallgrenerik
@vallgrenerik
Thanks @Simon-Miller , I will have to think how to solve this.
I see MudBlazor has a seperate time-component: https://mudblazor.com/components/timepicker
vallgrenerik
@vallgrenerik
Is it possible to use MatSelect to select TimeSpan? I can't seem to figure it out https://blazorfiddle.com/s/yz0f89x7
Simon-Miller
@Simon-Miller
@vallgrenerik I've not looked at the source to see, but why wouldn't you want a DateTime from a date picker? What's your use case?