Angular Tutorial - 27 - Optional Route Parameters

[@CodingByAmp]

the best of legend teaching angular .

[@josemariacostateixeira6133]

You are an excellent teacher!

[@atharvasuryawanshi]

Thank you for the Series. Great Videos!

[@abhig3871]

Thank you for the Series.

[@sonamohialdin3376]

So good tutorial thank you

[@iyakfishing2917]

Great info!! Full of great practices!! But I've been using the routerLink to navigate back in pages which works fine, and easy but is this not good practice?

[@msh1996]

Great Videos

[@MG-bm5oj]

Great videos! Just one question about this one. It doesn't seem a good practice to pass parameter back like shown in the video as the URL should be cleaned for SEO reasons so I wonder if there is another way to do it. Thanks for your time!

[@0GRANATE0]

Angular + SEO = horror

[@another-day-2024]

@Codevolution : how to hide the optional parameters from url i.e. It does not look great to have ';id' in the URL.

[@juanjoseramirezcalderon2618]

Hi, I'm very new to Angular. Why are the URL params separated by a semicolon ( .../departments;id=2;test=testvalue ) ? I would expect it to be separated with commas and after a question mark (.../departments?id=2,test=testvalue). Is that the Angular way or something like that? Does it make a difference? Is it possible to use the question mark syntax way in the URL with Angular? I think there's something called , why is it not used here?

[@sajansjoseph]

First of all, its not comma, its & symbol used in normal URL (For server side languages)... Angular is not server side framework... all url requests are parsed and translated by local javascript engine. Hence Angular can accept anything in the URLs... Anyhow, semicolon is valid in URL...

[@tharindu79]

Why would you do a null check then assign null when it's null anyway?

[@nasrihaithem9529]

was going to ask same question lol

[@sabaoonullahn4819]

@@nasrihaithem9529 I think that's because you can go with next to more than the ids that we have in the department list.

[@fabiotchezaum]

So let me see if I understood: If you pass only the parameter it goes like mandatory; if you pass an object as parameter it goes as optional; Is it correct?

[@idlevandal69]

Hi Fabio, you probably have your answer by now but just in case someone else sees your question, the second parameter is of type NavigationExtras. If you go to the Angular docs and search for NavigationExtras you will see that there many different options you can pass as the second parameter to router.navigate().

[@seenuvasanv]

Thanks.

[@AnandAKGupta]

Hi, what is the preferred method to remove such Optional Route Parameters from the URL (individually)... for instance say if I use Relative Navigation from the next component (then these params still stay in the URL) I can manipulate the URL string and use router.navigateByUrl() instead of relative but that seems like dirty code. Any idea?

[@ashwingowda2604]

If I click on next when I'm inside /departments/5, it will open departments/6 detail page. How to avoid that?

[@garapatigokulsairam5889]

add if condition and navigate to 404 error view or to home view. let id = this.deptId + 1; if(id >5) this.router.navigate(['']); else this.router.navigate([/'departments',id]);

[@chhotiBacchiNamHai]

I did this but the color did not change. Don't understand what is wrong with the code.

[@devenshah3653]

same here but no help from Vishwas !

[@adnankhuwaja1234]

same issue

[@lorem349]

Exactly having the same issue

[@ragahavavani3663]

Same problem

[@shaiknayeemuddinjaffree1303]

same issue..color didn't change😢

[@priyanth123mohan]

hi vishwas I didn't get this point this.departmentId ? this.departmentId : null (1:50) can u pls expalin

[@Codevolution]

Hi Priyanth, It is a ternary operator. If departmentId has a value, that is assigned to selectedId. If there is no value, null is assigned to selectedId. For more info - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

[@JuanCamiloCampoT95]

thank you, I had the same question. nice videos

[@nasrihaithem9529]

@@Codevolution if its not null then return departmentId ,else return null ?

[@nasrihaithem9529]

sorry i diidnt understand the semantic of it , if i assign departmentId to selectedId, the selectedId gonna be null if departmentId is ,else its gonna have the departmentId value !! i dont need a ternary operator here! it gonna be automatic no ?

[@xinaxtle9825]

gracias por los parametros opcionales

[@OtakuBuzz-N]

Hi I it's returning to page not found What should I do

[@DOHandDOH]

Shouldn't the query parameters be separated using a question mark? The semicolon is part of 1994 spec, which is now obsolete and the semicolon notation is technically illegal.

[@warek-bs5hs]

These are optional parameters, not query. Though in such case using query is better and more clear

[@Jovialguy110]

My doubt is why not use event emitting from child to parent class?

[@Vikashkumar-vt9hl]

Binding method to a property is not good practice. Instead you can bind a boolean property and updated it under the routeMap subscription.

[@Krazness]

Can you explain why this is the better practice?

[@sahilumredkar]

When I click on back button id is showing in url it is right but it showing page not found what is solutions for that

[@OtakuBuzz-N]

At first u see what u have written the route for the department listComponent and then on the gotoDepartments in native write if u have written same to same as shown in video u have to write department if not check once

[@hatemalhasani]

Angular has two ways to pass parameters in url 1. router param almost part of route. e.g "/segment/1" // 1 is the id parameter. 2. queryParams optional parameter. e.g "/segment?id=1. in this video [2.55] there is none compiled error line 43 it should be this.router.navigate(['/departments'], { queryParams: { id: 1 } });

[@dhome111]

(click) it's doesn't work with me i'm using angular 9 can any one help me