I am looking to change the current element during routing instead of simply adding to it. Below is the code I am currently using:
<router-outlet>
<div class="=row" style="height:30%"></div>
<div class="=row">
<a routerLink="search" routerLinkActive="active" class="btn btn-success btn-sm" style="width:90%;height:20%;margin-left:5%">
<span class="glyphicon glyphicon-search"></span> Search1
</a>
</div>
<div class="=row" style="height:30%"></div>
<div class="=row">
<button type="button" class="btn btn-success btn-sm" style="width:90%;height:20%;margin-left:5%">
<span class="glyphicon glyphicon-plus"></span> Search2
</button>
</div>
</router-outlet>
However, the end result looks like the screenshot provided in the link: https://i.sstatic.net/4H90m.png
The "search" text is being routed from the search Component. My goal is to have "Search1" and "Search2" disappear when "Search1" is clicked, replaced with the "testing search" text from the searchComponent. This is why I placed the "route-outlet" tag as the parent tag, in hopes that it would replace the entire content. Can someone assist me with this issue? Thank you.