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.
In this post I am exploring the first 3 options that came to mind:
- 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.
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.