Excellent tutorial (and not trivial). Let's hope Firefox (Safari is in technical preview) adds the view transitions API. Especially with the new view-transition-class and the new startViewTransition function (that now takes an object, the update function, and an array of "types" that characterize your transition), you can fine tune your transitions. Finally, let's hope we will get scoped transitions soon, to avoid mixing route animations with local animations. But these are so easy and powerful!
@@ayushtamboli3496 No it doesn't have a bootstrap like grid system. For that you can use another CSS framework like tailwindcss. It does have a grid component but its pretty basic and almost the same as CSS grid.
@@ZoaibKhan i always struggle with this, i like tailwind but it has a larning curve I have also been looking at bulma and am familiar with bootstrap. I really only need the grid or flex stuff. angular doesnt really give you a straight answer on what to use. I wrote my own scss but its very basic and after doing it i looked at bootstrap and bulma source code.. they are literally doing somethign very similar so thinking about just using one of them. end goal is to use material components with some grid system. what are your thougts on this? Thanks man! great videos as always! ~ Adam
@@DirtySouth33T Hey Adam! :) My recommendation would be tailwindcss for all things css. It's just so easy to use and very close to CSS - so you don't get caught up in a whole new layout "system" - which might become obsolete. The only issue is with material components, we need to ensure that some styles don't conflict. I'll try to work on it myself a bit and get back - maybe explain in a video.
Yeah I did consider that possibility and also explored the options, but it'd got a lot more complex in implementation. This could be a topic for a whole other tutorial series 😄
Thanks. But as you can see in your video (and it happens to me too): If I push a widget to the left everything is fine, if I push it to the right it wobbles briefly but noticeably right before the end. In my opinion it's not okay for a "real" project and difficult to fix because it's a second library.
Wow, you're really following this quite closely. I noticed some issues too, so ultimately I've planned to switch to the view transition API, just waiting for safari support
Maybe a fallback Option if client browser dont support view transition api ? ChatGpt gives me this, i cant test it yet: this.supportsViewTransition = 'startViewTransition' in document; If that works, its easy with @if or @switch template flow to made a fallback?@@ZoaibKhan
@@alnes204 Yeah, that's the way to go about it! I'll let you know when I get to work on it - it seems like a fun video to make. View Transition API is due to be supported by all major browsers soon - so its great to learn about it as well
Thanks very much for this series. Lots of inspiration for my project. The dashboard signal store is very clean.
Welcome Andy! Glad you liked it ☺️ I might convert the store to an ngrx signal store eventually but this simple one can do for now
Thanks Zoaib, amazing work!
You're welcome 🤗
very cool! thanks.
Welcome 🤗
Excellent tutorial (and not trivial).
Let's hope Firefox (Safari is in technical preview) adds the view transitions API. Especially with the new view-transition-class and the new startViewTransition function (that now takes an object, the update function, and an array of "types" that characterize your transition), you can fine tune your transitions. Finally, let's hope we will get scoped transitions soon, to avoid mixing route animations with local animations. But these are so easy and powerful!
Yes exactly! Would love to play around more with View Transition API. Thanks for your comment!
THNX A LOT BROTHER
Welcome brother. Hope you like it :)
thanks zoaib,
can be added a header progress bar
Header you mean title? And progress bar where?
@@ZoaibKhan Bar at the top of the page disappears after loading data
@@ZoaibKhan HTTP Interceptor + Material Progress Loader
Nice tutorial greatly used signals🙌 i really want this functionality and hope for drag and drop feature as well😅 bdw thnx for this great tutorial
Drag and drop would be nice, I know :)
Cool! thanks for the series.
Can you make videos on angular responsive grid view?
I already have a video on it
th-cam.com/video/-80IDxbBxFs/w-d-xo.html
Or do you mean something else? :)
@@ZoaibKhan does angular material have responsive grid system like bootstrap have
I want to know because it helps to use easily code
@@ayushtamboli3496 No it doesn't have a bootstrap like grid system. For that you can use another CSS framework like tailwindcss. It does have a grid component but its pretty basic and almost the same as CSS grid.
@@ZoaibKhan i always struggle with this, i like tailwind but it has a larning curve I have also been looking at bulma and am familiar with bootstrap. I really only need the grid or flex stuff. angular doesnt really give you a straight answer on what to use. I wrote my own scss but its very basic and after doing it i looked at bootstrap and bulma source code.. they are literally doing somethign very similar so thinking about just using one of them. end goal is to use material components with some grid system. what are your thougts on this? Thanks man! great videos as always! ~ Adam
@@DirtySouth33T Hey Adam! :)
My recommendation would be tailwindcss for all things css. It's just so easy to use and very close to CSS - so you don't get caught up in a whole new layout "system" - which might become obsolete.
The only issue is with material components, we need to ensure that some styles don't conflict. I'll try to work on it myself a bit and get back - maybe explain in a video.
you could go further and show how to make widgets draggable and resizable by dragging edge of widget
Yeah I did consider that possibility and also explored the options, but it'd got a lot more complex in implementation.
This could be a topic for a whole other tutorial series 😄
Thanks. But as you can see in your video (and it happens to me too): If I push a widget to the left everything is fine, if I push it to the right it wobbles briefly but noticeably right before the end. In my opinion it's not okay for a "real" project and difficult to fix because it's a second library.
Wow, you're really following this quite closely. I noticed some issues too, so ultimately I've planned to switch to the view transition API, just waiting for safari support
Maybe a fallback Option if client browser dont support view transition api ?
ChatGpt gives me this, i cant test it yet:
this.supportsViewTransition = 'startViewTransition' in document;
If that works, its easy with @if or @switch template flow to made a fallback?@@ZoaibKhan
@@alnes204 Yeah, that's the way to go about it! I'll let you know when I get to work on it - it seems like a fun video to make. View Transition API is due to be supported by all major browsers soon - so its great to learn about it as well
@@ZoaibKhan uhh nice, I'm really looking forward to this video 😄
Hi Sir DO YOU HAVE VIDEOS FOR SIDENAV HALF HIDE SHOWING ICON ONLY? THANK YOU
Yes, there's a playlist for TH-cam style sidebar, check that out
Can we hide a particular div when it is in particular page
Which div are you referring to here?