Ben And Engineering
Ben And Engineering
  • 53
  • 5 509
Angular Material Tutorial | How To Use Custom Angular Material Icons In Less Than 10 Minutes! ⏱️ ⚡
Hello world!
In this session, we will take a look at how you can use your own custom icons alongside #angular #material icons.
Breakdown:
00:00 - Introduction
00:46 - Installing Angular Material To An Angular Application
01:06 - Configuring angular.json To Support Angular Material
01:24 - Linking Angular Material Icons In index.html
01:58 - Adding Angular APP_INITIALIZER To Register Angular Material Icons
03:02 - Creating A Custom Angular Material Icons File
04:33 - Using MatIconRegistry To Register Custom Angular Material Icons
05:43 - Demo On Using Custom Angular Material Icons
07:35 - Angular Material Error Retrieving Icon - Unable To Find Icon With The Name
08:18 - Conclusion
Always remember, you stop growing when you stop learning, and what you learn, go forth and teach others that you may grow together.
Connect with me below.
Github:
-----------
github.com/benwainaina
Twitter:
-----------
x.com/benandeng
Instagram:
-----------------
benandengineering
มุมมอง: 45

วีดีโอ

Angular | Create A Multi-step Form | Part 2 Resetting A Multi-step Form In Angular
มุมมอง 2214 วันที่ผ่านมา
Hello World! In Part 2 of creating a multi-step form in #angular , we will learn how we can reset the global multi-step form as well as the individual forms for the individual steps. Breakdown 00:00 - Introduction 02:20 - Resetting All Forms In Angular Multi-step Form 05:45 - Resetting Specific Forms In An Angular Multi-step Form 09:17 - Conclusion Always remember, you stop growing when you sto...
Reduce Code Duplication And Level Up Your Angular Using ngTemplateOutlet Directive 🚀 🔥
มุมมอง 32หลายเดือนก่อน
In this session, we will use Angular’s ngTemplateOutlet directive to reduce code duplication, organize our code and make it more readable by re-using our HTML elements. We will build and break things, and we will get the error: Can't bind to 'ngTemplateOutlet' since it isn't a known property of 'ng-template' but we will fix it 🙂 Breakdown: 00:00 - Introduction 00:55 - Importing NgTemplateOutlet...
Have You Angular @switched Yet? I Think You Should 💡
มุมมอง 10หลายเดือนก่อน
Hello World! In this session, we will see how we can convert a legacy ngSwitch code and patterns, to use the recent Angular @switch pattern. We will see how we can easily break our code, and how to fix the below error: @switch block can only contain @case and @default blocks. Breakdown: 00:00 - Introduction 00:40 - Understanding Angular's @switch Pattern 03:00 - Moving From Angular ngSwitch To ...
Are You Using Angular ng-switch Yet? It Is Easy! 🥳
มุมมอง 522 หลายเดือนก่อน
Whenever you want to render business logic conditionally, in Angular, the most commonly used Angular directive is ng-if. However, in this session, we will see how we can also use Angular ng-switch to achieve the same. Breakdown: 00:00 - Introduction 01:04 - Comparing JavaScript / TypeScript Switch With Angular ng-switch 03:46 - JavaScript / TypeScript Fall Through Case 04:33 - Angular ng-switch...
What If There Was No Angular NgIf?! 🤔
มุมมอง 702 หลายเดือนก่อน
Did you know that there are 3 other ng-if alternatives which you can use? Angular’s Ng-if is a really awesome directive, as it abstracts business logic from the user as needed. However, you also have NgSwitch, NgTemplateOutlet and Angular Dynamic Components, which you can use selectively as needed. In this class, we will explore the above alternatives, and I hope you will learn something in the...
HTML + JavaScript + CSS | Building Instagram Signup Page - Select HTML Elements In JavaScript
มุมมอง 163 หลายเดือนก่อน
User interactivity is one of the most important things when it comes to creating usable Web applications and Web pages. In this JavaScript mini-series, we will begin by seeing how we can select #html elements using JavaScript, before we can begin interacting with them. Breakdown: 00:00 - Introduction 00:30 - How To Add A JavaScript File Into HTML 02:23 - Select HTML Element In JavaScript Using ...
Learn HTML + JavaScript + CSS | Building Instagram Sign Up Page - Styling With CSS - Conclusion
มุมมอง 23 หลายเดือนก่อน
So, we get to conclude the Styling With #css mini-series, by finalizing on the: 1. Link to login section. 2. Apple play store and Google play store links. 3. Instagram footer. It has been an #amazing #styling session, and I believe you have learnt a thing or two. Always remember, you stop growing when you stop learning, and what you learn, go forth and teach others that you may grow together. C...
Learn HTML + JavaScript + CSS | Building Instagram Sign Up Page - Styling With CSS - Part 4
มุมมอง 53 หลายเดือนก่อน
So, in this fourth part of the Styling with #css min-series, we will see how we can style an Instagram Signup Form with CSS. We also get to touch on CSS Pseudo-classes such as :hover and :focus, and also target HTML element attributes in CSS. Always remember, you stop growing when you stop learning, and what you learn, go forth and teach others that you may grow together. Connect with me below....
Learn HTML + JavaScript + CSS | Building Instagram Sign Up Page - Styling With CSS - Part 3
มุมมอง 53 หลายเดือนก่อน
In the third part of this Styling with CSS mini-series, we will see how to now style the header section of the form, and for the first time, we get to use the CSS global variables we declared earlier on. Always remember, you stop growing when you stop learning, and what you learn, go forth and teach others that you may grow together. Connect with me below. Github: github.com/benwainaina Twitter...
Learn HTML + JavaScript + CSS | Building Instagram Sign Up Page - Styling With CSS - Part 2
มุมมอง 273 หลายเดือนก่อน
In this second part of the Styling with CSS mini-series, we will see how to add global variables in CSS and also have a brief introduction of the display: flex CSS property. Breakdown: 00:00 - Adding Global CSS Variables With :root 06:30 - Introducing CSS display:flex Property 09:20 - Conclusion Always remember, you stop growing when you stop learning, and what you learn, go forth and teach oth...
Learn HTML + JavaScript + CSS | Building Instagram Sign Up Page - Styling With CSS - Part 1
มุมมอง 223 หลายเดือนก่อน
So, this is the first part of the Styling with CSS mini-series, where we start adding styles to our Instagram Signup #html Page which we created in the previous class. We will be using #css for this, and hopefully you will learn something new. Breakdown: 00:00 - Introduction 00:38 - Adding The CSS (Cascading Style Sheet) To Your HTML Page 03:14 - Accessing HTML Elements Within CSS Using Class A...
Learn HTML + JavaScript + CSS | Building Instagram Sign Up Page - Defining Page Structure With HTML
มุมมอง 283 หลายเดือนก่อน
Building out a #html form and validating it is a really easy process. We will use Instagram Signup Page as a reference for this specific class. So, in the end of this series, you should be able to: 1. Create A HTML With Sign Up. 2. Style It With #css 3. Add User Interaction With #javascript 4. Validate And Submit The Form With JavaScript. This video is the first part of this series, and here is...
⛔ 🐛 ⚙️ Learn Ionic Angular | Fix Keyboard Pushing Content Up In Ionic
มุมมอง 763 หลายเดือนก่อน
Easily fix Keyboard pushing content up in Angular Ionic when the user focuses on the input fields. #angularjs #angular #ionicframework #learning Always remember, you stop growing when you stop learning, and what you learn, go forth and teach others that you may grow together. Connect with me below. Github: github.com/benwainaina Twitter: x.com/benandeng Instagram: benandengineering
⛔ 🐛 ⚙️ Learn React Native | Fix i18next::pluralResolver: use an Intl.PluralRules polyfill
มุมมอง 473 หลายเดือนก่อน
⛔ 🐛 ⚙️ Learn React Native | Fix i18next::pluralResolver: use an Intl.PluralRules polyfill
⛔ 🐛 ⚙️React Native | How To Fix Keyboard Pushing Content Up In Expo
มุมมอง 2573 หลายเดือนก่อน
⛔ 🐛 ⚙️React Native | How To Fix Keyboard Pushing Content Up In Expo
Learn React Native | How To Internationalize Your React Native Application 🌐
มุมมอง 933 หลายเดือนก่อน
Learn React Native | How To Internationalize Your React Native Application 🌐
Learn React JS | How To Toggle Between Light And Dark Mode Themes In React JS + Redux ☀️ 🌑
มุมมอง 1594 หลายเดือนก่อน
Learn React JS | How To Toggle Between Light And Dark Mode Themes In React JS Redux ☀️ 🌑
Learn Angular | Reactive Forms In Angular With Custom Form Validation ✅
มุมมอง 974 หลายเดือนก่อน
Learn Angular | Reactive Forms In Angular With Custom Form Validation ✅
Angular | How To Add Internationalization To Your Angular Application Using Ngx-Translate 🌐 | Part 1
มุมมอง 1714 หลายเดือนก่อน
Angular | How To Add Internationalization To Your Angular Application Using Ngx-Translate 🌐 | Part 1
Angular | How To Add Internationalization To Your Angular Application Using Ngx-Translate 🌐 | Part 2
มุมมอง 1174 หลายเดือนก่อน
Angular | How To Add Internationalization To Your Angular Application Using Ngx-Translate 🌐 | Part 2
Angular | How To Implement Custom Light And Dark Mode Color Themes In Angular ☀️ 🌑
มุมมอง 2264 หลายเดือนก่อน
Angular | How To Implement Custom Light And Dark Mode Color Themes In Angular ☀️ 🌑
React | Create And Validate A Multi-step Form Using Custom React Hooks 🪝
มุมมอง 2164 หลายเดือนก่อน
React | Create And Validate A Multi-step Form Using Custom React Hooks 🪝
Storage Snoop | A Productivity Chrome Extension For Web Developers
มุมมอง 115 หลายเดือนก่อน
Storage Snoop | A Productivity Chrome Extension For Web Developers
React | Implement Your Own Infinite Scroll List In Less Than 20 Minutes Using A Custom React Hook 🪝
มุมมอง 805 หลายเดือนก่อน
React | Implement Your Own Infinite Scroll List In Less Than 20 Minutes Using A Custom React Hook 🪝
Ben And Engineering 🚢
มุมมอง 395 หลายเดือนก่อน
Ben And Engineering 🚢
Angular | Create A Multi-step Form Using An Angular Service And Angular Dynamic Components
มุมมอง 4755 หลายเดือนก่อน
Angular | Create A Multi-step Form Using An Angular Service And Angular Dynamic Components
Angular | Easily Implement A Reusable Instagram-like "Hover To Preview Profile" Angular Directive
มุมมอง 655 หลายเดือนก่อน
Angular | Easily Implement A Reusable Instagram-like "Hover To Preview Profile" Angular Directive
Angular | Bypass Injection Context Errors In Utility Functions Using JavaScript Closures
มุมมอง 575 หลายเดือนก่อน
Angular | Bypass Injection Context Errors In Utility Functions Using JavaScript Closures
Angular | Scroll To Accept Terms And Conditions With JavaScript Observers
มุมมอง 255 หลายเดือนก่อน
Angular | Scroll To Accept Terms And Conditions With JavaScript Observers

ความคิดเห็น

  • @ProtikPC_pro_indigo
    @ProtikPC_pro_indigo 18 วันที่ผ่านมา

    Epic !!

    • @benandengineering
      @benandengineering 18 วันที่ผ่านมา

      Thanks for the kind words, much appreciated!

    • @ProtikPC_pro_indigo
      @ProtikPC_pro_indigo 18 วันที่ผ่านมา

      @benandengineering you configured the solution to clear all steps at once as well as each step individually! Neat work, Benson Wainaina !!

    • @benandengineering
      @benandengineering 18 วันที่ผ่านมา

      Well, as I always say, God is the Architect, I am just the vessel. I am glad that the above tutorial was helpful to you my friend!

    • @ProtikPC_pro_indigo
      @ProtikPC_pro_indigo 17 วันที่ผ่านมา

      @@benandengineering if you say so friend, if you say so; Kudos!

  • @Atm
    @Atm หลายเดือนก่อน

    Thank you, bro :3

  • @todisoarazafindrabekoto8429
    @todisoarazafindrabekoto8429 หลายเดือนก่อน

    The form is reinitialized after reloading the page. E.g: actually, i am in step = 3, i refresh the page => the step become 1 How to keep the current step after refresh the page?

    • @benandengineering
      @benandengineering หลายเดือนก่อน

      Hello and a pleasure to make your acquaintance. Okay, that is the expected behavior, because what happens is that the progress is tracked in memory i.e in the Angular Service. This means that each time you refresh the page, the Angular Service will be re-initialized and then the step will go back to step 1. So, what you could do is to sync the step with localstorage and then read the step the next time the application loads and set this in the Angular Service. I hope this helps.

    • @todisoarazafindrabekoto8429
      @todisoarazafindrabekoto8429 หลายเดือนก่อน

      @@benandengineering ok, thanks a lot

  • @cosminjebe
    @cosminjebe 2 หลายเดือนก่อน

    Thank you, sir! it worked :) Thanks a lot!!

    • @benandengineering
      @benandengineering 2 หลายเดือนก่อน

      Most welcome! Glad I could help.

  • @benandengineering
    @benandengineering 2 หลายเดือนก่อน

    Hello world! So, albeit there being @switch syntax in Angular 17 and beyond, if you are still using Angular 16 and below, then hopefully you will learn something new from this. Happy learning!

  • @mujahidHussain-p9b
    @mujahidHussain-p9b 2 หลายเดือนก่อน

    But in expo we don't have Android manifest file

    • @benandengineering
      @benandengineering 2 หลายเดือนก่อน

      Yes, this is correct. That is why there is another tutorial for when using Expo. th-cam.com/video/zvPxONBLNXk/w-d-xo.html

  • @benandengineering
    @benandengineering 3 หลายเดือนก่อน

    Hello World! I hope you are learning something so far. Here are additional reading materials for the parts between 06:44 (developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) and 06:53 (developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) that will help you understand CSS Combinators more. If you have any questions, feel free to ask!

  • @benandengineering
    @benandengineering 3 หลายเดือนก่อน

    Hello world! I hope you are learning something new from this one. One important emphasis I need to add. 32:39 The value of EN is what will be treated as the value of the select, and the English text is what will be the display text / label of that select.

  • @misteraxolotl
    @misteraxolotl 3 หลายเดือนก่อน

    Nice tutorial but how do you import the words on each page?

    • @benandengineering
      @benandengineering 3 หลายเดือนก่อน

      Firstly, thanks for the kind words, much appreciated. Secondly, good question and to answer you. The best thing about ngx-translate is that once you specify the files sources, then they will be available in the whole application. So, import once, use everywhere. I hope this helps answer you.

    • @misteraxolotl
      @misteraxolotl 3 หลายเดือนก่อน

      @@benandengineering Thank you for your reply, but I'll need more details. To import the words of each language you have to put {{}} in the html file I guess and if yes in this case I put what in it?

    • @benandengineering
      @benandengineering 3 หลายเดือนก่อน

      Okay, you will need to pipe it. Have you seen part 2 of the video? It has a complete demonstration of how to use the translation both in HTML as well as in Component. th-cam.com/video/uDnPubV-u-g/w-d-xo.html Let me know if you have any more questions.

  • @benandengineering
    @benandengineering 4 หลายเดือนก่อน

    Hello world! I was aiming for under 10 minutes for this session, however it spanned to 16 minutes. I hope you will learn something new from the additional 6 minutes. Happy learning! 🙂

  • @andsons159
    @andsons159 4 หลายเดือนก่อน

    What UI framework have you used?

    • @benandengineering
      @benandengineering 4 หลายเดือนก่อน

      @@andsons159 Just simple CSS + SCSS. No UI frameworks were used in this tutorial.

  • @benandengineering
    @benandengineering 4 หลายเดือนก่อน

    Hello world! Please make sure to check out the updated version of useBaseStep, specifically how the check is made to ensure required fields have been entered by the user. Thanks!

  • @federicobalboa9145
    @federicobalboa9145 5 หลายเดือนก่อน

    thanks, do you have a github repo?

    • @benandengineering
      @benandengineering 5 หลายเดือนก่อน

      Most welcome, and also thank you for the reminder, just updated the video description with a link to the repository.

    • @federicobalboa9145
      @federicobalboa9145 5 หลายเดือนก่อน

      @@benandengineering thank you!

    • @benandengineering
      @benandengineering 5 หลายเดือนก่อน

      Welcome, and if you have any questions, feel free to ask.

  • @davidcavaliere2940
    @davidcavaliere2940 5 หลายเดือนก่อน

    Nice content, I am following!

    • @benandengineering
      @benandengineering 5 หลายเดือนก่อน

      Thank you for the kind words, much appreciated.

  • @I-MM-O-R-T-A-L
    @I-MM-O-R-T-A-L 6 หลายเดือนก่อน

    do you use expo ? and if yes how you managed to do the shared element?

    • @benandengineering
      @benandengineering 6 หลายเดือนก่อน

      Hello @immortal3164, a pleasure to make your acquaintance. To answer you: 1. No, I did not use expo, I used RN CLI. 2. I believe it is also possible to use shared components with expo as well, because I have done so in the past. If it is specific issue you have, you can paste a gist here, or we can go through it together. Thanks!

    • @I-MM-O-R-T-A-L
      @I-MM-O-R-T-A-L 6 หลายเดือนก่อน

      @@benandengineering im using react native + expo + react navigation and I’m getting the error : RNSharedElementTransition is not available didn’t you forget to link react-native-shared-element into your project? I have tried everything it doesn’t work

    • @I-MM-O-R-T-A-L
      @I-MM-O-R-T-A-L 6 หลายเดือนก่อน

      Can you do a video on it maybe? There are no recent videos that explain how to do it all the videos are 2+ years ago

    • @benandengineering
      @benandengineering 6 หลายเดือนก่อน

      Roger that, and thanks for the suggestion. Much appreciated! Once the video is ready, I will publish it, and I will ping you. Thanks!