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

Поділитися
Вставка
  • Опубліковано 2 лют 2025

КОМЕНТАРІ • 39

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

    WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - ua-cam.com/video/vcfZ0EQpYTA/v-deo.htmlsi=BptT7eqgflHIoQiQ

  • @advance5189
    @advance5189 10 місяців тому

    Cool tutorial. Many thanks!

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

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

  • @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 Рік тому

    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.

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

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

  • @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.

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

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

  • @vrushabhshah4291
    @vrushabhshah4291 10 місяців тому

    Not working. The options are not available in the list

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  10 місяців тому

      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
      ua-cam.com/video/VPsOzMhLDao/v-deo.html

  • @_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

  • @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.

  • @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 Рік тому

    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  Рік тому

      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 Рік тому

    Thank you guy for saving me