Implementing Search Functionality | Data Binding | Angular 12+

Поділитися
Вставка
  • Опубліковано 25 січ 2022
  • In last lecture we learned about custom event binding how we use it to pass data from child component class to parent component class. Let's understand custom event binding with another example.
    Let's implement search functionality in our web application using custom event binding.

КОМЕНТАРІ • 62

  • @almanza3324
    @almanza3324 Рік тому +6

    you don't know how much I love right now for this, thank you very much.

    • @argjendsejfullai8304
      @argjendsejfullai8304 4 місяці тому

      one of the best explanations so far, all his courses are absolutely perfect

  • @jjuliefrance
    @jjuliefrance Рік тому +9

    Magnificent ! Nothing I didn't already know, but your explanation and example are valuable and relevant. Many thanks

  • @lacertezzadellapena
    @lacertezzadellapena 2 роки тому +3

    Explained so simply! Thank you for that!!!

  • @jusjassar5938
    @jusjassar5938 11 місяців тому

    this is one of the best content for Angular

  • @soumya780
    @soumya780 2 роки тому +2

    this is seriously awesome !!

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

    Superb explanation on each part... thank u sir

  • @CaptainWhitebeard
    @CaptainWhitebeard 2 роки тому +11

    Such a good and easy-understandable tutorial! Keep up the good work man!

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

    Thank you!! I really apreciated your explanation. Suscribed!

  • @626_sakshijadhav8
    @626_sakshijadhav8 3 місяці тому

    You are an Amazing teacher 😍. Thank you so much for the playlist🥰

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

    amazing video thank you very much!

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

    I watched this playlist several times and I realize that your angular course is best course on UA-cam..Is there any playlist for JavaScript and typescript

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

    Great work !

  • @asishkumarmundhra929
    @asishkumarmundhra929 2 роки тому

    Thank you for the help. Such a clear & neat explanation !

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

    this helped me..thanks❤

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

    Thank you!!!

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

    Hello. I have a problem:
    Let's say I have a table with songs. The table includes "Back in Black" by AC/DC in it, and I have the chords too, which would be "E, D, A, B, G".
    I want to be able to search things like "Back AC/DC" or "Back in Black G" or "AC/DC E A" or things like that. I mean, multiple values within the same song, that I can't search if I have only done what appears in this video (which was a great help, by the way)
    How could I do what I just asked?

  • @peymanesmaili7191
    @peymanesmaili7191 11 місяців тому

    hello tnx so much . u said u want to create one course for interaction between component . i want to know do you want to create it or not ? your course is the best in youtube

  • @ravindranadhch9152
    @ravindranadhch9152 2 роки тому +1

    Could you please provide the example code which you have used for Input & Output Decorator

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

    Thanks a lot

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

    What to do if i want both working the search and radiobutton?

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

    Very nice, exactly what i searched.

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

      Which is Ytour angular version

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

      @@ashokmech6613 I use Angular version "14.2.9".

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

      @@hatbe2113 input and output decorator you watched? If you watched ngif working or not
      It is not working for me so you got a answer reply me

  • @kapep
    @kapep 11 місяців тому

    Thank you very much, your tutorial is always helpful, please explain how I can add such a highlight feature to my Frontend , while a user searches for a word that already exists in the database it highlights that available word, I mean instead of using It is as text in html.,likeThe file you created I want to get the text from my database (backend)

  • @adeyemiayomide6651
    @adeyemiayomide6651 Рік тому +2

    This crash course is really helpful and has really aided my knowledge on Angular Framework, I really appreciate... Please, how can we get the resources in terms of HTML and CSS you copied and pasted through all the 105 videos? Is it possible to get them?

    • @procademy
      @procademy  Рік тому +6

      Thank you for the nice comment. Here is the GitHub repo to download the code for all sections of angular 13 course github.com/manojjha86/complete-angular-13-course

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

    hi! when I try it on my app, on the console it just says the number of characters instead of the text that I'm writing. any idea of what I might be doing wrong? thanks for the video :)

  • @shekarchepala6475
    @shekarchepala6475 8 місяців тому +1

    how can I use both filter and search same time

  • @aishwarya2396
    @aishwarya2396 11 місяців тому

    can u tell us where u've added

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

    thanks alots

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

    hi,
    If I want to you both search and radio button selection then how to do?
    You said we cant use two structural directive on same element.

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

      That's right...but if you want to use two structural directive...you can use two divs one inside the other...on first div you can use one structural directive...and on 2nd structural directive you can use another structural directive

  • @AGUNGKAYA
    @AGUNGKAYA 2 роки тому

    Sir how to make searched word highlighted?

  • @user-vz7gz6wp3z
    @user-vz7gz6wp3z Рік тому

    How do i fix "Can't bind to 'ngIf*' since it isn't a known property of 'div'"

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

    great

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

    How to match drop down name with table string match

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

    Argument of type 'Event' is not assignable to parameter of type 'string'.
    i got this error please help

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

    Can anyone pls suggest the error message when no search matches

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

    how can i add the condition in the html, if I don't have an object but an array with multiple objects and every object has different data within it?

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

      You can access the object element from the array using its index and then access properties of that object. For example something like this - arr[0].props

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

    hlo there, in real projects we will create new component for search method?? or else on parent component we can do this process?

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

      You can of course do that...i am just giving an example here. There is no hard & fast rule how to create & use your component

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

      @@procademy which method is preferable?

  • @markharmon6964
    @markharmon6964 2 роки тому +1

    I have a question
    What about If we want to implement both the search and the radio buttons functionalities how to solve it ? You told us at the last video that we can't have more than one structural directive

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

      {{ course.name}}
      {{course.description.slice(0, 80)}}...

      {{course.type}}
      Price: ${{course.price}}


      Buy Now
      Show Deatils

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

      try this, it will work

  • @mohanareddy821
    @mohanareddy821 11 місяців тому

    Where can I find the code from this video?

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

    Can we download the resources that you are using for the Course ?

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

      Here is the GitHub link for source code of this series: github.com/manojjha86/complete-angular-13-course

  • @krish-pp6zt
    @krish-pp6zt Рік тому

    How to add both filter and search functionality ? Here when I add both the functionality i am getting error as unexpected closing of ng Container. Can you please help me in resolving this issue?

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

      {{ course.name}}
      {{course.description.slice(0, 80)}}...

      {{course.type}}
      Price: ${{course.price}}


      Buy Now
      Show Deatils

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

      try this, it work for me

  • @Ammarkoka
    @Ammarkoka 2 роки тому

    I don't have then how can i call that method?? At 8:30???

    • @Akshay-Malthane
      @Akshay-Malthane 2 роки тому

      This is the selector name of that component where u hv perform the search input

  • @viniciusmachadorodrigues1724

    damn it just doesnt work here, i did exactly like your video and it doesnt update the damn consolelog

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

      its crazy, i spent hours trying to make this work without success, then i started an brand new project and it worked, no idea why, both are identical

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

    Hello Sir,
    i am try to use both if conditions for (filter & the search ) but it does not work! do you have any idea? Many thanks

  • @jusjassar5938
    @jusjassar5938 11 місяців тому

    Question: what is the difference in using course.name.toLowerCase.includes(searchText) vs course.name.toLowerCase().includes(searchText)
    in my case course.name.toLowerCase().includes(searchText) did not work I got error ::::: Property 'includes' does not exist on type '() => string'.
    but when I used course.name.toLowerCase().includes(searchText) works fine

    • @maysaraaljumaily
      @maysaraaljumaily 12 днів тому

      With parentheses is calling a function that returns something. Without parentheses, you are trying to call a global variable, not a function. Such a variable name doesn't exist. Hence, the parentheses is needed to call the function.