Implementing Search Functionality | Data Binding | Angular 12+

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.

[@almanza3324]

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

[@argjendsejfullai8304]

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

[@jjuliefrance]

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

[@jusjassar5938]

this is one of the best content for Angular

[@lacertezzadellapena]

Explained so simply! Thank you for that!!!

[@CaptainWhitebeard]

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

[@demonakash68]

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

[@626_sakshijadhav8]

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

[@gharchaaaswaad4658]

Superb explanation on each part... thank u sir

[@soumya780]

this is seriously awesome !!

[@peymanesmaili7191]

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

[@manojvit]

Great work !

[@shekarchepala6475]

how can I use both filter and search same time

[@LUITEN1]

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

[@JaySharma8878]

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

[@gonsa55]

amazing video thank you very much!

[@arthurschumacher7116]

Thank you!!!

[@ekanshmishra4517]

this helped me..thanks❤

[@hatbe2113]

Very nice, exactly what i searched.

[@ashokmech6613]

Which is Ytour angular version

[@hatbe2113]

@@ashokmech6613 I use Angular version "14.2.9".

[@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

[@FlaFans]

Thanks a lot

[@adeyemiayomide6651]

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]

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

[@aishwarya2396]

can u tell us where u've added

[@navneetshrivastava8609]

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]

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

[@bajrangkale7373]

great

[@torese200]

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

[@udaysankeneni]

($any($event))

[@sbihimarwan3325]

thanks alots

[@kapep]

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)

[@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?

[@VũHồngTháiPH2869]

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

[@asishkumarmundhra929]

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

[@sreebhakthi]

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

[@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]

@@procademy which method is preferable?

[@ravindranadhch9152]

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

[@mohanareddy821]

Where can I find the code from this video?

[@markharmon6964]

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]

{{ course.name}} {{course.description.slice(0, 80)}}... {{course.type}} Price: ${{course.price}} Buy Now Show Deatils

[@rickyarya7673]

try this, it will work

[@hasanhasanov9347]

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

[@procademy]

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

[@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 :)

[@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]

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

[@Ammarkoka]

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

[@Akshay-Malthane]

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

[@childtalentvlogs]

How to match drop down name with table string match

[@AGUNGKAYA]

Sir how to make searched word highlighted?

[@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]

{{ course.name}} {{course.description.slice(0, 80)}}... {{course.type}} Price: ${{course.price}} Buy Now Show Deatils

[@rickyarya7673]

try this, it work for me

[@savitham2374]

Can anyone pls suggest the error message when no search matches

[@viniciusmachadorodrigues1724]

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

[@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

[@jusjassar5938]

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]

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.

[@ahmedalshaikhli2787]

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