My goal is to clear the input text by pressing buttons that send routing events. If a specific route is received without any parameters (indicated by green buttons on the screen below), then the text box should be cleared. If the route is incorrect, or correct but with parameters (white buttons), then nothing should happen. I am subscribing to the text box value name$ in the ActivatedRoute event (I am using the routing service to pass data between unrelated components).
The logic I am trying to implement is as follows:
- If the route is '/welcome' or '/products' - continue.
- If there are params, ignore them, do not change the input text.
- If there are no params, return an empty string (clear the input with "").
For a concise demo application, visit: github.com/sam-klok/AngularPlayRoutes
https://i.sstatic.net/0VZaM.png
HTML for the main 1st component (menu):
<input #name type="text" [value]="(name$ | async)" placeholder="name"/>
HTML for the 2nd/3rd component:
<button (click)="btnClear()">Clear input above</button>
Code from the 1st component (which is currently not working) app.component.ts:
export class AppComponent {
name$ = this.activateRoute.queryParams.pipe(
map(params => params['name']),
map(x => {return x}))
Code for the 2nd/3rd component:
export class WelcomeComponent implements OnInit {
constructor(private activateRoute: ActivatedRoute, private router: Router){}
btnClear(){
// we are already on the welcome page, this should clear the text input
this.router.navigate(['/welcome']);
}