134. Navigating Programmatically

Jul 15, 2026 05:30 · 3:28 · English · Whisper Turbo · 2 Oradores

Esta transcripción expira hoy. Actualizar para el almacenamiento permanente →

Índice de conferencias

0:02

S… Speaker 1 (134. Navigating Programmatically)

Well, we already covered quite some things.

0:04

S… Speaker 1 (134. Navigating Programmatically)

We learned how to add routes and how to load them,

0:07

S… Speaker 1 (134. Navigating Programmatically)

either by typing it manually into our navigation bar here or

0:11

S… Speaker 1 (134. Navigating Programmatically)

by clicking some links.

0:12

S… Speaker 1 (134. Navigating Programmatically)

We also learned how to install these links.

0:15

S… Speaker 1 (134. Navigating Programmatically)

But what now if we wanted to load a route programmatically?

0:20

S… Speaker 1 (134. Navigating Programmatically)

So we don't have a link the user can click,

0:22

S… Speaker 1 (134. Navigating Programmatically)

but we finished some operation or the user clicked some button

0:26

S… Speaker 1 (134. Navigating Programmatically)

and then we want to trigger the navigation from our TypeScript

0:31

S… Speaker 1 (134. Navigating Programmatically)

code.

0:31

S… Speaker 1 (134. Navigating Programmatically)

We can do this.

0:32

S… Speaker 1 (134. Navigating Programmatically)

Let's say in our home component here,

0:35

S… Speaker 1 (134. Navigating Programmatically)

I add a new button to it.

0:37

S… Speaker 1 (134. Navigating Programmatically)

And on this button,

0:38

S… Speaker 1 (134. Navigating Programmatically)

I simply want to load the server,

0:41

S… Speaker 2 (134. Navigating Programmatically)

the server's page.

0:42

S… Speaker 2 (134. Navigating Programmatically)

So here,

0:44

S… Speaker 1 (134. Navigating Programmatically)

now we could try adding router link,

0:46

S… Speaker 1 (134. Navigating Programmatically)

but let's say I want to have a click listener and execute some

0:50

S… Speaker 1 (134. Navigating Programmatically)

method because we do something else than just navigating there.

0:53

S… Speaker 1 (134. Navigating Programmatically)

I will also add some CSS classes to make this button look nice.

0:57

S… Speaker 1 (134. Navigating Programmatically)

So on this click listener,

0:59

S… Speaker 1 (134. Navigating Programmatically)

I want to execute on load servers.

1:02

S… Speaker 1 (134. Navigating Programmatically)

And here,

1:04

S… Speaker 1 (134. Navigating Programmatically)

this method now gets implemented in the home component.

1:09

S… Speaker 1 (134. Navigating Programmatically)

And in onloadService,

1:10

S… Speaker 1 (134. Navigating Programmatically)

I now still,

1:11

S… Speaker 1 (134. Navigating Programmatically)

again, I simply want to navigate to the service component.

1:14

S… Speaker 2 (134. Navigating Programmatically)

So we could,

1:15

S… Speaker 2 (134. Navigating Programmatically)

for this example,

1:16

S… Speaker 1 (134. Navigating Programmatically)

of course, also use a router link.

1:17

S… Speaker 1 (134. Navigating Programmatically)

But let's say here we have some complex calculation or

1:22

S… Speaker 1 (134. Navigating Programmatically)

we reach out to our back and we store something on the server.

1:25

S… Speaker 1 (134. Navigating Programmatically)

And once we are done,

1:26

S… Speaker 1 (134. Navigating Programmatically)

now we want to navigate away.

1:30

S… Speaker 2 (134. Navigating Programmatically)

To do so,

1:30

S… Speaker 1 (134. Navigating Programmatically)

we somehow need to get access to our router,

1:34

S… Speaker 1 (134. Navigating Programmatically)

this AngularRouter,

1:35

S… Speaker 1 (134. Navigating Programmatically)

because we need to tell it,

1:36

S… Speaker 1 (134. Navigating Programmatically)

hey, please navigate somewhere else.

1:38

S… Speaker 1 (134. Navigating Programmatically)

The nice thing is we can inject this router.

1:41

S… Speaker 1 (134. Navigating Programmatically)

So let's bind it to a private property.

1:44

S… Speaker 1 (134. Navigating Programmatically)

Maybe we name it router.

1:46

S… Speaker 1 (134. Navigating Programmatically)

And this will be of type router.

1:49

S… Speaker 1 (134. Navigating Programmatically)

Router needs to be imported from at AngularRouter.

1:52

S… Speaker 1 (134. Navigating Programmatically)

With this injected,

1:54

S… Speaker 1 (134. Navigating Programmatically)

we can use this router here.

1:56

S… Speaker 2 (134. Navigating Programmatically)

So this router...

1:58

S… Speaker 1 (134. Navigating Programmatically)

And then we get a couple of methods there.

2:00

S… Speaker 1 (134. Navigating Programmatically)

One of the most important ones being navigate.

2:02

S… Speaker 1 (134. Navigating Programmatically)

Now navigate takes an argument which allows us

2:06

S… Speaker 2 (134. Navigating Programmatically)

to, guess what,

2:07

S… Speaker 1 (134. Navigating Programmatically)

navigate to a new route.

2:09

S… Speaker 1 (134. Navigating Programmatically)

And here a route is defined as an array of the single

2:13

S… Speaker 2 (134. Navigating Programmatically)

or the different.

2:14

S… Speaker 1 (134. Navigating Programmatically)

elements of this new path.

2:16

S… Speaker 1 (134. Navigating Programmatically)

So just like here an app component where I also explained this alternative

2:20

S… Speaker 1 (134. Navigating Programmatically)

way of binding router link binding it to an array where you could have

2:24

S… Speaker 1 (134. Navigating Programmatically)

users for the users part of your path and then another element

2:28

S… Speaker 1 (134. Navigating Programmatically)

for maybe something for the something part of your path.

2:31

S… Speaker 1 (134. Navigating Programmatically)

Now you always have to pass such an array when using the navigate method

2:36

S… Speaker 1 (134. Navigating Programmatically)

but in here still the first element is simply the first

2:39

S… Speaker 1 (134. Navigating Programmatically)

element or the first segment of your path.

2:42

S… Speaker 1 (134. Navigating Programmatically)

So if let's say we want to go to slash servers here,

2:45

S… Speaker 1 (134. Navigating Programmatically)

we could add slash servers here.

2:47

S… Speaker 1 (134. Navigating Programmatically)

And as before,

2:49

S… Speaker 1 (134. Navigating Programmatically)

this is now an absolute path.

2:50

S… Speaker 1 (134. Navigating Programmatically)

You could have a relative one,

2:52

S… Speaker 1 (134. Navigating Programmatically)

but here you have to control to what this should be relative to.

2:56

S… Speaker 1 (134. Navigating Programmatically)

And I will come back to this.

2:58

S… Speaker 1 (134. Navigating Programmatically)

So for now, let's make it an absolute path here.

3:00

S… Speaker 1 (134. Navigating Programmatically)

And once we did this,

3:04

S… Speaker 1 (134. Navigating Programmatically)

Let's check our page here,

3:06

S… Speaker 1 (134. Navigating Programmatically)

click this button,

3:07

S… Speaker 1 (134. Navigating Programmatically)

and we go to servers.

3:09

S… Speaker 1 (134. Navigating Programmatically)

So this is now programmatically routing to a different page.

3:13

S… Speaker 1 (134. Navigating Programmatically)

Still, it doesn't reload our page.

3:15

S… Speaker 1 (134. Navigating Programmatically)

It does the same as if we clicked a router link,

3:18

S… Speaker 1 (134. Navigating Programmatically)

but with this router navigate method,

3:20

S… Speaker 1 (134. Navigating Programmatically)

we are able to trigger this programmatically,

3:23

S… Speaker 1 (134. Navigating Programmatically)

so trigger this in our code.

Esta transcripción fue generada por AI (reconocimiento automático del habla). Puede contener errores — verificar contra el audio original para uso crítico. Política de IA

❤️ ¿Te encanta STT.ai? ¡Cuéntale a tus amigos!

Resumen

Haga clic en Resumen para generar un resumen de IA de esta transcripción.

Pregúntele a AI acerca de esta transcripción

Pregunte cualquier cosa acerca de esta transcripción: la IA encontrará secciones relevantes y responderá.

Transcribir otro