How to use media query in Angular 16?

Поділитися
Вставка
  • Опубліковано 18 вер 2024
  • 🌟 Exclusive Hosting Deal from Hostinger 🌟
    Ready to launch your own website? Use my affiliate link to get an exclusive discount on Hostinger's reliable and high-performance hosting plans: www.hostg.xyz/...
    Hostinger offers:
    - Easy-to-use control panel
    - 24/7 customer support
    - 30-day money-back guarantee
    - And more!
    Don't miss out on this amazing offer. Click the link above to get started today! 🚀
    ---
    In this video, I discussed how to use media queries in Angular 16 to make your application responsive and ensure it looks good on all devices. I provided a step-by-step tutorial on creating media queries and applying different styles based on device characteristics like width and height.
    =====================
    Chapters:
    =====================
    00:00:09 Welcome back to coding world
    00:00:15 Introduction to media queries in Angular 16
    00:02:00 Creating media queries in CSS file
    00:03:45 Applying media queries in Angular component
    00:04:26 Checking responsiveness by resizing browser window
    00:04:49 Conclusion and call-to-action
    #Angular16 #MediaQueries #ResponsiveDesign
    =====================
    Related Videos:
    =====================
    📐 How to use ckeditor 5 in angular 16+?: • How to use ckeditor 5 ...
    ⚙️ How to use Axios in Angular 16?: • How to use Axios in An...
    📏 How to use jQuery in Angular 16?: • How to use jQuery in A...
    📱 How to use common function in multiple components in Angular 16?: • How to use common func...
    💻 How to use async await in Angular 16?: • How to use async await...
    🔄 How to use ngModel in Angular 16? | Two-Way Data Binding: • How to use ngModel in ...
    ⏹️ How to use ngOnDestroy in Angular 17?: • How to use ngOnDestroy...
    🎨 How to use ngStyle in Angular 17?: • How to use ngStyle in ...
    🔲 How to open a modal on button click in Angular 16?: • How to open a modal on...
    🚥 How to use Bootstrap dropdown in Angular 17?: • How to use Bootstrap d...
    🕺 how to use Animate.css in Angular 17?: • how to use Animate.css...
    🖼️ How to use Bootstrap modal in Angular 17?: • How to use Bootstrap m...
    🔒 How to disable browser back button in Angular 16?: • How to disable browser...
    🔀 How to use Swiper js in Angular 17?: • How to use Swiper js i...
    📚 How to use a Javascript library in Angular 17?: • How to use a Javascrip...
    ⬆️ How to use @Input and @Output in Angular 17?: • How to use @Input and ...
    ❓ how to use @if condition in Angular 17?: • how to use @if conditi...
    🔗 How to use Bootstrap 5 navbar in Angular 17?: • How to use Bootstrap 5...
    📝 How to use tinymce editor in Angular 17?: • How to use tinymce edi...
    📣 How to use EventEmitter in Angular 17?: • How to use EventEmitte...
    =====================
    To read written versions of AyyazTech tutorials, please visit AyyazTech.com

КОМЕНТАРІ • 7

  • @mahdiandalib186
    @mahdiandalib186 8 місяців тому +2

    plz teach how to create custom media queries inside ts file and show elements based on that

    • @AyyazTech
      @AyyazTech  8 місяців тому

      Thank you for your request! Creating custom media queries inside a TypeScript file to conditionally show elements is a more advanced and dynamic approach to responsive design in Angular. I've noted down your suggestion for a future tutorial on "How to create custom media queries inside a TS file and show elements based on that in Angular 16."
      Stay tuned to AyyazTech for more in-depth tutorials. Don't forget to subscribe and click the bell icon to be notified when new content is available. If you have any more questions or suggestions, please leave them in the comments. Your curiosity drives us to create more helpful and detailed content. Happy coding!

    • @mahdiandalib186
      @mahdiandalib186 8 місяців тому

      thx man... waiting for new tutorials@@AyyazTech

    • @mahdiandalib186
      @mahdiandalib186 8 місяців тому

      if its possbile also teach us the proper way to get connected to a backend service..for example what to write in our enviroment file.... and aslo how to create a commnet section like youtube with real api data from back end@@AyyazTech

  • @WiseNectar
    @WiseNectar Рік тому +1

    Very Useful video

    • @AyyazTech
      @AyyazTech  Рік тому

      Thanks, I am glad that this video was helpful for you. If you want to see more content like this then please don't forget to subscribe my channel, click on bell icon to get notified for upcoming videos. Also please like and share this video.

  • @wolfisraging
    @wolfisraging 5 місяців тому

    nothint specific here about angular... this is same as raw css media query, nothing especial in this video!