Jade Bird

Jade Bird

1630829246

How to Build a Real-world Project using Angular 12

In this Angular crash course, you will learn to build a real-world project using Angular 12.

πŸ•’ Timestamps:
00:00:00 Intro
00:04:15 Install Angular 
00:07:52 Folder structure
00:12:54 Create a new component
00:19:18 Angular material
00:26:47 Card component explanation
00:29:48 Pets component
00:32:36 Fake data
00:36:50 Load data to card
00:42:43 Grid system
00:48:27 Create a service
00:53:44 Create a free REST API
00:56:24 Get request - show all cards
01:00:58 Add condition to button
01:02:13 PUT request - favorite icon
01:10:48 DELETE request - remove card
01:20:38 Build a form
01:30:39 POST request - add new card
01:38:49 Routing - about page
01:46:49 Outro

πŸ’» Source code: https://github.com/lyhd/angular-crash-course 

#angular #angularmaterial #angular12

 

How to Build a Real-world Project using Angular 12
Kattie  Quitzon

Kattie Quitzon

1630052100

Why "ProvidedIn" Services Are Tree-Shakable (2021, Advanced)

In this tutorial we going to talk about Tree-Shaking and what makes services which decorated with @Injectable({ providedIn: … }) tree-shakable. We will have a look what is tree-shaking concept and how it works and I will give you some hint how to make your code tree-shakable. After this we will get back to Angular context and figure out why Angular can remove services which we are not using in our application. Hope you will like it and enjoy watching :)

πŸ“£ Become a Pro in Angular Material Theming (Advanced Workshop) πŸ“£:
http://bit.ly/angular-material-theming-workshop
Use 20%-off coupon code: HELLO-SUMMER-2021

πŸ“· Also subscribe to my Instagram:
https://www.instagram.com/decodedfrontend

⚠️ If you are working with GraphQL? Then check out my video course about Hasura GraphQL Engine with the lowest possible price:
βœ… 20%-off with HASURA-EASY-START code: https://bit.ly/complete-hasura-course
βœ… SkillShare with 14 Days Free Trial: https://skl.sh/3fahki2

#webdevelopment #angularcourse #frontend #angularmaterial

#webdevelopment #angularcourse #frontend #angularmaterial

Why "ProvidedIn" Services Are Tree-Shakable (2021, Advanced)
Kattie  Quitzon

Kattie Quitzon

1629792660

Angular Material Theming - Workshop (Promo, Advanced Level)

I am happy to launch my new workshop about #Angular Material Theming. This course was designed for Angular Developers who uses Angular Material library in their daily work and needs advanced tips and tricks to make material themes maintainable and lean. There are 2 main Modules in this workshop and every module has batch of video lessons. 1st part will show you basic SASS/SCSS language syntax and features and 2nd part is about customising your theme.

πŸ“£ This workshop is available exclusively on my learning platform:
http://bit.ly/angular-material-theming-workshop
Use 20%-off coupon code: HELLO-SUMMER-2021

P.s The first β€œPersonal Calls” scheduled from 18 May.
Once you enrol to the workshop, in 24 Hours you will get a link where you to schedule a meeting.

⚠️ If you are working with GraphQL then check out my video course about Hasura GraphQL Engine with the lowest possible price:
βœ… 20%-off with HASURA-EASY-START code: https://bit.ly/complete-hasura-course
βœ… SkillShare with 14 Days Free Trial: https://skl.sh/3fahki2

#webdevelopment #angularcourse #frontend #angularmaterial #angular

Angular Material Theming - Workshop (Promo, Advanced Level)
Kattie  Quitzon

Kattie Quitzon

1627889040

Angular Material - Custom Form Field Control [Advanced, 2020, Pt.2]

We continue to build a custom form field control with Angular Material. In this tutorial I will show you how to make our form control compatible with reactive forms by implementing control value accessor. After that we will have a look at error state handling and we also add support of errorStateChecker - same as angular team implemented for matInput and some other components. And in the end of the video we will do some investigation of Angular Material source code and we will reuse some logic from it by using Typescript mixins. Thank you for your attention and enjoy watching :)

πŸ™πŸ» If my videos really help you, you can express your gratitude by donating any amount via this link: https://www.paypal.me/mezhenskyi 😊

βœ… See previous video about Custom Form Field Control Pt.1:
https://youtu.be/8ThVof0Rz64

βœ… More about Bridge Pattern:
https://youtu.be/2rQOu9TmuxE

βœ… More about Control Value Accessor in Angular:
https://youtu.be/OrmIfW8Ak3w

βœ… Check out my videos about Angular Material Library:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkREmy-qxyNqLw73y76nOHm

βœ… Check out my videos about Angular CDK:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkdwkADI4PVDmNins_fO_vp

πŸ”— Links:
Link to Github repo:
https://github.com/mezhik91/angular-cdk-lessons

#webdevelopment #angularmaterial

Angular Material - Custom Form Field Control [Advanced, 2020, Pt.2]
Kattie  Quitzon

Kattie Quitzon

1627802580

Angular Material - Custom Form Field Control [Advanced, 2020, Pt.1]

In this advanced tutorial we will start to build custom form field control which will be compatible with Angular Material custom form field component and you will be able to switch appearance of material form field without touching CSS styles at all! We will understand how Angular Material uses Bridge Pattern to provide developers a very flexible mechanism for customisation of our WEB UI look and fill. In next videos we proceed to improve our form field control and we will add support of #Angular reactive forms in order to be able to use it as a regular form control.

πŸ•’ Time codes:
00:00:56 - My talking ends here ;)
00:01:13 - How everything looks in theory
00:03:45 - Let’s code it!

βœ… More about Bridge Pattern:
https://youtu.be/2rQOu9TmuxE

βœ… More about Control Value Accessor in Angular:
https://youtu.be/OrmIfW8Ak3w

βœ… Check out my videos about Angular Material Library: https://www.youtube.com/playlist?list=PLX7eV3JL9sfkREmy-qxyNqLw73y76nOHm

βœ… Check out my videos about Angular CDK:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkdwkADI4PVDmNins_fO_vp

βœ… Like it? Quick subscribe: http://www.youtube.com/channel/UCSj1Igu3ejxqcQISNEmx8VQ?sub_confirmation=1

πŸ”— Links:
Link to Github repo:
https://github.com/mezhik91/angular-cdk-lessons

#webdevelopment #angularmaterial #angular

Angular Material - Custom Form Field Control [Advanced, 2020, Pt.1]
Kattie  Quitzon

Kattie Quitzon

1627716120

Angular Design Patterns – Bridge [Advanced, 2020]

In today’s advanced tutorial we will start with Angular design patterns and in particular - β€œBridge” pattern. This pattern might be very useful in some particular cases especially when you have some group of components which might have the same API but very different implementation. Besides this we will touch such intersecting topics like content projection, ContentChild decorator and use of InjectionToken and DI. It will allow us to build a nice abstraction layer which allows to interact with child components without knowing exactly about theirs type and to resolve them dynamically. Share this video with your colleagues if you find this video useful. Thanks you for your attention and enjoy watching :)

πŸ•’ Time codes:
00:00:35 - My annoying talking ends here ;)

βœ… More videos about Angular Material Library:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkREmy-qxyNqLw73y76nOHm

βœ… More videos about Angular Material CDK:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkdwkADI4PVDmNins_fO_vp

βœ… Quick subscribe: http://www.youtube.com/channel/UCSj1Igu3ejxqcQISNEmx8VQ?sub_confirmation=1

πŸ”— Links:
Link to Github repo:
https://github.com/mezhik91/angular-cdk-lessons

#webdevelopment #angularmaterial #typescript

Angular Design Patterns – Bridge [Advanced, 2020]
Kattie  Quitzon

Kattie Quitzon

1627629600

Control Value Accessor in Angular [Advanced, 2020]

In this advanced tutorial we will learn what is Control Value Accessor in Angular and we will have a look at how to make any Angular component or directive to behave as a form control. It is quite easy to achieve with Angular Control Value Accessor and it will allow us to go beyond just regular forms and build more complex forms and form fields which we going to build in following few lessons. I am pretty sure that you will be use it a lot in your applications and it will allow you more lean and maintainable code. I hope you will find it useful. Thanks you for your attention and enjoy watching :)

πŸ•’ Time codes:
00:00:00 - Intro
00:00:48 - My annoying talking ends here ;)

βœ… More videos about Angular Material Library:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkREmy-qxyNqLw73y76nOHm

βœ… More videos about Angular Material CDK:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkdwkADI4PVDmNins_fO_vp

βœ… Quick subscribe: http://www.youtube.com/channel/UCSj1Igu3ejxqcQISNEmx8VQ?sub_confirmation=1

πŸ”— Links:
Link to Github repo:
https://github.com/mezhik91/angular-cdk-lessons

#webdevelopment #angularmaterial #angular

Control Value Accessor in Angular [Advanced, 2020]
Kattie  Quitzon

Kattie Quitzon

1627536600

Angular Material Date Range Picker [Detailed Overview, 2020]

Recently #Angular team released 10th version of Angular framework which besides fixed bugs and infrastructural updates also brings some new features. And one of this feature is date range picker component which is part of Angular #Material library. It can be very useful if you are building the next AirBnB or Booking killer and in this video we will learn in depth what kind of features provides the component and how we can integrate it in our existing project. I hope you will find my tutorial useful.
Thank you for your attention and enjoy watching :)

Note:
If you are using Moment library to handle dates in your app then you should import MatMomentDateModule from @angular/material-moment-adapter

πŸ•’ Time codes:
00:01:12 - My annoying talking ends here ;)
00:01:49 - Upgrade Angular to version 10
00:03:05 - Start to implement basic use-case
00:07:02 - How to work with the component inside form (Reactive Forms)

MatDateRangeInput property overview:
00:10:14 - Wtf is comparisonStart/comparisonEnd property
00:11:55 - Wtf is dateFilter property or how to disable certain date
00:14:44 - Wtf is separator property
00:15:33 - Public properties and how to access them

MatDateRangePicker property overview:
00:17:37 - Wtf is dateClass property
00:21:25 - Wtf is open property
00:22:15 - Wtf is startAt property
00:23:15 - Wtf is xPosition/yPosition property
00:24:24 - Open Datepicker programatically from TS class

βœ… Check out my videos about Angular Material Library: https://www.youtube.com/playlist?list=PLX7eV3JL9sfkREmy-qxyNqLw73y76nOHm

βœ… Angular Material CDK - Overlay Module lesson:
https://youtu.be/Dkh0zpsc0Zw

βœ… Quick subscribe: http://www.youtube.com/channel/UCSj1Igu3ejxqcQISNEmx8VQ?sub_confirmation=1

πŸ”— Links:
Link to Github repo:
https://github.com/mezhik91/angular-cdk-lessons

Plugin for VS Code for easy console logging:
https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

Official docs about date range picker:
https://material.angular.io/components/datepicker/overview#date-range-selection

Angular 10 full change log:
https://github.com/angular/angular/blob/master/CHANGELOG.md#1000-2020-06-24

#datepicker #webdevelopment #angularmaterial #typescript

Angular Material Date Range Picker  [Detailed Overview, 2020]

How To Validate Angular Material Reactive Form

How To Validate Angular Material Reactive Form

In this video, you’ll see how to add validations to Angular Material Reactive Form. You’ll see how to show error message inside Reactive form when an input is validated.

You can also find the tutorial articles on
https://codehandbook.org/how-to-validate-angular-reactive-form/

#angularmaterial #reactiveforms #formexample

How To Validate Angular Material Reactive Form
Kattie  Quitzon

Kattie Quitzon

1626843000

Angular CDK - Overlay Module Pt.2 (Advanced, 2020)

This is the second video about Overlay module which is a part of #Angular Material CDK. In this tutorial we will have a look at such advanced topics like overlay positioning, overlay position strategies, handling of scrolling strategies and creating of our custom one and many more other tips and tricks. Knowing all those patterns will allow you to reuse whole power of Angular Material CDK as much as possible and create very flexible and performant components.
Subscribe to my channel if you find my videos useful!
Thank you and enjoy watching :)

πŸ™πŸ» If my videos really help you, you can express your gratitude by donating any amount via this link: https://www.paypal.me/mezhenskyi 😊

πŸ•’ Time codes:
0:00:00 - Intro
0:01:20 - Overlay keydown handling
0:06:43 - Overlay positioning
0:12:58 - Position Strategies
0:17:31 - Scrolling Strategies

βœ… Angular Material CDK - Overlay Module Pt.1:
https://youtu.be/Dkh0zpsc0Zw

βœ… Check out my video β€œMy TOP 5 Angular Interview Questions”
https://youtu.be/KhUtM8skC5A

βœ… Check out my videos about Angular Material Library:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkREmy-qxyNqLw73y76nOHm

βœ… Check out my videos about Angular CDK:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkdwkADI4PVDmNins_fO_vp

πŸ”— Link to source code:
https://github.com/mezhik91/angular-cdk-lessons

#angularmaterial #angularcdk #webdevelopment

Angular CDK - Overlay Module Pt.2 (Advanced, 2020)
Kattie  Quitzon

Kattie Quitzon

1626496800

Angular Material – Custom Component Theme [Basics, 2020]

In this video we will learn how to create theme for your custom #Angular component by using Angular Material. You will learn everything you need to customise you own component and keep your colors and styles consistent and easy to manage. Please leave you feedback and subscribe now to get more interesting videos. Thank you for your attention and enjoy watching :)

Big thanks to:
Daria Lazurenko (darialaz2206@gmail.com) for Logo and brand identity.
Roman Khoroshevskii (khoroshevskii.roman@gmail.com) for amazing video animation and intro video.

βœ… Check out my other videos about Angular Material Library: https://www.youtube.com/playlist?list=PLX7eV3JL9sfkREmy-qxyNqLw73y76nOHm

βœ… And there are some topics about Angular Material CDK:
https://www.youtube.com/playlist?list=PLX7eV3JL9sfkdwkADI4PVDmNins_fO_vp

βœ… Quick subscribe: http://www.youtube.com/channel/UCSj1Igu3ejxqcQISNEmx8VQ?sub_confirmation=1

πŸ”— Links:
https://github.com/mezhik91/angular-theming

#angularmaterial #webdevelopment #angular

Angular Material – Custom Component Theme [Basics, 2020]
Autumn  Blick

Autumn Blick

1593103080

Angular 9 Material Data Table Full Tutorial For Beginners Example (2020)

Angular 9 Material Data Table Full Tutorial For Beginners Example (2020)
You can learn Web Development and Programming Tutorials.

#angular #angularmaterial #angular 9

Angular 9 Material Data Table Full Tutorial For Beginners Example (2020)