- 202
- 92 086
Code with Bear
India
เข้าร่วมเมื่อ 6 เม.ย. 2023
Welcome to the Angular & Material channel, your ultimate destination for everything related to Angular and Material Design. Angular is a popular open-source framework for building scalable, performant, and robust web applications, and Material Design.
We provide a wide range of content, including tutorials, best practices, design guidelines, and more. We cover all aspects of Angular. We also cover Material Design principles and how to use them to create beautiful and functional user interfaces.
Thank you for visiting the Angular & Material channel, and we hope you find our content valuable in your journey as a developer.
We provide a wide range of content, including tutorials, best practices, design guidelines, and more. We cover all aspects of Angular. We also cover Material Design principles and how to use them to create beautiful and functional user interfaces.
Thank you for visiting the Angular & Material channel, and we hope you find our content valuable in your journey as a developer.
Supercharge Website Speed with Lazy Loading for YouTube Embeds Using Angular | Angular 18 tutorial
Supercharge Website Speed with Lazy Loading for TH-cam Embeds Using Angular | Angular 18 tutorial
Learn how to improve your Angular app's loading speed by implementing lazy loading for TH-cam videos. We'll show you how to display thumbnails first and load the full video only after user interaction. This technique reduces initial page load time and enhances user experience. Perfect for Angular developers looking to optimize their web.
Key topics covered :
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Creating custom TH-cam embed components
- Implementing click-to-load functionality
- Handling thumbnail display
- Lazy Load TH-cam Video in Iframe
- Performance benefits and best practices
#AngularJS #WebDevelopment #FrontEndOptimization #TH-camEmbed #CodeTutorial
#WebPerformanceTips #JavaScriptFrameworks #TechTutorial #DeveloperTips #UIPerformance
#AngularComponents #TH-camPlayerAPI #LazyLoadingTechniques #SPAOptimization #AngularBestPractices #WebDevHacks #PerformanceTuning #LazyLoading #FrontEndTips
#iframes #lazyloading #coding #programming #howto
🔗 Social Links
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
website : flyercoder.blogspot.com/
TH-cam : @codewithbear
Instagram : code_with_bear?igsh=bm9sMHRpY2lxeXk3
GitHub : github.com/Haresh-thumar
Learn how to improve your Angular app's loading speed by implementing lazy loading for TH-cam videos. We'll show you how to display thumbnails first and load the full video only after user interaction. This technique reduces initial page load time and enhances user experience. Perfect for Angular developers looking to optimize their web.
Key topics covered :
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Creating custom TH-cam embed components
- Implementing click-to-load functionality
- Handling thumbnail display
- Lazy Load TH-cam Video in Iframe
- Performance benefits and best practices
#AngularJS #WebDevelopment #FrontEndOptimization #TH-camEmbed #CodeTutorial
#WebPerformanceTips #JavaScriptFrameworks #TechTutorial #DeveloperTips #UIPerformance
#AngularComponents #TH-camPlayerAPI #LazyLoadingTechniques #SPAOptimization #AngularBestPractices #WebDevHacks #PerformanceTuning #LazyLoading #FrontEndTips
#iframes #lazyloading #coding #programming #howto
🔗 Social Links
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
website : flyercoder.blogspot.com/
TH-cam : @codewithbear
Instagram : code_with_bear?igsh=bm9sMHRpY2lxeXk3
GitHub : github.com/Haresh-thumar
มุมมอง: 50
วีดีโอ
Toast Notification in Angular 18 🔥 | Custom Toaster Notification | Angular 18 Tutorial
มุมมอง 593หลายเดือนก่อน
Toast Notification in Angular 18 | Custom Toaster Notification | Angular 18 Tutorial Angular 18 Custom Toast Alert Notification with Loader Animation | Angular Tutorial #alert #angular #ngx #angular #popup - How to show toaster(alert) notification with loader animation in Angular app project | custom toaster - In this Video I am going to show you how to implement a beautiful notification alert ...
Angular 18 Stylish Radio Button in Angular Material tutorial | Material 3 Design
มุมมอง 7062 หลายเดือนก่อน
Angular 18 Stylish Radio Button in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Radio Button in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, like, ...
Angular 18 Stylish Card in Angular Material tutorial | Material 3 Design
มุมมอง 2802 หลายเดือนก่อน
Angular 18 Stylish Card in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Card in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, like, share & subscrib...
Angular 18 Stylish Tooltip in Angular Material tutorial | Material 3 Design
มุมมอง 2042 หลายเดือนก่อน
Angular 18 Stylish Tooltip in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Tooltip in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, like, share & su...
Angular 18 Stylish Checkbox in Angular Material tutorial | Material 3 Design
มุมมอง 1122 หลายเดือนก่อน
Angular 18 Stylish Checkbox in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Checkbox in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, like, share & ...
Angular 18 Stylish Input (outline) in Angular Material tutorial | Material 3 Design
มุมมอง 3012 หลายเดือนก่อน
Angular 18 Stylish Input (outline) in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Input (outline) in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, ...
Angular 18 input prefix-suffix custom image icon in Angular Material tutorial | Material 3 Design
มุมมอง 1172 หลายเดือนก่อน
Angular 18 input prefix-suffix custom image icon in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Stroked Button in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comm...
Angular 18 Stylish Flat-Button in Angular Material tutorial | Material 3 Design
มุมมอง 1072 หลายเดือนก่อน
Angular 18 Stylish Flat-Button in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Flat Button in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, like, sh...
Angular 18 Stylish Input (Fill) in Angular Material tutorial | Material 3 Design
มุมมอง 2502 หลายเดือนก่อน
Angular 18 Stylish Input (Fill) in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Input (fill) in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, like, ...
Angular 18 Stylish Icon Button in Angular Material tutorial | Material 3 Design
มุมมอง 2172 หลายเดือนก่อน
Angular 18 Stylish Icon Button in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Stroked Button in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, like,...
Angular 18 Stylish Extended-Fab Button in Angular Material tutorial | Material 3 Design
มุมมอง 972 หลายเดือนก่อน
Angular 18 Stylish Extended-Fab Button in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Stroked Button in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment sectio...
Angular 18 Stylish Mini-Fab Button in Angular Material tutorial | Material 3 Design
มุมมอง 862 หลายเดือนก่อน
Angular 18 Stylish Mini-Fab Button in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Stroked Button in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, l...
Angular 18 Stylish Fab-Button in Angular Material tutorial | Material 3 Design
มุมมอง 892 หลายเดือนก่อน
Angular 18 Stylish Fab-Button in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Stroked Button in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, like, ...
Angular 18 Stylish Stroked-Button in Angular Material tutorial | Material 3 Design
มุมมอง 753 หลายเดือนก่อน
Angular 18 Stylish Stroked-Button in Angular Material tutorial | Material 3 Design 🚀 Hello Everyone Welcome to my channel, Angular 18 in-depth tutorial, we are customizing the Mat Stroked Button in Angular 18 version. Developers often discuss new releases and share their experiences. I shared My Experience pls check my experience and like my video so keep me comment below in comment section, li...
Angular 18 Stylish Raised-Toggle in Angular Material tutorial | Material 3 Design
มุมมอง 1223 หลายเดือนก่อน
Angular 18 Stylish Raised-Toggle in Angular Material tutorial | Material 3 Design
Angular 18 Stylish Basic-Button in Angular Material tutorial | Material 3 Design
มุมมอง 2553 หลายเดือนก่อน
Angular 18 Stylish Basic-Button in Angular Material tutorial | Material 3 Design
Angular 18 Stylish Button-Toggle in Angular Material tutorial | Material 3 Design
มุมมอง 2313 หลายเดือนก่อน
Angular 18 Stylish Button-Toggle in Angular Material tutorial | Material 3 Design
Sort Array in Asc & Desc Order Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 1745 หลายเดือนก่อน
Sort Array in Asc & Desc Order Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
Slugify text custom pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 495 หลายเดือนก่อน
Slugify text custom pipe in Angular 17 | angular 17 tutorial #angular #angular17
Reverse String Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 375 หลายเดือนก่อน
Reverse String Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
Password Strength Check Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 655 หลายเดือนก่อน
Password Strength Check Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
Ordinal Number Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 385 หลายเดือนก่อน
Ordinal Number Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
Number to Roman Convert Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 245 หลายเดือนก่อน
Number to Roman Convert Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
JSON Pretty Print Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 1065 หลายเดือนก่อน
JSON Pretty Print Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
Initial Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 265 หลายเดือนก่อน
Initial Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
Indian Phone Number Format Custom pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 375 หลายเดือนก่อน
Indian Phone Number Format Custom pipe in Angular 17 | angular 17 tutorial #angular #angular17
Gender Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 455 หลายเดือนก่อน
Gender Custom Pipe in Angular 17 | angular 17 tutorial #angular #angular17
File size convert custom pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 385 หลายเดือนก่อน
File size convert custom pipe in Angular 17 | angular 17 tutorial #angular #angular17
Every First letter Uppercase custom pipe in Angular 17 | angular 17 tutorial #angular #angular17
มุมมอง 225 หลายเดือนก่อน
Every First letter Uppercase custom pipe in Angular 17 | angular 17 tutorial #angular #angular17
thank you!
Insane content, thanks bro
Post repository please
Bro, I will share code in website as ASAP, thanks 👍
When we navigate through keyboard the focus is not working how to fix any idea ??
Yes, I will definitely help you, but I want to understand your use case or requirement after I will help
@ i am trying to implement accessibility so need to give a border in select option when we navigate through tab
Great tutorial, could you share the project please?
what extension to auto complete angular material class
I'm not using any specific extension for that, but you use some css or angular snippet feature extension for suggestions
The video quality is too bad. It is hard to read the screen.
how to make border colored please help me
I will share code with you plz give me some time
Luckily, thank you very much
Amazing content. Do you know how to change the box height? Like, the height that the select container appears in the form? All the containers in your examples have the same height
I will find the code for you & will share code with you at tomorrow, thank for watching 🙂
If you emergency need so you can inspect element and try to fix him else I will share code
@@codewithbear would be great. Thank you Bear!!
Top
Thank you. But... how to increase width value of MatTooltip?
???
It is custom pipe for make reverse string
Thanks! 🙏🏿
Nice
Great video! Thanks. It helped me a lot.
Welcome and thanks bro 👍
Thank you for posting this video. @12:01 --mat-standard-button-toggle-label-text-tracking didn't work. Where can I find a complete attribute reference ?
You can use letters-spacing in class, it is work 👍
@@codewithbear Thank you
how to make text format of content like this ? Priority (bold) this is an example(light )
Will explain in angular 18 Tutorial plz stay on this channel
Or you can use custom class for styling content on your requirement.
Hello, how to use badges in the datepicker calendar to indicate the number of records on the day?
Sorry sir, I have no more idea plz use Claude Ai to solve your questions. Thanks 👍
Hello, how to use badges in the datepicker calendar to indicate the number of records on the day?
porque será q o meu não funciona? :(
Please check the material and angular version and you can use this css, it was worked in angular 15 project complete
Thank you
Good work bro 🙏 Do you have github profile with source code?
No bro, I had deleted my GitHub repository, but I will make website and push source code inside. Stay on channel to learn new topics.
Thanks for the video man, you saved me tons of work!
tysm <3
in .css?
Teal color is not appling in checkbox why?
For my scenario dropdown ui not related to its parent
Dear viewers You don't need to explicitly define the type. For example, let namString1 = 'CamelCasePipe' is totally fine. TypeScript can infer the type of namString1 as a string based on the assigned value.
Yes, I know very well but it's tutorial for beginners. Thank you
Hey Mr. Code with Bear, your solution was almost functional, only the label part wasn't working for me. ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix { padding-top: 0px; padding-bottom: 0px; margin-top: 4%; /*you can tweak around with this, */ margin-bottom: -15%; /*and this*/ } /*you also have to adjust the label, after the above*/ ::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label { top: 50%; } ::ng-deep .mdc-floating-label--float-above{ top: 80% !important; } Issue was resolved with this. You can remove ng-deep if u want the styles to exist at styles.css. Maybe this will help someone. Angular 17
I know already i have used separate components code so I can not declare in style.scss or css file ok
@@codewithbear man I just added this to help! after 1 year its normal for smth to not work.
Yes, I know bro, I was declared in style.css file and thanks for help
Is there any way to change bar width?
Yes you can width property in progress bar main class
@@codewithbear Oh thanks I changed the width changing the ::ng-deep border-top-width property I didn't know you could change it directly
Will it be possible to create a Drop-down effect when using a mat-list component instead of mat-select?
Greetings. Is it possible to show scrollbar customization in a mat-select element? (Angular 17)
Yes you can customise scrollbar in list
You can apply custom scrollbar on mat-list body class
developers need Copy and Paste... Thanks for the video, but with the long selector names and the small font used, applying these rules requires a lot of time...
I will make repository and share GitHub path as soon as possible stay on channel and take daily updates Thank you 😊
it really cool
i like the tutorial, thanks
You're welcome!
ng-deep is deprecated, can you do it in other way?
Yes you can use in global style.scss file or one more you can do viewEncapsulation.none thank you..
@codewithbear , Can we make html into a dialog box and have ts file to be linked that child html ? So that I can call REST methods in dialog box html page ?
Yes, you can make dialog separate component after call in parent component and call REST method. please look at my video in playlist, thank you
provide input.component.scss file
I will provide
Hola amigo tengo un problema. When I click on my slide toggle but go to another route in my navbar and come back, the slide toggle is not saved
Sorry I don't have idea on this topic please ask chatGpt or other Ai to gives some ideas.
Great video, thanks! Do you know how can I align that matListItemIcon in the center? )))
Angular material which version do you have need to matListItemIcon in the center ?
Great video! May I ask how and where we can find the CSS or sass properties and variables like how you've done in the video to override/customise the default styles? Thank you.
thank you sir, I have many resources from i can make the videos
@@codewithbear also instead of ng-deep, could we use view encapsulation none?
angular different types of data sharing between two components at different routes
I will more video on data sharing between two components earlier...
sir please make more videos in angular ,sir please explain rxjs in angular
I will make videos on rxjs in future
my hero <3
thank you bro
do you have a github with all those selectors for mat form field?
Many thanks for this tutorial. it helped me a lot.
Thank for watching, share videos in your friends for help.
thanks mate
welcome, men
Can anyone share the css please?
Yes I will share after 5 hour later
can you shared the repository of this ?? or there are some place to use like guide