Angular – Clear Search on Click – 3 Options

This is a recreation of one of the simpler tasks that I had at work recently.
This is NOT the actual code – it’s a mockup to show the idea.

I was working with Child & Parent components, implementing a search function. The Parent component loads with some prepopulated data in a Angular Material table.

Only if the search didn’t match any records – then the child component becomes visible and replaces the entire visual content of the Parent Component.

Inside the Child Component there is a “Clear Search” button – which on click, should return the view to it’s original state where the Parent component is visible, and all the records are populated – so as if no search was ever applied.

@esteecodes REPRESENTATION of another angular task that I have been working on, I am second guessing my choice, which option do you think is best 🤔 #angular #development #webdev #frontend #javascript ♬ Let’s Love – David Guetta & Sia

 

 

In this post I am exploring the first 3 options that came to mind:

  • OPTION 1 – page reload using Vanilla JavaScript.
  • OPTION 2 – page reload using the Angular Routing
  • OPTION 3 – @Output a new EventEmmiter from the
    Child component to the Parent component

From the 3 options only the first one is something that I have done before.

I have been working with Angular for a bit less than two months so that was
my first time trying option 2 & 3.

Both options 1 & 2 worked fine – pretty straight forward – they both do a complete page reload…
But, that is not exactly what I wanted – I didn’t necessarily want to reload the whole page…

I started working on option 3 – with all the steps – creating a new EventEmitter in the child component, making a function with that emitter, placing the emitter in the tag of the child component withing the parent component HTML, and creating the second function in the parent component.

But I guess – that something wasn’t configured right because what happened after click was that the table with the data was loading but it was empty – I could only see the first row and it contained nothing.

I had already spent a good amount of time working on this task and I felt bad for not having anything that works, so I reverted to option 2 – at least this way the end goal is achieved…

And then I submitted my PR, but I started having second thoughts 🤔
After the end of the work day I created this photo representing what I was doing and shared it on social media.

I did get a couple of nice suggestions… but one person suggested option 2 while another suggested option 3, I was leaning towards option 3 but U really wasn’t sure how to get it to work.

UPDATE

OPTION 3 was the way to go 👍

and all I needed to do was to clear the keywords form the search… Yeah I know I know, I should have realized that but I just couldn’t see it at the time. After clearing the keywords it all worked out – emitting from child to parent did the job.

Leave a Reply

Your email address will not be published.