Implementing Search Functionality | Data Binding | Angular 12+
HTML-код
- Опубликовано: 4 фев 2025
- 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.
you don't know how much I love right now for this, thank you very much.
one of the best explanations so far, all his courses are absolutely perfect
Magnificent ! Nothing I didn't already know, but your explanation and example are valuable and relevant. Many thanks
this is one of the best content for Angular
You are an Amazing teacher 😍. Thank you so much for the playlist🥰
Explained so simply! Thank you for that!!!
Such a good and easy-understandable tutorial! Keep up the good work man!
Superb explanation on each part... thank u sir
Great work !
I watched this playlist several times and I realize that your angular course is best course on RUclips..Is there any playlist for JavaScript and typescript
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
this is seriously awesome !!
Thank you!! I really apreciated your explanation. Suscribed!
Very nice, exactly what i searched.
Which is Ytour angular version
@@ashokmech6613 I use Angular version "14.2.9".
@@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
how can I use both filter and search same time
What to do if i want both working the search and radiobutton?
great
this helped me..thanks❤
amazing video thank you very much!
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?
can u tell us where u've added
Thank you for the help. Such a clear & neat explanation !
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.
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
Thanks a lot
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?
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
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)
Thank you!!!
hlo there, in real projects we will create new component for search method?? or else on parent component we can do this process?
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
@@procademy which method is preferable?
How do i fix "Can't bind to 'ngIf*' since it isn't a known property of 'div'"
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 :)
Could you please provide the example code which you have used for Input & Output Decorator
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
{{ course.name}}
{{course.description.slice(0, 80)}}...
{{course.type}}
Price: ${{course.price}}
Buy Now
Show Deatils
try this, it will work
Argument of type 'Event' is not assignable to parameter of type 'string'.
i got this error please help
($any($event))
thanks alots
Can we download the resources that you are using for the Course ?
Here is the GitHub link for source code of this series: github.com/manojjha86/complete-angular-13-course
Where can I find the code from this video?
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?
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
Sir how to make searched word highlighted?
How to match drop down name with table string match
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?
{{ course.name}}
{{course.description.slice(0, 80)}}...
{{course.type}}
Price: ${{course.price}}
Buy Now
Show Deatils
try this, it work for me
I don't have then how can i call that method?? At 8:30???
This is the selector name of that component where u hv perform the search input
Can anyone pls suggest the error message when no search matches
damn it just doesnt work here, i did exactly like your video and it doesnt update the damn consolelog
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
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
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
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.