What is Reddit's opinion of
Angular Material?
From 3.5 billion Reddit comments
100 reviews of this app found across Reddit:
I'm confused. How is this different from mat-select that is included in the official google release of angular material?
I'm using Angular Material as an example since their docs are better than the React Material library but you'd use an existing UI framework like this that has already solved accessibility and the myriad of UX issues you'll encounter designing a navigation menu from scratch: https://material.angular.io/components/menu/examples
You're not forced to download anything. For example, if you are using material autocomplete you can defualt the options to null, or empty. then as the user types a certain amount of characters, hit your API to get a list of suitible matches from your backend.
https://material.angular.io/components/autocomplete/overview
You can also bind to the observable directly using the async decorator. There are also the ng-pending class to show a spinner or message if needed.
Hope this helps.
It looks like you installed the old dependency angular2-material.
This package was used early in the pre-release development cycle of Angular Material v2, but has no longer been used since September of 2016. Development of Angular Material now occurs under scoped npm package @angular/material. Visit https://material.angular.io for the latest information and instructions for using Angular Material or check out the latest source code from https://github.com/angular/material2.
You need @angular/material
The mat-form-field component now supports 4 different appearance variants which can be set via the appearance input (legacy, standard, fill and outline). Here is a link to the page where you can find more info about it.
https://material.angular.io/components/dialog/api
I'm not very familiar with angular material, but it looks like you could try to listen on backdropClick observable and manually close it if you don't find a different way to get the css without pointer-events: auto. Might just be a bandaid fix but something to try
You've left out a crucial step. How are you populating your "dataSource" variable?
The datasource should be a properly populated array of data (like in the examples, https://material.angular.io/components/table/examples). So for example:
const data = JSON.parse([your json]); this.dataSource = data.values;
There is a library which adapts the MDC web components to angular:
https://github.com/trimox/angular-mdc-web
And of course there is Angular Material:
Here we have used the latter very extensively; would like to try the former just for variety, but we heavily use mat-table / cdk-table and MDC Web does not have anything with that level of power/abstractions.
we tend to use implementations of the material design spec these days for random internal sites.
if you're making a site with any amount of actual functionality, you're going to want some front-end framework to give you more controls to use. like a date picker or tables with sorting or pagination or whatever. unless you're really into front-end work, i wouldn't be so worried about using an off-the-shelf framework like bootstrap for that.
Start with a component library (like https://material.angular.io/ ). This will let you make pretty nice looking websites without having to know much about "design".
IMO, after using component libraries for a few projects, you will eventually know enough about CSS and understand what looks good to you, that eventually you'll be able to roll your own, should you want to.
It's absolutely possible. I've done it multiple times.
Check Angular Material Documentation
Look for the table example 'Table retrieving data through HTTP'.
I'm using angular material: https://material.angular.io/
It's spefically build for angular applications, but there are other variants. You find them quickly if you google "material design for the web" or something like that.
One thought I have is to use the angular/cdk's portals https://material.angular.io/cdk/portal/overview
This can also be achieved with angular/core's ComponentFactoryResolver, but not as easily.
~~Ok I swear it wasn't doing this last week. I just tried it again without calling ToList and it's working exactly like I want it to. Last week it was doing this: {"key0":"value0","key1":"value1",etc}.~~
Edit: I'm not going crazy, I just forgot I was manually editing the response client side to try and get it in the right format. It's working as expected now.
Without the ToList() it serializes as a c# dictionary, which becomes a single Json object, which doesn't work with <mat-select>. When you add a ToList(), it serializes as a list of KeyValuePair's, which becomes a Json array of objects, which works well with the mat-select. Since I have full control over the api server and client, I'm making it easy on myself by returning something easy to work with.
If you are going Angular, use Angular Material for styling. It is one of the best for Angular atm and fits well with the component based architecture. https://material.angular.io/
As for learning Angular, what /u/mdpotter55 said is a good resource. There are also a bunch of tutorials online. I highly recommend reading up and doing some tutorial projects so you can get familiar with typescript and the other parts of Angular you probably haven't dealt with before.
well, i'm not familiar with gwt, but it looks like it's attempting to offer a lot of the same type of functionality that angular does, namely view templating and rendering. it also gives you access to a suite of ui controls which would be somewhat in-line with what material (https://material.angular.io/) is trying to do.
trying to combine the two is probably always going to be hacky on some level. if you want to get rid of gwt, you would just rewrite all of your site to use angular. depending on how much of gwt you use, this could be relatively straight-forward or a nightmare.
It depends on what your goal is, if you want to have a better understanding of css; style it with css (flex). If you don’t want to or write as less as possible css (like me); use something else.
I would recommend using angular material grid list: https://material.angular.io/components/grid-list/overview
Since you’re using material ui for input, you will have most likely the entire material package already available in your project.
Good luck!
It's hard to say based only on your description. It'd be helpful if you could provide an example of the sort of the behavior you're expecting.
At a glance it sounds like what you're describing is similar to what Material calls a chip.
If you mean a notification that pops up after you do something then you could use a snack bar and position it at the top https://material.angular.io/components/snack-bar/examples
If it's a static notification bar, they are pretty simple to implement with a new component
I think this might in general be a bit "unclean" - you are re-inventing the wheel by making your own modal based on what i read.
Why not use Angular Material Dialog ? You basicall just inject MatDialog l in your ListComponent and somewhere in your code call matDialog.open(ItemComponent) and then subscribe to the results, like so:
>this.matDialog.open(ConfirmationDialogComponent)
>
>.afterClosed().subscribe((result) => {
>
>if (result) {// do something}
>
>});
The best approach imo is to find an existing set of components with a design you like and base off of that, for example Microsoft's Fluent or Google's Material Design.
Material Design site is here: https://material.angular.io/
I use it and those components typically get me 90% of the way there, and I only have to worry about designing custom components that don't fit into what they provide.
I have a coworker who uses PrimeNG, same idea, set of components with a consistent look and feel you can use as a base to build your own apps.
mat-slider is not a mat form field.
mat form fields are listed on this page
https://material.angular.io/components/form-field/overview
​
Please make sure you read the angular and angular material documents.
I second the point about existing design systems. Once you've settled on a library look at what components you have access to and how they can be configured. If you're stretched because you're new to front-end, it will draw things out more if you have to build components from scratch, so the best thing to do is design within the constraints of what those libraries have to offer, and only step out of it to build something yourself if you absolutely need to.
I'm not in entirely the same position as you but definitely similar. I used to be a developer and am now a designer. The devs on my team are more back-end focused, so I centre my designs around what can easily be delivered with existing libraries.And it's usually really easy to tell from demos on the website E.g. https://material.angular.io/components/chips/examples
You should look into the „displayWith” input of mat-autocomplete. By default it’s „toString”, so both the selected value and null map to „[object object]”. Set „displayWith” to a function which returns empty string for falsy values and a label for a selected value. Hope it helps.
Link for the API docs: https://material.angular.io/components/autocomplete/api
There are a couple of ways u can achieve this ...
Have a variable like
userNameand bind it to the input element using Angular's data binding like[(ngModel)]="userName". Now for the button u can add like[disabled]="!userName"(verified that mat-button-toggle supports this property, https://material.angular.io/components/button-toggle/api)Another way is to implement it with Reactive forms where you can add more custom validations and conditions.
If it's tabular data, you can consider using virtual scrolling, where only the visible + a few entries on top / bottom are rendered. It helped me when I hit the ceiling in IE11, where it would take ~1min for just the initial render otherwise.
But anyway, it really depends on what you want to accomplish. Mostly a good-enough approach is the same they use in video games - render only the visible portion of the screen and keep a certain buffer around this portion.
Could you elaborate why would we use this over angular's own virtual scrollcomponent? (https://material.angular.io/cdk/scrolling/overview) Just curious. Also, do you have any proof it's used by these companies? The links point to their Facebook pages...
This is something I've fancied doing but never got round to it. If you're comfortable with the basics, then you could do a nice UI, using the angular CDK drag and drop behaviour.
Looks to me like you're using Angular and Angular Material. You could use their stepper: https://material.angular.io/components/stepper/overview
The UI looks great, but the list of countries could be improved on with a search bar similar to what you did in the cities page. You could also improve the countries list UI by using Angular Material's List component (specifically a navigation list to navigate between items).
Additionally, the city not found error snack bar's message should be improved on and not display a verbose error tag.
Apart from that, great work on your website! :D
If I'm understanding this correctly I think I would use Angular Material's stepper control.
Link: https://material.angular.io/components/stepper/overview
You could then add a click event to the matStepperNext /Previous buttons to filter out the next set of data.
Are you talking about the material stepper? https://material.angular.io/components/stepper/overview
If so you can move that programmatically by referencing it in the dom.
In the example they give it looks something like ``` <mat-horizontal-stepper [selectedIndex]=selectedIndex #stepper> <mat-step>Step1</mat-step> <mat-step>Step2</mat-step> <mat-step>Last</mat-step> </mat-horizontal-stepper>
You can reference it in the typescript controller by
selectedIndex = 2; @ViewChild('stepper') stepper ```
And use the next, previous, reset methods.
interval(5000).subscribe(() => this.stepper.next())
It's coming. Most programmers I know use dark mode for as much as possible to go easier on the eyes, along with things like f.lux and redshift.
Google's Angular Material website (with components to make websites according to their material design standards) even comes with different themes, some of them dark. Click the paint bucket in the top right corner and try them out.
It really should just be a thing for any website or app where you spend any serious amount of time. Sure, basic "business card" websites that rely on branding can do without but I'd vastly prefer to always have a dark theme.
Are you using Angular Material, or doing this yourself? If you are using Angular Material, it looks like you can configure the position of the menu (https://material.angular.io/components/menu/overview). Otherwise, it's hard to know your issue without seeing how you are implementing it.
There is a new CSS position: sticky; for this, but it won't work in IE.
Stuff like this is also possible with the excellent, although complicated-at-first Overlay features of the official Angular CDK:
Here is an article on saved that has the basics:. https://coursetro.com/posts/code/116/Create-your-own-Angular-5-Material-Theme
It's a little old so would cross check it with https://material.angular.io/guide/theming
The "snackbar" on the bottom is part of Angular Material. I'm using Angular2-Draggable to make the light button draggable. Angular2-Draggable provides event hooks for "started", "stopped" and "movingOffset".
- When the user starts dragging, I open the snackbar.
- As the button is moved, I use the "movingOffset" to calculate the direction and distance.
- If the y direction is negative, select "turn_off"
- If the displacement is small, select "toggle"
- If the displacement is > 10% and y-direction is positive (down) then "turn_on"
- When the user stops dragging, I send the command and brightness to the home-assistant websocket, and close the snackbar.
- The home-assistant websocket state_changed events control the button css class to indicate on/off
https://github.com/ctung/cape-automation/blob/master/src/app/light/light.component.ts
Just as a random example. If I'm a business following Angular's Material Design getting started guide, I'm now immediately in violation of the GPDR.
All over the place, the default best practices for building a simple and performant static site are broken by this. I agree that it's fixable, but it's insane how out of sync, at this moment, the default tutorials are with the legal implications. It would be like if you took password handling guides from 1998 and ported them to 2022.
I'd bet you > 90% of sites are in violation of this ruling, and I wouldn't be surprised if it was really > 99%.
I meant that is a fair idea but billion dollar companies whose entire purpose is user engagement have put a lot of time and resources into studying how users REALLY feel/react.
And they say to use a spinner
https://material.angular.io/components/progress-bar/overview#progress-bar-indeterminate
Seems to be closely related to Material design. They're credited on this wiki article with introducing the term "snackbar" and Angular Material has them as well.
My guess is the intent of 1) not being an interruption and 2) offering the option to be interrupted. I guess the snackbar analogy works cuz you might not be at the party for the snack bar but it's there if you're interested. Just guessing.
The angular CDK stepper is a great place to start. Official docs
I made a simple example of the cdk stepper a while back with formly and tailwind if it's useful to you in any way.
This is not as easy as it looks like.
Theming a webapp is a topic of its own regardless of angular.The most common approach is to have pre defined themes and the user can just pick one of them. You could achieve this by implementing angular material theming which is very well documented in the original docs and also working with bootstrap as you can acces all the variables inside your components scss files no matter which css framework you are yousing
https://material.angular.io/guide/theming
If you wan't to provide a full dynamic theming where every color is choosen by the user, you need some state that can be accessed by every component.You can achieve this by adding all this variables to a services and get this variables on component level while using it in the HTML with style attribute binding or ngSyle.
//attribute binding <div [style.backgroundColor]="expression"></div>
//ngStyle <div [ngStyle]="{'backgroundColor': varilable}"
Keep in mind that it can get very confusing if you don't use proper naming and also get quite challenging when you need to generate different shapes of a color.
I would definitely recommend using predefined selecteable themes
What are you using for your V in MVC?
I personally am getting into Asp.net with Angular, you can install Angular Material and get a beautiful stepper https://material.angular.io/components/stepper/examples
If Razor then I guess Entity..
or maybe you could pass the values as query params/route data/request body?
Write the collapsible nav-bar in pure html/css/typescript. This should be relatively easy, but would be easier using the Material CDK.
Angular Material CDK (Not Material UI library)
Then go in and add animations afterwards:
Animations Docs
Have you actually looked at the public API yet? The Material Dialog API states it has a list of open dialogs (property openDialogs, type MatDialogRef[]) and even a closeAll function.
You can use that, right?
>My opinion there aside, I don't quite follow your suggestion. How is the footer not already DRY?
It is, never mind that statement.
> If you want to discuss how using a template ref in dialog.open shouldn't be done and one should always just use a component, then we can circle back to why that is public functionality whereas a simple solution to a problem said functionality introduces isn't public.
Well, the template ref functionality is supported for really trivial use cases, like a confirmation box. Material Dialog doesn't support submit prevention based on validity (or any boolean observable) out of the box, so apparently they consider it non-trivial.
Not sure I completely understand. It sounds like mat-autocomplete might be a better fit for what you are trying to achieve - user could make a selection from the autocomplete suggestions or input their own custom text.
https://material.angular.io/components/autocomplete/examples
If i understand correctly you want to create a tree of checkboxes.
Maybe this article can provide you with some insight: https://betterprogramming.pub/how-to-render-large-tree-data-structures-in-angular-653bf6cf0bd0
And otherwise look at the mat-tree component (examples).
I have created something that does exactly what you are trying to do (if i understand correctly) using mat-tree.
Honestly though you can achieve your own drawer system that's not material design without much effort just using the Angular CDK: https://material.angular.io/cdk/portal/overview
I am still not 100% sure on the syntax myself but I assume matRowDef uses the syntax listed here: https://material.angular.io/components/table/api#MatRowDef
There you can see that you can pass a function to "when" which takes in 2 parameters.
I think I was wrong about <D> being of type DateAdapter. It looks like <D> represents the type of the model the date is stored in(JS Date/ moment, ...).
The provision for the actual type is done under the hood.
The <D> in DatepickerToggle is only used by ('for') datepicker-Input-Property. This Property is of interface MatDatepickerPanel<MatDatepickerControl<any>, D> which basically is a MatDatepicker:
export class MatDatepicker<D> extends MatDatepickerBase<MatDatepickerControl<D>, D | null, D>
If you check the source code for this class you can see the injection token MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER which provides MatDateSelectionModel with a dependency of DateAdapter.
My guess: From the (either by angular or by you) defined DateAdapter you can infer the type of the Date used by your Datepicker (and its toggle).
Be aware: Typescript is not run when you open the Angular SPA. What is run is plain old javascript which doesn't know generics.
Btw.: The material docs are really gold when it comes to understanding what is possible with its components.
Have you had a look at the official Angular docs? They're pretty good, would be hard pressed to explain it better than them
https://material.angular.io/components/form-field/overview
in particular
https://material.angular.io/components/form-field/overview#floating-label
Let us know if this doesn't help and I can try to be more specific
Check out the documentation for each component you are trying to figure out.
For instance, mat-select has an event called 'selectionChange' that fires when you select something from that drop-down.
See: https://material.angular.io/components/select/api
So similarly, you will find events for checkboxes as well.
If the ViewEncapsulation of your component is the default setting of "emulated", your component styles will already be restricted to the component and its children. The ":host" selector is mostly useful when you want to specifically style the component's primary DOM element itself ("app-whatever").
The dropdown DOM element appears outside of your component because it needs to appear above all other DOM elements in the UI, except for probably a hidden/opaque element used to absorb or detect clicks outside of the dropdown.
Angular Material's dropdown exposes a property that allows you to apply a CSS class to it by name. See if the library you are using offers something similar. Otherwise, you might have to get creative in your global stylesheet.
It is not advisable to use jQuery with Angular. Angular can't keep track of what's going on in the DOM when a non-angular-aware library is manipulating it. Consider using Angular Material or a similar Angular component library.
Consider the Material snackbar component:
- User fills out a form, creating some data on the backend
- User submits the form, a snackbar is rendered on to the page with a button which allows them to view their newly created data
- The snackbar component exposed the
onActionobservable, that allows you to subscribe to snackbar actions. You handle routing the user to the next view with this Observable.
How can you handle all of this in a template with async pipe? These are the kinds of cases where I consider not using async pipe to be necessary. I'm not sacrificing good UX for code smell which can remedied in most cases.
Try setting closeOnNavigation to true. (check limitation)
https://material.angular.io/components/dialog/api
If it does not work for your case, try closing the dialog manually.
My portfolio is an angular-based website, hosted with github pages. You'll need to do some small extra steps to accommodate the router, but it's really not hard.
As for styling, I'd recommend you begin with Material Design, as it's very easy to integrate and feature rich. https://material.angular.io/
as /u/Chet_Steadman sain in very good and detailed response probably the UI framework bugs the XPathif you can tell what is the what is the component probably we can help with the XPath From what i saw in https://material.angular.io/components/checkbox/overview after click on the check box the there was some changes in the html i used this XPath and manage to click it a few times in a row //label[contains(.,'Primary')]/child::div[@class[contains(.,'mat-checkbox')]] probably it can be done better
Pagination can help with that.
Glad it all worked out for you. Remember to pay it forward someday when you see someone else asking for help 😉
I have not used it but after seeing the documentation and examples, it might be worth checking out Material's drag-and-drop module. It seems versatile and also supports moving to and from different lists, in a very smooth way. Hope this is helpful!
After looking at PrimeNG's drag-and-drop, I'd say it looks really pleasant to work with AND use. I sort of wish I had used their components in my application earlier.
There’s a lot to unpack in your question.
> editing and customizing the app ( Layout, images, colors, text,
There is no ONE solution to customize all these things, but generally, YES, angular apps are capable of being customized by the user as long as you have programmed those possibilities into the app.
Colors are maybe the easiest to change in an application-wide way. Angular has built in theming support. You can make toggles in your app that change the themes. https://material.angular.io/guide/theming
Text is usually changed on the fly using an ngIf statement. Have a look at the Angular Material’s components page. Look at the code behind the demos. Many of them use such an if statement to display one state or another based on a condition. The same type of thing can be done with images.
Now, layout is a bit different. Think about how the apps you use work. Can you change their layout in any way you want? Not really. But some things are customizable. In Spotify, the layout is pretty much set in stone, but you can change the size of certain columns/panes. In Microsoft Office you can show/hide toolbars. In Adobe products, you can float, resize, and reposition layout and save their state for later sessions.
So how much layout customizability does your client need? Angular is a absolutely capable of helping you resize, move, and hide layout components, but putting in that customizability can be tricky and this might be a case where you gently need to tell your client that it better to have a great layout with a little customization that a mediocre layout that can do everything.
But to answer your question more broadly, Angular is capable of this yes, this stuff is why people use frameworks rather than just hacking together websites with jQuery and html.
Agreed. It also helps that I'm completely unwilling to dedicate the ridiculous time that you did at Braytech to craft such a bespoke UI. Material.io all day at D2Checklist!
I think some state management system is definitely something to learn when working with angular, so it's good you're learning about NgRx (or planning to). For simple/small apps, I like to use NGXS - similar concepts to NgRx, but in my opinion "feels more angular", although it is a younger library so might be less solid than NgRx.
It's also important to learn some UI library, I personally prefer Bootstrap and lots of cool scss stuff it has, but I know angular material is one of the biggest ones, which comes with loads of UI components out of the box!
Finally I also recommend to learn about Nx, a library that can help you building monorepos. It is an overkill for most simple apps, but if you need anything other than that, it really helps to have a modular structure where you can keep all your apps, e.g. a node api and some angular apps. Or even just to have some reusable tools you write once, and can use in every app you build!
I believe this is intended, that is the "placeholder" element.
https://material.angular.io/cdk/drag-drop/overview#customizing-the-drag-placeholder
If you're unsure how to create a modal, I'd go with (Angular Material)[https://material.angular.io/components/dialog/overview] as an easy jumping off point.
The syntax might be a little hard to understand, (eg. putting @Inject(MAT_DIALOG_DATA) data in your modal constructor DI) but if you follow the examples you'll at least be able to create it even if you don't understand it.
I'm personally a big fan of Angular Material - and I've used the mat-table. It's nice to work with.
As the other people said, it's best to create an array of objects so that everything is in one place and you don't have to reference several arrays' elements by index. Then you can just pass [user]="userFromNgFor" to your component's input.
You might also want to check out CdkTable or, if you're using Angular Material, mat-table. They should make things easier to manage in the long run.
MatMenuTrigger still exists in Angular Material, but a different selector is recommended (matMenuTriggerFor) that takes a target menu as its input.
As you discovered, the extra syntax sugar for template reference variables is a bit confusing, so I think it's being phased out as a common practice. It will probably continue to be the recommended way to do NgForm because template-based forms are sort of a throwback anyway.
It will just style the components they provide. I would like to point out a few things though:
- Materially (understandably) does want you to use their components; I am sure they would suggest you look through their component list to find something that suits your need before making something custom
- Looking on the typography page, it tells you how to apply their typography to other elements and even explicitly states “By default, Angular Material doesn't apply any global CSS.”
- I might also recommend checking out their theming your own components page
You should be able to find what you are looking for here: https://material.angular.io/components/categories
To add an icon inside a button you can use Material Icon inside a Material Button.
For the drop-down, you probably want to use an Icon inside a Menu, but maybe an Expansion Panel.
I normally just stick to angular components (material) and re skin the existing datepicker as needed.
I didn’t see any example of how this directive looks in the github repo, but there are also components in open source that play nicely with angular2+. Typically they are prefixed with ngx.
It starts off fast and then slows down, that could be frustrating from a User POV ("why is the system slowing down at the end").
I think Angular Material has an "indeterminate" mode where the progress bar goes back & forth. https://material.angular.io/components/progress-bar/overview#indeterminate
You can use a mat-stepper for this use case:
https://material.angular.io/components/stepper/overview
The selectionChange Event fires eveytime you click on the next or previous step. The values are coming from formcontrols.
https://angular.io/api/forms/FormControl
Formcontrol has also an property called valueChanges, it's an Observable. You can subscribe to valueChanges and handle the logic for choose a option from a selection dropdown and assign this value to a input element.
Then you have to style the stepper to your requierments.
You could create abstractions for each UI element in the project. Each of these custom components can start as wrappers of the material components and later can change to fully custom designs. The Angular Material CDK is a package for using unstyled components with just useful functionality, adding common behaviors, tests, overlays, gesture support, etc to your custom-styled elements/components.
​
It depends on what are the functional parts your referring to. Option one is overriding their styles, as mentioned. The other option is the component dev kit (https://material.angular.io/cdk/categories). It is meant as a building block to make your own UI components but get some of the benefits they've already worked out. It's designed to be used by anyone, but is used to build angular material.
Do you just want a color theme? B/c that's built into Angular Material, my first task on any new project is remembering how to do it and picking a color palette. Here's the guide: https://material.angular.io/guide/theming
Damn man, and I thought after 3 years with vanilla xp I was ready for a framework... Guess my vanilla skills are still mediocre at best. JS is so nasty! I knew there was this thing with references because I now remember, FireShip video on objects (i think it's recent). He mentioned objects referencing one another but I never understood what that meant until I ran into similar problem.
The https://material.angular.io/components/autocomplete/examples (before the last one) also uses observables, I figure those are promises with extra muscle but I haven't been reading a lot of rxJs docs because I'm still very overwhelmed with everything. Since I've got same data model as their example guess I'll just copy paste the code from there and call it a day.
Thanks for the very detailed information and clean explanation. You are the man :D
You do know that mat-form-field has appearance variants right? This includes an "outline" variant that is similar to Bootstrap.
I would not use Bootstrap and Material Design in the same project. If the default appearance is not to your liking, you should customize the stylesheet to do the specific things you want. Bootstrap will add unnecessary bloat and alter global styles to their preferred defaults.
I must be missing something here. What's the difference between the angular material expansion panel and the react expansion panel that you are referring to? They look the same to me.
What exactly is it you want to do in the parent component?
I‘ve never tried to use MatDialog in a non-modal fashion and I don‘t think it‘s wanted or even possible. From the docs :
> The MatDialog service can be used to open modal dialogs with Material Design styling and animations.
Even if it were technically possible, I think it would still be bad UX.
Put whatever functionality you need to access while the dialog is open into the dialog component and pass data to it from the wrapping view if needed.
Have a look at the examples on the Angular Material page: https://material.angular.io/components/tabs/examples
They show you how to use a template to render those tabs, in there you can add whatever html you like.
Take a look at the docs
If you are using the MatTableDataSource, simply provide the filter string to the MatTableDataSource. The data source will reduce each row data to a serialized form and will filter out the row if it does not contain the filter string. By default, the row data reducing function will concatenate all the object values and convert them to lowercase.
For example, the data object {id: 123, name: 'Mr. Smith', favoriteColor: 'blue'} will be reduced to 123mr. smithblue. If your filter string was blue then it would be considered a match because it is contained in the reduced string, and the row would be displayed in the table.
To override the default filtering behavior, a custom filterPredicate function can be set which takes a data object and filter string and returns true if the data object is considered a match.
From the sound of it you should use a UI framework like you do with your Javascript and probably the backend as well. A UI framework will give you that piece of mind to not worried about browser compatibility.
I would recommend using Material Design as it's perfect for Angular and have the best integration between the two, this have to do with the fact that both are from Google.
Good luck! :)
ngsass was just part of my "theatrical" complaint.
To start with I admit I am very biased and possibly frustrated but on overall I spawned a good discussion here and hearing oppinions was what I was looking for. You guys really killed my post with the downvotes :)
I think I will have to embrace it and start moving towards acceptance. These are my impressions so far - correct me where I am wrong:
- It seems to me that angular lacks a very good documentation in general. To give you an example, compare react-material-ui to angular-material-ui.
- The community seems surprisingly smaller
- The framework's core is a black box
- Template language is a monster compared to jsx
I personally like well structured frameworks and I used to enjoy working with Laravel. But do you really need that on frontend? We are moving all the dirty work to microservices and data centers nowadays, UI only gets dumber. You only need V in MVC tbh.
Did you consider the Material slider yet?
https://material.angular.io/components/slider/overview
If you want to build a custom slider I would recommend making a Custom Form Control by extending the ControlValueAccessor class Here is a great post on the subject: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
Looks like the api has a toggle for each. One way would possibly be to have a viewChildren that looks for an array of tool tips and then applies the toggle. https://material.angular.io/components/tooltip/api
If your creating a component for general distribution, your component should be able to support OnPush change detection. I don't think mutating the input would support this, so you should consider different API in this case.
When I run into this kind of issue, I try to check how other component libraries solve similar issues. For example, you can study Angular Material Drag and Drop in lists:
https://material.angular.io/cdk/drag-drop/overview#reordering-lists
Az alapötlet frankó, számolásnál vannak érdekes dolgok, ami lehet, csak nekem fura. 110-ről 112 m2-re feltornázva +4 millió szerintem furcsa, ugyanígy a 110 vs. 200 m2-nél 85 vs 118M. Egy 200 m2-es ingatlan tuti többre jön ki. Ingatlandotcom-on nézve 200M alatt nem nagyon van lakás, ház meg még úgy se.
Én még dobnék be fürdőszobák száma dropdown-t. Klímánál az igen-nem-et módosítanám egy választéklistára: nincs, split klíma, falhűtés ilyesmi. Nyilván pl. egy falhűtés eléggé megdobja végeredményt. Nyakatekert dolog: geotermikusnál nyáron simán beállítható hűtésre is a rendszer, de ez már csak szőrözés :)
Hőszigetelést nem látok sehol, szerintem azt is vegyétek figyelembe valahogy.
1920x1080-on nézem, szerintem ekkora felbontásban kifér egymás mellé kényelmesen a szoba-félszoba-emelet dropdown. Ugyanitt az emelet listát kereshetővé tenném akár egy select2-vel vagy egy selectize-zal.
A "küldés" gombot én "számolás"-ra módosítanám.
Be van include-olva a font awesome, de sehol sem látom, hogy használva lenne. Bár valaki már írta, de a háttérkép hatalmas fájlméretű, a "rólunk"-ban a contact_us_1.jpg 4,3MiB.
Egyéni UI vélemény: ez a régebbi típusú material design nekem valahogy soha nem jött be, iszonyat minimál. Az outline form field az elmúlt pár hónap alapján az ügyfeleinknek jobban bejön. Nem akarlak rábeszélni, csak egy javaslat.
> By default the MomentDateAdapter will creates dates in your time zone specific locale. You can change the default behaviour to parse dates as UTC by providing the MAT_MOMENT_DATE_ADAPTER_OPTIONS and setting it to useUtc: true.
Have you correctly set your OS locale?
Right on. I'm back at my workstation today so I'll be around if you get stuck.
Here's the link to Angular Materials radio button documentation:
https://material.angular.io/components/radio/api
Since you're already using Angular Material I'd suggest using their sorting.
https://material.angular.io/components/sort/overview
Scroll down to the second example (element data). The MatTableDataSource is pretty easy to work with.
By the way, the reason your list is still not reloaded in this scenario is because the scrolled observable runs outside the angular zone -- it's a special case. See the notes on the "scrolled" event here: https://material.angular.io/cdk/scrolling/api#ScrollDispatcher
This is sort of what I have. https://material.angular.io/components/stepper/examples
​
Basically if you look at the TS file of the link I sent there are two forms. Those forms need to be generated dynamically, in my case based on how many rooms there are.
​
What I need is a way to generate the forms (for each room), group them by category and display the fields based on what I have from the API. i.e for a metric we would display a mat form field with the text we got from the api for that specific metric and expect the user to provide a value to later save that metric.
Angular Material has a more complete implementation, including multi-select and grouping:
https://material.angular.io/components/select/overview
> Star our repo on GitHub!
That comes off as pure click-bait. Don't beg for upvotes or stars, it's pathetic.
Material design is just a design specification by Google. There are libraries which implement material design for almost all framework like react, angular vue etc.
Angular version: https://material.angular.io
Maybe change the combo-box for an auto-complete
https://material.angular.io/components/autocomplete/examples
Personally I think it'll work better thatn a combo-box in your schenario.
I don't think it's a bad practice to use HTML attributes as Input and even try to use them to keep the same naming conventions in the code.
And just by looking at a library developed by the Angular team itself you can see they are also using HTML attributes(datepicker has the 'disabled' Input).
If you use a custom Angular Material template (https://material.angular.io/guide/theming), then in your CSS or SCSS:
mat-card {
background-color: mat-color($theme-accent);
}
You can get the relevant indices from the arguments provided by <strong>CdkDragDrop</strong>, it's just a matter of updating the relevant DB records with the updated indices on the server side.