Angular - Page without showing previous components

Question

I’m new at the angle, accustomed to HTML href and just open another page, let’s get to the problem!

1 - I have a form asking for the name and a button of Ubmit

2 - I have another component which is simply a paragraph with a common title: 'My second page'

When I click the button, it goes to this second page, but what happens is that it shows on the same page, using router-outlet, as it is single page, I don’t know if it is necessary to hide the form or just redirect, everything I do it just shows on the same page after the router, someone can help me?

It was to click the button and show only the title and disappear the form.

Answer 1

You are probably using the <router-outlet> within the form part. Place the form into a separate component without the <router-outlet>.

Let the <router-outlet> only for AppComponente or component that serve as a template. As your other page is already componentized, it is expected that the structure of your project will look like this:

app.component.ts
    |- formulario
        |-formulario.component.ts
        |-formulario.component.html
    |-outra-pagina
        |-outra-pagina.component.ts
        |-outra-pagina.component.html

Answer 2

When you open the component on the screen the component should actually be on the screen, to redirect to another screen have some ways( these are the ones I remember in my head, there may be many more).

To redirect in html has this way: you can put inside a

<a class="btn btn-primary btn-small" [routerLink]="['/produtos/modelos/' + item.idProduto]">Ver Modelos</a> 

Or even use a method on the TS that calls the Router. Put it on the manufacturer:

private router: Router

then to redirect does it

this.router.navigate(['/produtos/modelos/', id]);

if you want to take a look at @Viewchild is very good for those who are starting, the angular site has a lot of information, always good to take a look( https://angular.io/docs ) and also has the course of Loiane Groner on youtube, it is free.