Building an Angular Search Bar with Angular Autocomplete: A Step-by-Step Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 ต.ค. 2024

ความคิดเห็น • 39

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

    WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - th-cam.com/video/vcfZ0EQpYTA/w-d-xo.htmlsi=BptT7eqgflHIoQiQ

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

    Cool tutorial. Many thanks!

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

    Wow amazing tutorial. It would be very nice if you can make a video explaining how to apply multiple filters. Thanks for sharing!

  • @gamawfouskotouskaiopoionti5514
    @gamawfouskotouskaiopoionti5514 ปีที่แล้ว

    These videos are veryyyyyyy good for Angular developers thanks❤

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  ปีที่แล้ว +1

      You are welcome!

    • @gamawfouskotouskaiopoionti5514
      @gamawfouskotouskaiopoionti5514 ปีที่แล้ว

      @@MonsterlessonsAcademy Another good video idea, would be to explain the angular.json file and some best practices (configurations for optimising), also explaining some properties(what their use) and how we can change easily environments...last but not least, analyzing how we can configure the "production/development" objects in the angular.json
      Keep up the good work💪❤️

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

    Thank you guy for saving me

  • @tradeordie
    @tradeordie ปีที่แล้ว +2

    You are a coding beast

  • @mohitpandey2388
    @mohitpandey2388 ปีที่แล้ว

    Loved your videos on angular & how easily they are understandable. Can you please make a video on mat stepper using single form with each step having child component and they should add controls in their respective components rather than in parent component. The idea is that I have 1.5k lines of form which I want to refactor, but it got me errors. It will be really helpful for others as well.

  • @laughandtune
    @laughandtune ปีที่แล้ว

    What if we have huge records then ngonit is not advisable. please correct me If I am wrong.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  ปีที่แล้ว

      If you can get lots of record back then you need to get them with pagination.

  • @mohanareddy821
    @mohanareddy821 ปีที่แล้ว

    Can we make a similar search bar to get results from Elasticsearch?

  • @record-bank
    @record-bank ปีที่แล้ว

    helpful video. thanks.
    please show us ssr example .
    ^^

  • @serhiikolontaievskyi
    @serhiikolontaievskyi ปีที่แล้ว

    Why didn't you use the power of Observables and async pipe? It could remove a lot of unnecessary code and subscriptions

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  ปีที่แล้ว

      You can implement any feature differently. Observables is a good way also.

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

    Not working. The options are not available in the list

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

      You can take a source code from the video and compare to your code

  • @amitkrishna2412
    @amitkrishna2412 ปีที่แล้ว

    How to get the Node JS API code that you are using

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  ปีที่แล้ว +1

      Take the source code from the project. It's in the description. There is a db.json file in root.
      npm install json-server
      json-server --watch db.json --port 3004
      It will start an API.
      Here is my video about it
      th-cam.com/video/VPsOzMhLDao/w-d-xo.html

  • @Ebishenmansfield
    @Ebishenmansfield ปีที่แล้ว

    Informative. Keep it up 💪. Btw what's your editor theme?

  • @_Greenflag_
    @_Greenflag_ ปีที่แล้ว

    Last sentence was for me. Hugs and kisses, my big sweetie : )
    Ok for filtering data on the server. But you are still frustrated with backend developers, you should never implement an interface without at least throtteling API calls from client side.
    In your fetchData method AT LEAST pipe the call with distinctUntilChanged() and switchMap to cancel previous call if client hits two times (or more) enter consecutively or if response takes some time and client wants to search something else. And you should also implement a catchError if server returned an error. That's the basis package of an API call.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  ปีที่แล้ว

      I agree with you however as we have submit form and not sending requests while typing throttle, distict are not needed

  • @imadboussouf5496
    @imadboussouf5496 ปีที่แล้ว

    hello, you need also to unsubscribe no?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  ปีที่แล้ว +1

      As we have just a single page and our component is never destroyed there is no reason to unsubscribe.

    • @imadboussouf5496
      @imadboussouf5496 ปีที่แล้ว

      @@MonsterlessonsAcademy ah i see thanks for the response

    • @tyler13923
      @tyler13923 ปีที่แล้ว

      ​@@MonsterlessonsAcademy so in a real application that returns many rows at a time you can continue to search and search with no ill effects ?

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

    amazing. I have a question, is it possible to make the search Bar with several filters? For example:
    I have a url
    url/api/user/search?name=example
    and also
    url/api/user/search?email=example
    How can I make that input filter me with two different attributes?

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

      There are a lot of ways. You can write value as stringified object and then separate them in backend. Or use a POST request with body
      /api/user/search?query={name: example, email: example.}

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

    Thank you guy for saving me