Zoaib Khan @[email protected]
10K subscribers - no pronouns :c
Want to learn Angular development with real coding projects?
Welcoem to posts!!
in the future - u will be able to do some more stuff here,,,!! like pat catgirl- i mean um yeah... for now u can only see others's posts :c
β¨ Part 2 of the Customizing Angular Material Buttons series is UP!
In this one, I use design token customization to make the Angular Material buttons look more like Shadcn-like, compact and squarish.
Take a look!
5 - 0
β¨β¨ Just published Part 1 of the "Customizing Angular Material Buttons" tutorial!
In this one, it's all about customizing the colors to give you easy to use classes for the primary, accent, secondary and error colors for your material buttons.
It's something which has been missing in recent Angular Material versions since the "color" property was deprecated.
Take a look!
11 - 0
β¨ Just added a whole new "Button" section to the Angular Dashboard Starter Template!
I often find myself customizing the Angular Material default buttons to my liking in my own projects - because the default look of the buttons seems to be more tailored towards mobile devices.
They take up a bit too much space than I'd want and can appear blocky!
Plus, with new Material versions, the accent and error variants have been lost in translation and a lot of people have asked me how to do those in the new setup.
So, I've come up with this new set of customized Angular Material Buttons for my Dashboard Template.
β
Use the same material buttons
β
Just add the classes to get the square, size and color variants and you're good to go!
All of this in my next video!
Subscribe if you're interested
lnkd.in/dFbStYJp
29 - 0
β¨ Supercharge your Angular development by using this Cursor/Copilot rules file!
Just published a new video on my channel where I reveal my handy, modern Angular rules file that I use extensively in my own Angular projects.
If you've used AI based code editors even a little bit, you know how hard it is to get clean, modern Angular code in one shot from an AI.
Well, I've been testing - and it seems the best way at this point is to use a focused rules file. This can work wonders in directing the LLM to give you clean, modern Angular code. And it does not even have to be that detailed.
My rules file contains sections for
β
Modern Signal API
β
Modern Output syntax
β
Modern Dependency Injection
β
Modern Control Flow
β
Modern Routing and Standalone components
More on this in my latest video:
10 - 0
π Achievement unlocked - 10k subs finally on my humble YouTube channel!
So yesterday, I crossed the psychological barrier of 10k subscribers on my channel. It feels like a great achievement, but over the past few months, I've realized the number of subs don't really matter that much -
it's more of a vanity metric!
And more and more, Youtubers and content creators are opting to create a more loyal, niche following - who are basically your repeat viewers/customers.
These viewers like your content and come back to it regularly - also supporting you in other ways to keep your channel going. I feel it is much better than having an un-engaged subscriber - who's just subscribed and forgotten.
So somewhere along my YouTube journey - I've dispensed with the chase for views + subscribers. Which has made it much less stressful!
And has allowed me to do more of what has worked already - while less on the new and the trendy (unless of course, if it interests me!)
P.S. I'm planning a few videos on how I've been using AI tools in my Angular projects (and I've been using them a lot π€«).
So if you'd be interested in such a series, do subscribe to the channel, not because its hugely important for me π, but that you can get notified when the new videos land.
lnkd.in/dFbStYJp
45 - 18
π½οΈ Just Published Last Part of my longish tutorial on building the Angular Material Form Designer/Builder!
In this part, we add the remaining features + finishing touches adding a polish to the app!
β
Moving form rows up/down
β
Exporting form code by defining a generateCode function in each field type definition (to make it scalable)
β
Adding a custom material theme and customizing the buttons using design tokens
β
Layout animations using View Transitions API
Link: https://youtu.be/QZcA00hCxXc
7 - 0
π‘ Angular CDK Drag Drop and the "clone" behavior for drop lists
So while building up the Angular Material Forms Designer, I came across this issue of the original element automatically disappearing from the previous drop list while dragging. And there was no configuration option to disable this (afaik).
Turns out a simple signal state in the button along with some events provided by the cdk utilities were enough to create the "clone" effect without any visual artifacts (like flashing).
This snippet is in the second part of the full tutorial here:
lnkd.in/dEa-AnMv
And the forms designer is deployed here:
lnkd.in/dgG9rGz7
0 - 0
π‘ Creating tutorial videos isn't easy...and almost everything went wrong last week!
Last week I was met with quite a lot of stress when I wanted to get out the first part of the Angular Forms Designer tutorial series. As they say, when you're short of time, usually everything that can go wrong goes wrong π
So I ended up recording the whole first part in one go.
But when editing, realized that my camera had somehow stuck on the last two parts. So while the screen recording was perfect, my face was stuck for the most critical part of the tutorial.
So I redid that as soon as I found out.
I realized later, that there was half of a part which was also missing - but by that time it was too late to do anything about it - so I had to put an image of me for a few minutes (not sure if anyone noticed much).
After that rough start, I realized it wasn't that quick to edit an hour long video - even with Descript's awesome text based editing and auto transcription features.
But I got through it after a marathon session - but when I wanted to export the video to youtube directly (which is another great feature of Descript) - my plan didn't allow me to go past one hour! (lesson for the future)
I could only export it as a local file - then upload it to youtube myself. And this was really frustrating - because doing this in 1080p was very slow - and doing it in Descript web version resulted in encoding errors after a while.
After a lot of frustration, I was able to do it with the Desktop version of Descript - but only in 720p. I even got a comment by some sharp fellow about the video being only 720p π²
With the second part, which I published today, things were a lot more smooth - because I planned it to be under an hour - so that I could avoid all of things I faced last week.
But I guess that's just how you grow - by learning from your experiences!
Long story short - there are a lot of things that can go wrong in creating video tutorials.
But its pretty satisfying to watch the final result - and with the knowledge that it will help so many others in some way or the other - level up their coding/Angular skills
P.S. Here's the playlist for this particular tutorial series - my biggest so far
buff.ly/uC7GM4D
And if you're more interested in the code for it:
buff.ly/q0TvpVj
15 - 4
β¨ Just published Part 2 of the Angular Forms Designer MEGA tutorial series!
In this part, we'll add almost all of the main features of the final app - especially a form builder for the settings UI - so that we can easily specify each field type's settings as an array of fields.
Follow along from the first part!
Want access to the complete code? Link to my shop:
zoaibkhan.lemonsqueezy.com/buy/17831b31-779b-46cd-β¦
13 - 0
π½οΈ Finally! Published Part 1 of my longish tutorial on building the Angular Material Form Designer/Builder!
In this first part, weβll cover the basic structure and by the end will build up a flow of dragging a selection of fields and adding them to the canvas using service + signal based state management. Of course, with much more discussed in the video itself.
Itβs a long time coming, and I hope you guys like it :)
13 - 0
Want to learn Angular development with real coding projects?
Join me as I teach you how to be a professional Angular developer by developing real world projects. I cover all of the latest and the greatest in Angular - including Signals, Standalone Components, Material Components and much more!
So hit the subscribe button - and let's get coding together!