Technically the app/component is already loaded, you are only hiding it... so you are not loading the component with button click, only allowing it to be viewed by button click.
If you implement OnInit in your class and do a console log you will
see that the component has been initialized before you even click
the button.
export class AppComponent implements OnInit
ngOnInit(){
console.log('AppComponent Initialized');
}
Then if you add console.log(document.activeElement);
into your show method in index.html you will see that your button actually still has focus after it has been clicked; this is the reason your component isn't receiving focus and ultimately why the ink bar is not being displayed...
An element outside of your component has the focus at the index.html level and because of the way you are exposing the view of your component in a non angular way it is impacting the component.
function show()
{
document.getElementById("foo").style.display = "block";
console.log(document.activeElement);
}
Results in the following output via console when the button is clicked showing the button has the focus.
<input type="button" value="Click" onclick="show()">
Because your component has already been initialized in the background, you are missing the opportunity to leverage the lifecycle hooks to solve this... because they have already been called in the background you have no way to programmatically set focus inside your component when the button in the index.html is clicked... or at least a way that I would recommend.
Per the comment, explore finding a true angular way of doing this that utilizes the framework properly, this is not the way to go about doing this... it also is not doing what you think it is.