Angular 5 how to clear input from another component?

Question

JavaScript

Good day! I'm learning Angular
5 and in order to better master Angular I decided to make a small blog with search, I almost succeeded and the search works, but 2 questions arise:
"
2) How can I take the :query parameter in the Navbar Component, which belongs to the SearchComponent, so that when the page is reloaded, take the :query parameter and assign its value to the input ( [(ngModel)]="query" )
Here is how the routes are written

const appRoutes: Routes = [
    {
        path: ':lang',
        component: HomeComponent,
        children: [
            {
                path: 'post',
                component: PostComponent,
                pathMatch: 'full'
            },
            {
                path: 'search/:query/:page',
                component: SearchComponent
            },
           .... Другие роуты
        ]
    },
];

This is the function to process (ngSubmit) the form with input

@Component(...)
export class NavbarComponent {

    /** For search input **/ 
    query: String = '';
    ...

    /** Form (ngSubmit) handler  **/ 
    submitForm() {
        if (!!this.query)
            this.router.navigate([`/${this.currentLang}/search`, this.query, 1]);
    }
}

<!-- Begin Search -->
               <form class="form-inline my-2 my-lg-0" (ngSubmit)="submitForm()">
                   <input class="form-control mr-sm-2" type="text" [(ngModel)]="query">
               </form>
            <!-- End Search -->

How can I do this correctly in terms of Angular architecture?
Thanks in advance )

Answer 1

/** Form (ngSubmit) handler  **/ 
    submitForm() {
        if (!!this.query)
            this.router.navigate([`/${this.currentLang}/search`, this.query, 1]);
            this.query = '';
    }